Background
HealthEquity is the nation's largest provider of health savings and other types of reimbursement accounts. This nexus of healthcare and finance posed significant challenges with mobile access.
Since the HealthEquity mobile development team was going to be migrating the company's flagship app to a new code base, it was a perfect opportunity to also update the design. The app had been designed by marketing and needed a more user-focused approach. I was tasked to redesign it from the ground up.
Process
Discovery
The first person I tapped to help with the discovery phase was the Product Owner of the mobile development team, who had significant experience in the mobile space. He had a wealth of knowledge about how users like to navigate a portable device and would prove to be a valuable resource as we developed personas specific to our mobile users and mapped their experiences.
The second person we collaborated with was a customer service manager whom I knew had fielded a number of support issues relating to the mobile app and could speak to the members' pain points and motivations.
Meeting with these and other key stakeholders while reviewing user feedback yielded several key insights:
- Over 80% of members simply wanted to check their account balance on the go without having to place a phone call or hunt down a desktop computer.
- After balances, members had three standout reasons to open the app:
- Pay a healthcare provider
- Request reimbursemnet for on out-of-pocket payment
- Upload a photo of a receipt or other documentation
Ideation
Most of our team's journeys begin at the whiteboard. Over several days I mapped and re-mapped the architecture of the app, bringing in people from across the company to both ease and solidify the app's user flow.
I put several sketches on paper or in Sketch to address the key insights head on. We wanted to put the members' account balance information immediately in view on opening the app, and then show the members a menu of quick actions to accomplish the other high-frequency tasks.
Early sketches of dashboard and widget concepts
A few of the lower-resolution wireframes were tested on internal teammates and members which helped us improve the language and user flow.
High-Resolution Mockups
After several weeks of iterations and consultations with marketing to ensure brand adherence, a final design was built in Sketch and presented for buy-in from stakeholders.
Early experiments with the login, dashboard, and expense pages
Testing
To test the app, I developed the design artboards into an interactive prototype and tested with a variety of users across different age groups, comfort levels using mobile devices, and familiarity with HSAs to make sure that we had a better, more representative cross-section of our user base. This test helped us make important adjusments to the user flow.
Challenges and Lessons Learned
Though our members and stakeholders were happy with the outcome, we hit several unexpected bumps along the way that required us to rapidly pivot some of the designs. As our mobile development team were learning an entirely new coding structure and platform, they were unable to incorporate some of the visual elements of the app designs without derailing the launch date.
In addition, dealing with a platform with all the complexities of health care meant that occasional edge cases would be discovered, making it necessary to rapidly adjust designs on the fly in response to launch timelines.
In the end we launched a product that the whole company could be proud of. We began to receive feedback almost immediately that our members were much happer with the new app.