✦ Work
Design System Rebranding
Creating a design system to reflect the company’s new brand
Role
Co-designer
Team
2 UX Designers, Branding, VP of Design, Engineering
Year
2023
TimeLine
6 weeks
PROBLEM STATEMENT
The company partnered with UX to overhaul the product’s UI to align with a bold, lively, premium, and trustworthy new brand. Throughout the redesign, we asked: How can we translate these brand qualities into the product while respecting mental models, supporting extended daily use, and maintaining competitive differentiation?
Goal
Short-term: "Reskin" the current UI to match the new branding’s typography, colors, and visual style.
Long-term: Develop a modern, scalable design system to support a more substantial product overhaul, improve usability, and future-proof the UI across platforms.
My Role
I co-led the design efforts, collaborating closely with leadership and the branding team. I helped develop and present design concepts, reskinned every screen of the app for development handoff, and created the first iteration of the new design system to support both short-term updates and long-term scalability.
Key Features
Full visual refresh aligned with the updated brand direction
Component library for consistency and scalable design
Dual design strategy: Quick-fix reskin of the current product and forward-looking updates to enhance UX and mobile responsiveness
IMPACT
4/5
customer satisfaction
185
countries launched
6,500
monthly active users
GOALS
Evaluate how the updated UI impacts usability for client manager user types by testing users on key tasks, including employee trainings, time tracking, onboarding, creating users, finding existing quotes, requesting new quotes, locating onboarding documents, and accessing invoices.
METHOD
10 unmoderated tests via UserTesting
Results
Key Findings
Users successfully completed 6 out of 8 tasks, demonstrating a strong baseline of discoverability and usability in the updated UI. Testing also revealed several opportunities to enhance efficiency and clarity:
Improve information architecture and labeling — Users often looked for onboarding documents, employee trainings, and invoices under different tabs (e.g., Engagements or Pay), suggesting a need for clearer grouping and navigation cues.
Enhance task discoverability — Some participants struggled to locate functions like Create Client Manager or Request a Quote, indicating that task names or entry points could be made more intuitive.
Provide contextual guidance — Adding tooltips, in-line help, or onboarding hints could help users confirm they’re in the right place and reduce hesitation.
Refine page hierarchy — Several users expected certain actions to be nested differently (e.g., under company or employee profiles), highlighting opportunities to align structure with user mental models.
Original UI
01 ∙ Updated Navigation and Sub-Navigation
Redesigned the navigation and sub-navigation with clear labels, icons, and interaction states that align with users’ mental models. Sub-navigation now clearly indicates the active tab, making it easier for users to understand their location and navigate the product.
02 ∙ WCAG-Compliant Components
Ensured all components meet WCAG 2.1 AA accessibility guidelines, considering various interaction states. This was particularly challenging as some branding elements did not initially meet accessibility standards, requiring adjustments to balance brand fidelity with usability.
03 ∙ Component Library with Clear States
Created a full library of reusable components—including cards, buttons, badges, and links—with clearly defined states. Provided dimensions and usage guidelines in the design system to ensure consistency and scalability across the platform.
Key Learnings
Plan realistically for timelines and resources. The project required extra hours from the team to meet deadlines, highlighting the need for additional development support or a longer timeline for ambitious goals.
Set achievable expectations. High aspirations for mobile designs and other UI improvements had to be deferred to future projects, reinforcing the importance of balancing ambition with available time and resources.
Document designs early. Limited time for design documentation led to more ad hoc meetings with developers, emphasizing the value of early, clear documentation to streamline handoffs.
Leverage available resources effectively. Despite time constraints, the team successfully delivered a high-quality update by prioritizing core functionality and collaborating closely across roles.