ComboHR

How to enhance navigation and ease employee details access

Combo is a leading HR software platform designed to simplify employee management for businesses. It helps streamline HR processes such as scheduling, payroll management, and employee administration, enhancing productivity and reducing operational complexity.

Quick overview

I led the redesign of the Member Page, aiming to enhance usability, clarity, and technical performance. The project was driven by the need to implement our newly developed design system, simplify information access, and eliminate unnecessary back-and-forth interactions within the workflows

My Role

Product Designer and Design System Manager – User Research, User Flows, Interactions, Prototyping

Team

Collaboration with Product Manager (HR squad), Customer Success team (CSM), HR developers, and Frontend developers (Design System chapter)

Dependencies

Close coordination with the Mobile team to anticipate necessary adaptations due to differing tech stacks

Problem Statement

Several UX/UI issues identified

  • Inconsistent Design System: The visual and interaction design was inconsistent, leading to confusion and difficulty in maintenance.

  • Information Overload: Users struggled with overwhelming and sometimes irrelevant information.

  • Unintuitive Actions: Critical actions required excessive navigation, causing frustration and inefficiency.

Initial KPIs to improve

  • Reduce customer support tickets related to the Member Page.

  • Increase adoption of the new design system.

  • Improve page load speed significantly.

Solution & Process

Discovery

  • Data Analysis: Identified friction points through user behavior analytics and heatmaps.

  • User Interviews: Engaged directly with users to gain detailed insights into their frustrations, pain points, and expectations.

  • Customer Tickets Analysis: Reviewed recurring problems highlighted through support interactions.

  • CSM Feedback: Held regular collaborative discussions with the Customer Success team to deepen understanding of user challenges.

Key Insights

  • Navigation complexity significantly contributed to user frustration.

  • Essential information needed clearer hierarchy and prioritization.

Data mapping and sorting on Miro

Design Ideation

  • User Flows: Developed detailed user flows representing main use cases to streamline navigation and reduce user effort.

  • Wireframes: Explored multiple low-fidelity wireframe versions, testing different layouts for organizing information intuitively.

  • Interactive Prototypes: Created high-fidelity, clickable prototypes in Figma to realistically simulate user interactions and validate assumptions early on.

Major design change

We transitioned from a dense, single-page layout to a structured, tab-based interface, significantly reducing cognitive load and improving information discoverability

New information architecture with tabs

Testing and Iterations

  • User Testing with Maze: Conducted multiple rounds of quantitative and qualitative user testing using Maze, enabling quick feedback loops.

  • Usability Adjustments: Analyzed Maze feedback to refine interactions, adjusting navigation patterns and minimizing friction points.

  • Content Refinement: Iteratively collaborated with the CSM team to refine content wording, ensuring clarity and minimizing confusion.

Development Collaboration

  • Maintained close communication with frontend developers to align on design system implementation.

  • Anticipated technical constraints through regular discussions with the Mobile team, ensuring the final design was consistent across platforms.

Results and Impact

Impacted KPIs

  • 40% reduction in customer support tickets related to Member Page.

  • Page loading speed improved reduced to 0.9 seconds, significantly enhancing the overall user experience.

UX Impact

  • Intuitive navigation, fewer unnecessary steps.

  • Faster access to key information, significantly reducing user frustration.

This redesign project notably enhanced Combo's user experience, adoption of our design system, and overall platform performance

Key Learnings

Early user testing was pivotal in quickly identifying and addressing UX issues

Strong cross-team collaboration significantly enhanced project outcomes

Earlier anticipation of Mobile team dependencies would further streamline future projects

Member page before redesign

Before

Member page before redesign

Before

Member page before redesign

Before

Member page after redesign

After

Member page after redesign

After

Member page after redesign

After

Say Hello!

Have an opportunity, wanna collaborate on something cool or just say hello?

Email me

© Vivien Lecart