Background

This case study highlights how we evolved the feature through user research, design iterations, and collaboration with cross-functional teams. It also reflects my role in mentoring a junior designer and ensuring product decisions are aligned with user needs and business goals.

The feature empowers users to allocate their mobility budgets across products while providing clear visibility into how and when changes take effect. Its development reflects a long-term commitment to enhancing the user experience and driving engagement.

The Problem 

Users lacked clarity around mobility package allocation options, leading to:

  • Confusion about modifying allocations and understanding budget usage.

  • A decrease in perceived value from NAVIT.

  • A higher support workload due to related inquiries.

Supporting Data:

  • Only 31% of users had created a single product, despite 77% having the option to create multiple products.

  • On average, users waited 47 days before creating a second product.

My Role

As a Senior Product Designer, I led the end-to-end design process for this feature and implemented foundational practices across the company:

  • User Research: Conducted interviews, usability tests, and data analysis to identify pain points and opportunities.

  • UX Design: Designed flows and wireframes to simplify and enhance user interactions.

  • UI Design: Developed high-fidelity designs, leveraging a scalable design system.

  • Mentorship: During Stage 3, I mentored a working student designer, providing guidance on best practices, feedback, and professional development.

  • Cross-Functional Collaboration: Partnered with product managers, engineers, and stakeholders to align user experience with business goals.

I also led initiatives to implement a continuous user research system and establish a design system, ensuring scalability, efficiency, and consistency across NAVIT’s B2B and B2C products.

Feature Evolution

Stage 0: Initial State

When I joined NAVIT, the feature had critical usability issues:

  • Users selected products on one screen, learn about details in another, and set the budget on a third one.

  • The allocation feature was hidden in settings, making it difficult to find.

  • Users couldn’t see whether their changes were saved or how future allocations differed from current ones.

Stage 0: Initial State

Stage 1: Initial Improvements

  • Relocated Feature: Moving the allocation tool to the bottom menu increased visibility and reduced support tickets.

  • Enhanced Transparency: Redesigned the interface to display "before and after" states, providing clarity on changes.

  • Clearer Product Details: Added product descriptions to help users understand and compare their options before signup.

  • Created a preview screen to ensure users could review edits before submission.

Stage 1: Initial Improvements

  • “...I don't have that issue anymore, since you now allow changing the budget"

    User Feedback. (Budget reallocation had always been allowed, just too hidden in the App)

Stage 2: Refining Clarity

  • The top of the screen displayed too much information about total allocations, overwhelming users and generating support inquiries. We simplified the design by emphasizing monthly budgets and adding a link to details about company-specific budget policies.

  • Started testing and implementing a design system (based on MUI) to ensure scalability and design consistency.

Stage 2: Refining Clarity

Stage 2.5: Addressing Timeframes

  • We needed to support multiple allocation timeframes (monthly vs. quarterly) to accommodate company-specific requirements and started the design iteration.

Stage 2.5: Addressing Timeframes

Stage 3: Current Iteration

After testing Stage 2.5, we found that while users understood the process, some overlooked the date selector, indicating room for further clarity. To address this, I collaborated with a working student designer to implement improvements before development:

  • Reorganized the allocation section into two distinct pages: one for the current overview and another for future edits. This separation made it clear that changes apply only to future allocations.

Mentorship: I supported the working student in interpreting user and business needs, aligning their work with priorities, and fostering their growth as a designer.

Stage 3: Final Iteration

Outcomes

  • Increased Engagement: The percentage of users creating multiple products has increased.

  • Reduced Support Tickets: Allocation-related inquiries significantly declined.

  • Enhanced User Understanding: Users now clearly understand allocation options, timing, and limitations.

Conclusion & Next Steps

Implementing a continuous user research system enabled us to quickly uncover and address user pain points, ensuring that design iterations were both timely and impactful. In parallel, developing the design system is poised to become a cornerstone of NAVIT’s product development process, streamlining development time while ensuring consistency across all products.

Next Steps:

  1. Enhance the "Continue" button functionality for smoother user interactions.

  2. Our monthly user research sessions provide ongoing insights, helping us identify opportunities for continuous improvement.

  3. Explore new ways to enhance transparency and user education around budget allocation options.

Next

hibyrd