iOS & Android UI Design2015 - 2017
HelloWallet is a personal finance product designed to help Americans reach their financial goals. Featured here are a collection of projects I worked on with my team while leading UI design for our iOS and Android apps.
In addition to these projects, I also led efforts to bring our apps in line with their respective platform standards by upgrading to standard typography, relying more on native controls for better accessibility, working with our Android engineer to convert our Android app to Material design, and creating reusable components for faster app development.
Visualizing your progress is key when working towards a budgeted goal. We went through several tests and iterations of our budget graphs before landing on a version that focuses on how much budget you have left and how much time you have left. We used our expanded color palette to celebrate when users met their budget goals and warn them when they went over.
Upon release, we were the only personal finance application to allow budgeting during a custom time frame. This allowed us to meet the need of a lot of our users who were part-time workers, lived paycheck to paycheck, or had variable income.
Navigation & Dashboard2017
Prior to 2016, HelloWallet had relied on a main navigation for our mobile apps that was hidden behind a toggle to house new features that the team would release. This led to a bloated menu that was always an extra tap away. As a result, engagement with features further down the navigation list dropped off significantly. We decided to move towards Apple's recommended tab-based navigation as a way to increase efficiency for our users by increasing interaction speed through clear, more relevant content hierarchy.
My team performed a mix of card sorting exercises, tree testing, and qualitative user research around navigation concepts and wireframes to help us get data on what naming conventions were most intuitive and what features we needed to highlight as main navigation items versus surfacing elsewhere.
We ended up cutting our main navigation in half and redesigning our dashboard in the process. This forced us to focus on what features really mattered the most to our users and think through how we could still provide visibility into those we de-prioritized. I worked with our entire team throughout this process to help us converge on the best solution for navigation and content hierarchy and was responsible for all of the UI design including the icons in the Bottom Bar.
Android Dashboard Cards
iOS Dashboard Tiles
As a result of our navigation changes, users were 15% more likely to reengage with our app within the first week of use compared to those using the old navigation. Discovery of our four core features evened out (instead of being lopsided towards those items previous at the top of the old navigation list), and Insights (which were highly correlated with long-term active users) went from being the second lowest viewed feature to the fourth highest.
When Apple released 3D Touch in 2016, we realized the power of providing users with up-to-date financial information without them having to dive into the app every time. I led a small product squad (comprising of UX, data, development, and QA specialists) over the course of a week to analyze common user actions, prioritize those actions, and design out the 3D Touch experience for our users on iOS.
Maintaining a user's sense of privacy is important, especially when dealing with financial information, so we included advanced settings to show or hide potentially sensitive information in the 3D Touch options.