Redesigning NAVIT’s Mobility App

NAVIT is a unified platform that helps companies manage mobility benefits—like public transit, bike leasing, or fueling cards—for their employees. During my 2.5 years as Senior Product Designer, I led a full redesign of the NAVIT mobile app, implemented a budget allocation feature, and introduced scalable systems and practices across the product organization.

This case study walks through that journey—from quick wins to strategic foundations—highlighting how I delivered impact by aligning user needs, business goals, and product direction.

The Challenge

When I joined NAVIT, users struggled to understand how their benefits worked—what they could use, how to change them, and where their budget was going. This lack of clarity led to:

  • Confusion and frustration

  • Low adoption of key features

  • High support workload for the team

On top of that, the app’s visual language created false expectations. All benefits were presented as prepaid cards, leading users to believe they behaved the same. Complex offerings like reimbursements, bike leasing, and the Deutschlandticket were misunderstood or underused.

“I don’t know why anyone would choose public transit or bike leasing if the red card includes everything.”

— New User

Phase 1: Foundations & Early Wins

Research & Insights

I began with app evaluations and internal feedback loops via Customer Support and Sales, followed by user interviews. Key insights included:

  • Users didn’t know they could distribute their allocation to multiple products—or how to do it

  • Budget behavior (what comes in, what goes out) was unclear

  • Confusion increased for companies offering top-ups or mixed setups

  • The onboarding experience overwhelmed users with too much information too early

  • The allocation tool was buried in Settings and hard to find

Supporting Data

  • Only 31% of users selected more than one product, even though 77% were eligible

  • Users waited 47 days on average to add a second product

Design Interventions

  • Merged product descriptions and selection onto one screen for clarity

  • Improved visibility of the budget allocation tool by moving it to the main menu

  • Removed card visuals for non-card products to eliminate false equivalence

  • Added onboarding guidance and simplified educational content before first purchase

  • Introduced language selection before login to reduce early churn

These updates reduced support tickets and increased product activation rates.

Phase 2: Budget Allocation and History Page Redesign

After stabilizing onboarding, I took on a deeper challenge: helping users understand and manage their budget. I led the first iteration and later guided a new Product Designer through the second.

The Budget Allocation feature empowers users to split their employer-provided budget across mobility products. But the original experience caused friction:

  • Users didn’t know if edits were saved or when they’d take effect

  • The history page didn’t reflect actual usage

  • For users with top-ups or hybrid benefits, it was unclear what money had been spent, reimbursed, or carried over

“I’m not sure if the number at the top is what I have left, what I got, or what I’ve already used. It’s different every time.”

— Users to Customer Support

Design Process

  • Created “before” and “after” allocation views to preview changes

  • Split the interface into two views: current overview and future edits

  • Added confirmation screens with clear formatting to show when edits take effect

  • Redesigned transaction history to distinguish between different types of transactions

  • Redesigned the top section of the History tab to break down current budgets by product and unify language across the app

“Now I can see that each number is for each card, like on the homepage. Makes sense.”

— User during testing

Phase 3: Systematizing Design & Scaling Impact

As the product matured, I took on a dual focus: expanding the product with new features while making the design process more scalable and efficient.

New Feature Development

While continuing to improve the app experience, I also led the design of several new features, to name a few:

  • Deutschlandticket: Enables employees to purchase a discounted monthly transit pass via employer benefits.

  • eBike Subscriptions: Integrated with Dance to allow flexible e-bike rentals through the app.

  • Bike Leasing: Partnered with Deutsche Dienstrad to support long-term leasing and tax savings on bikes.

These features required building new user flows, UI components, and user testing. Each one added complexity to the app—reinforcing the need for a scalable and repeatable design approach.

Design System Implementation

When I joined NAVIT, there was no design system in place — just a basic Figma library with components copied and pasted manually. The engineering team had no reusable UI foundation; everything was hard-coded screen by screen.

I worked together with a design student to:

  • Audit existing UI patterns

  • Create a scalable Figma library

  • Led the implementation of a shared component system using MUI with Paper

This drastically improved the speed and consistency of our releases:

  • Reduced dev time on UI by an estimated 30–50%

  • Improved handoff clarity and reduced iteration loops

  • Brought cohesion and reusability across both the app and dashboard

Mentorship

I mentored a Product Designer Afra Saneinejad, supporting their growth across:

  • UX research foundations

  • Hands-on component building

  • Juggling multiple feature tracks in a startup environment

Continuous Feedback Loops

I developed and maintained structured communication with Customer Support and Customer Success teams. This ensured our product decisions reflected real user needs—especially when launching new features.

What We Couldn’t Solve

Some limitations were beyond design:

  • Users couldn’t add post-tax money to their NAVIT card due to legal/tax constraints. This led to frustration when budgets went unused.

  • We lacked in-app behavioral tracking, relying on interviews, NPS, and support tickets—which slowed validation and iteration.

Results

Quantitative Impact

  • More users activated multiple products

  • Faster time-to-first-purchase: users felt confident they “knew how to use it”

  • Fewer support tickets related to budget and allocation

  • Faster account verification after invitation

Qualitative Wins

  • Improved clarity and trust in the app

  • Reduced internal friction between Product and Support

  • Improved team velocity through shared design patterns

What started as a series of UI fixes evolved into a strategic redesign of the NAVIT app. By combining user research, UX/UI improvements, systems thinking, and team collaboration, I helped reshape how users experience and manage mobility benefits.

This work also laid the foundation for a continuous research practice at NAVIT—which I cover in a separate case study focused on building a scalable feedback loop.