Simplifi iPad – Split View Navigation

Designed the iPad app for Quicken's Simplifi from scratch with split view layout. Released within 1 month (target was 3 months).

Role: Product Designer

Timeline: 2 weeks (2024)

Company: Quicken Inc

By Bishal Mishra, Product Designer

iPad App for Quickien's Simplifi

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

Overview

As a Product Designer at Quicken Inc., I had the opportunity to lead the design efforts for the Simplifi iPad App. I focused on creating a tablet-specific design from the ground up, addressing the app’s usability issues on the iPad, and particularly improving the dashboard’s functionality and navigation experience. Simplifi, a leading personal finance app, provides users with comprehensive tools to manage their financial lives.

The Problem & Challenge

To start with, we didn’t even have an iPad-friendly app. The iPad app was only a render of the mobile app on a larger screen. Inefficient use of the larger screen space, resulting in a less engaging and functional interface. Tons of user complaints not being able to use the app properly on iPad.

Collaboration

I worked closely with product managers, software engineers, designers working on the web/mobile platform of the same app, and stakeholders, gathering valuable input. Regular team meetings and feedback sessions ensured alignment and facilitated the integration of diverse perspectives into the design, making everyone feel involved and valued.

Process

Template Creation for Development: I began by designing templates for generic forms and pages to help engineers seamlessly transition the mobile app to the iPad. These templates provided: Adaptable components. Making it easier for developers to implement the new design without reinventing core elements. It ensures consistency and scalability. Iterating Major Screens: Next, I worked on iterating the app's significant screens, creating multiple design versions to give engineers flexibility. This approach allowed them to select the design best suited for efficient development while maintaining a high-quality user experience. Daily & Weekly Sync Meetings: To ensure smooth communication and effective development, I held daily syncs with software engineers and weekly meetings with engineers and the product manager. Review and Feedback: I conducted thorough reviews to ensure designs were implemented correctly and met UX goals. I provided detailed feedback and designed extra pages as needed.

Designing Split View for Larger Screens

One of the key challenges in adapting the Simplifi app for the iPad was effectively utilizing the larger screen real estate. On the phone version, users navigated between different states of the app, often switching between key screens. This experience needed to be reimagined for the iPad to enhance productivity and improve multitasking. Solution: Split View Layout To take full advantage of the iPad’s larger screen, I introduced a split view layout, which allows users to view and interact with two screens simultaneously. This design brought together two distinct states from the phone version, such as viewing an account summary while simultaneously exploring transaction details. Enhanced Productivity: Users could manage finances faster. Optimized Space Utilization: Full use of the iPad screen. Consistency Across Devices: Familiar elements maintained across phone + iPad. This approach aligned with user expectations of multitasking on iPads.

All Final Screens: