Simplifi – Design System, iPad App & Redefined Navigation

Designed a tablet app from scratch, revamped the dashboard, redesigned the design system for mobile/tablet/web, and implemented new navigation for Quicken's Simplifi. 18% improvement in tablet retention.

Role: Sr. Product Designer

Timeline: 6 weeks (2024)

Company: Quicken Inc

By Bishal Mishra, Product Designer

Design System, iPad App, & Redefined Navigation

Tablet app from scratch, the revamped dashboard for consistency, redesigned design system, and the new navigation for Simplifi.

Overview

About the project

I designed a tablet app from scratch, revamped the dashboard for consistency, redesigned the design system for the mobile/tablet/web, and implemented a new navigation for Quicken’s primary application called “Simplifi”.

My Role

I was the sole designer fully owning the initiative, working closely with Simplifi’s design team (8 designers) and 4 product managers across verticals to lead a cohesive redesign of the design system. While everyone else contributed through feedback and strategic input, I drove the execution and cross-functional alignment.

Key Impact

We released iPad version within a month. (initial target was 3 months) Introduced a revised design system for the mobile/tablet/web platform The team quickly adopted the refined design language across all platforms (web/tablet/iOS + other product line ups) Revised 5 year old navigation to expand user interaction on all features

As you scroll down, let me break this whole problem space into two parts: the visual redesign and the navigational redesign. Simplifi had evolved over time, adding powerful features—but the interface hadn’t quite kept up. Users were struggling with visual clutter, inconsistent styling, and a navigation system that felt more desktop-era than mobile-first. We took this as an opportunity to not only modernize the look and feel of the product, but to reimagine how users move through it. The navigation redesign, on the other hand, was about usability—shifting from a left-side rail to a bottom-tab system that better supported touch interactions and streamlined user flows. Together, these changes aimed to make Simplifi feel lighter, more intuitive, and ready for its next chapter.

The app’s UI had several usability issues, including poor spacing, visual congestion, and inconsistent pagination. Key elements lack visual separators, making content hard to scan, while some color choices fail accessibility standards. Typography and layout vary across cards, and interaction patterns are inconsistent—such as “See all” vs “See more” or unclear tap targets. Overall, inconsistent design and weak hierarchy hurt readability and user experience.

Crafting a Cohesive UI Design System

I explored a wide range of UI styles—testing different card layouts, colors, hierarchies, and component arrangements—to figure out what truly works. From bold visual blocks to more minimal, data-driven views, this process helped me evaluate clarity, consistency, and usability across the board. Each iteration brought me closer to a dashboard design that balances visual appeal with user efficiency.

Team-Driven Refinement

Though I was the sole designer on the project, the process was highly collaborative. I shared iterations frequently with the team—PMs, engineers, and stakeholders—gathering feedback to refine layout, clarity, and functionality. Their input helped shape thoughtful details across themes, layouts, and data presentation, allowing me to continuously iterate toward a more intuitive and aligned experience.

Solution: Modular Components

To ensure consistency and scalability across the product, I built a modular component system with clearly defined sections like headers, body content, and footers. This approach allowed for flexible composition while maintaining visual harmony and reducing redundant design decisions. By standardizing spacing, layout behaviors, and interactions at the component level, I made it easier to build and iterate on new screens with speed and confidence.

Components in Action

The components below highlight just a few examples — like the evolution of the Spending Plan card and other key dashboard modules including Recent Transactions, Top Spending, and Watchlists. Each component was built to be self-contained and adaptable, allowing information to be layered progressively without overwhelming the user. This modularity made it easy to rearrange, reuse, or scale content while maintaining visual consistency and a coherent experience across the product.

Rethinking Notifications for Clarity & Control

The original notification experience was cluttered and overwhelming, presenting all alerts in a single, undifferentiated list. Without categorization or hierarchy, users had to manually scan each item to find what was relevant. The “Clear All” option risked permanently deleting important notifications, and the repeated left-to-right layout made scanning inefficient. There were no clear actions tied to notifications, leaving users uncertain about next steps or what required their attention. Over time, the notification list grew uncontrollably, offering no way to manage older messages or prioritize newer, more critical updates. To solve this, I introduced a more structured and user-friendly notification system. Notifications are now categorized (e.g., Income, Bills, Refunds), helping users focus on what’s most important. Actionable alerts include persistent buttons like “Assign categories,” making next steps clear and immediate. “Clear All” was replaced with “Mark all as read” to preserve message history while reducing noise. A vertical layout improves readability, and the addition of “Load Previous Notifications” gives users more control without overwhelming them. The result is a cleaner, more intuitive and supports both quick triage and deeper follow-up.

Navigation That Fights Muscle Memory

The current navigation setup isn't designed with mobile ergonomics in mind. Key actions—like notifications and dismiss buttons—are positioned in the top corners, falling into hard-to-reach zones for one-handed use. This leads to unnecessary friction, especially on larger phones where users either stretch awkwardly or default to two-handed interaction. The side drawer menu also reflects a desktop-first mindset, with a long list of items that lack prioritization and require vertical scrolling. Its left-edge trigger and layout don’t align with the natural thumb zones for either hand, making repeated navigation feel clunky. Adopting a mobile-first approach with bottom navigation or context-aware shortcuts would better support ease, speed, and user comfort.

The navigation solution was centered around grouping related features into dedicated tabs—like Transactions, Planning, Bills & Payments, and more—to create a more intuitive and thumb-friendly experience. This structure reduces cognitive load by organizing the app around how users actually think and interact with their finances. However, knowing that our app serves an older user base, we’re intentionally rolling out this change in phases. Instead of overhauling the navigation all at once, we're chunking the transition into manageable steps—allowing users to gradually adapt while we validate and refine the new experience along the way. I planned to measure success by tracking improvements in navigation efficiency, increased engagement with high-priority features, and a decrease in user confusion—particularly among our older user base. This would help validate the phased rollout while ensuring the redesign supports both usability and adoption.

I continued evolving the bottom navigation concept by designing a dedicated dashboard for each tab, tailored to its specific function. This allowed users to focus on one area at a time while still accessing everything they needed with minimal friction. I also explored ways to customize modules within each dashboard—introducing smart behaviors and even integrating AI features to provide personalized insights and recommendations.

Phased Navigation Rollout

To ensure a seamless experience for our diverse user base—particularly older users familiar with the legacy interface—I approached the navigation redesign as a gradual transformation rather than a sudden overhaul. The new bottom navigation concept had clear usability benefits, but rolling it out all at once risked confusing users or disrupting established behaviors. So I structured the rollout in phases, using continuous testing, feedback loops, and controlled exposure to validate and refine each step before scaling further.

Phase 1 began with improving reachability and mental organization by shifting the navigation to the right side of the screen. This adjustment, though subtle, aligned better with thumb-friendly zones on mobile devices and reduced the need for awkward stretching. At the same time, I reorganized the menu structure to group related items together, helping users more easily locate what they needed without relearning the system. This phase set the foundation for change while keeping users anchored in a familiar environment.

Phase 2 introduced the new bottom navigation pattern gradually, beginning with a small test group of 3% of users. Based on positive results and qualitative insights, we incrementally expanded access to 10%, 15%, 50%, and finally 100% of the user base. Each batch allowed us to monitor usage patterns, gather support feedback, and resolve any friction points early. This staged release strategy helped ensure not only adoption but also long-term retention by giving users time to adjust and feel confident navigating the new system.

Conclusion

This project gave me the opportunity to reimagine core parts of a complex financial product while balancing usability, accessibility, and stakeholder needs. From identifying navigation pain points to building a modular component system and introducing a phased rollout strategy, every decision was guided by real user behaviors and validated through testing. The success of the bottom navigation—where all 10/10 users could complete tasks with ease—showed that even small, intentional shifts in UX can deliver significant impact. Along the way, I strengthened my ability to collaborate across multiple PMs and teams, integrated feedback from a broad range of designers, and embraced an iterative mindset. The final release—especially on iPad—was met with outstanding feedback and a perfect user satisfaction score. More than just a redesign, this was a case of shaping a scalable design foundation that will continue evolving alongside the product and its users.