Case Study
UKG Product & Feature Icon System
UKG is a leading enterprise human resources and workforce management company. This case study highlights how I systematized 250+ feature icons into a unified set of 150+ icons, forming the foundation of UKG's product brand identity and design system.
- My Role
- Product Brand Designer
- Timeline
- 2022 – 2023
- Focus
- Visual Systems, Iconography, UI Design
Work I Owned
Visual System & Iconography. Led the systematization of 250+ feature icons into a unified set of 150+, establishing visual guidelines, grid constraints, and brand alignment rules now used across UKG's product ecosystem. I streamlined the internal contribution workflow by improving file architecture, naming conventions, and designer QA processes.
Custom Illustrations. Designed 15+ original illustrations to extend the brand's visual language across product surfaces, marketing assets, and onboarding moments.
UKG Community Web Experience. Designed key enhancements for the UKG Community platform, a closed support and engagement ecosystem with 160,000+ members and 55,000 active users. Focused on improving navigation clarity, self-service flows, and cross-product UI consistency.
Open Enrollment Responsive Design. Redesigned the annual Open Enrollment experience across web and mobile, enabling customers to update benefits intuitively. Optimized task flows for accessibility, responsiveness, and clarity during high-traffic periods.
Establishing the Visual System Foundation
To unify UKG's product surface area, we began by defining the foundations of the visual system. This included establishing icon construction rules, grid constraints, stroke and corner-radius patterns, and brand-aligned color usage. These principles ensured that every icon and UI asset felt consistent, approachable, and uniquely "UKG."
Systematizing the Icon Set
Once the foundation was defined, I audited 250+ legacy icons from multiple product teams. I grouped duplicates, identified inconsistencies, and merged overlapping concepts into a streamlined set of ~150 icons. Each icon was redrawn using the new guidelines, ensuring uniformity across size, stroke, spacing, and visual personality.
Before / After Icons
Total Icons within Design System
Building the Contribution Workflow
To scale the system, I designed a repeatable workflow for designers and developers to request, review, and integrate new icons. This included:
Intake form for new requests
Naming conventions
Version control rules
File structure for Sketch/Figma libraries
QA workflow for pixel-perfect icons
This process reduced inconsistency, prevented duplicate icons, and improved cross-team collaboration.
Integrating the System Into Product UI
With a robust icon system in place, I applied the visual language across key product experiences. I collaborated with multiple product teams to update UI patterns, navigation structures, and interaction components to align with the new brand identity. My key contributions included:
Enhancing the UKG Community interface
Refining the Open Enrollment benefits experience
Aligning illustration styles with product UI
Ensuring Cross-Ecosystem Consistency
Because UKG has marketing, product, and services teams working across different platforms, consistency was a major challenge. I partnered with cross-functional groups to roll out shared visual guidelines so icons, illustrations, and core UI elements looked cohesive regardless of surface.
Documenting the System
Finally, I created a comprehensive set of visual design system documents used by designers and developers across the company. These materials included:
UI visual guidelinesBrand asset usage rulesDLS libraries for cross-team use
Reflection
