Bend HSA Portal Redesign
How can we increase the ease of use and functionality of the health expense tracker, to allow users to utilize their HSA to its full potential?
THE PROBLEM
In collaboration with Bend Financial, I was challenged with understanding their business goals and current user pain points relating to onboarding and healthcare expense tracking within the Bend portal. Current user pain points reveal that users need a better way to learn about and manage their Health Savings Account expenses in order to utilize their HSA to its full potential.
On a team with 2 other designers we used recognizable design patterns to improve functionality and usability of the product, while ensuring that users understood the full benefits offered by Bend.
My Role
User Research
Product Research
Sketching
Wireframing
Prototyping
Tools
Sketch
Atomic Design
Invision
Paper and pen
Duration
3 week sprint
OUR PROCESS
Bend is a Boston based start-up at the center of healthcare and fintech. Bend aims to remove barriers and empower users to save and invest while managing healthcare expenses through their responsive HSA Portal. The Bend Portal uses advanced artificial intelligence technology to help optimize tax benefits and health spending.
RESEARCH
UNDERSTANDING THE USER
User Interviews
Our initial steps were to gather an understanding of users who have a health savings account, and how they interact with it. Through user interviews, we asked our users several questions to gain insight.
UNDERSTANDING THE PRODUCT
Initial Usability Testing
Through initial usability test, we gathered insights on how users interact with the current Bend portal. These insights will help determine the factors that need more attention for redesign.
AFFINITY MAPPING
Key User Insights
- Users are not completely familiar with all of the benefits of their HSA.
- Users were confused with some of the terminology used on the site, including “Unreviewed” and “Unreimbursed”.
- Users had difficulty splitting and deleting expenses.
- Users generally budget expenses on a regular basis.
(i.e., weekly, monthly)
- Users wanted to see additional resources on how to use the product.
- Users did not want the portal to be busy with distracting elements.
PERSONAS
Behavior
-Makes regular contributions to HSA out of payroll
-Uses HSA to invest money and regularly checks investments
-Has infrequent doctors’ appointments
-Is organized and regularly tracks finances
-Enrolled in a high deductible insurance plan
Goals
-Wants to maximize saving opportunity
-Is utilizing HSA to full potential by keeping track of health expenses
Behavior
-Has infrequent doctors’ appointments
-Enrolled in a high deductible insurance plan
-Does not regularly track finances
-Makes HSA contributions only occasionally prior to expected
health expenses
-Does not check HSA regularly
Goals
-Needs assistance in managing health expenses
-Has minimal understanding and open to learning more about the benefits of an HSA
COMPETITIVE ANALYSIS
Challenges and Solutions
We faced a challenge in conducting competitive analysis on competing health savings account applications because we were unable to create accounts and log into without a high deductible health insurance plan.
As a solution we studied design patterns for simple task in applications like Google Mail. We worked around the lack of access to finance applications by watching YouTube demos where we pulled best practices relating to health expense tracking and onboarding.
Findings
- Users want a clearer understanding of the functionalities of the Portal
- Users want to be able to easily categorize and update expenses
- Users want a clean, aesthetic, learnable, and functional portal
SWOT ANALYSIS
CURRENT INTERFACE
Define and Ideate
In addition to the issues found while conducting usability tests on the current interface, we familiarized ourselves with the product and conducted our own assessment of the portal as well. Associating our findings from our initial research and our heuristic evaluation, we compounded key focuses for the redesign.
Element Focuses
- Add onboarding features to clarify functionalities of the Portal
- Redefine the taxonomy of the health expense tracker and revise information architecture
- Update the edit functionalities in the health expense tracker
- Include clear feedback and error prevention messages
IDEATION
Sketching
We conducted a design studio where we picked a section to redesign and set up a clock to 10-15 minutes in order to create design choices and then make decisions on the different options.
ATOMIC DESIGN
We were given access to Bend’s design library, which was constructed based on the principles of Atomic Design. This system allowed me to redesign Bend's interface with building blocks
i.e. atoms, molecules and organisms.
ITERATIONS
Marking Up Wireframes
After working individually on our wireframes, we all sat together, compiled our designs, and marked up the ideas we liked and wanted to incorporate in the master. We also determined ideas to just throw out and things to explore more with sketches/wireframes.
DESIGN SYSTEM
Key Insights
- Removing the pill tabs, considering taxonomy, and exploring how to rename the sections
- A success screen that would let you know that you’ve reviewed all of the expenses
- Wary of the repetition and making sure that it is necessary and doesn't pose as a distraction
- We considered a shopping cart feature that later ended up getting dropped in order to remove any unnecessary steps
TESTING AND ITERATIONS
Usability Test, Round 2
After redesign of key expense tracking and onboarding items, we conducted a second round of usability testing.
Our iterations focused on:
Element Focuses
- Updating terminology for clarification purposes
- Adding additional feedback to “Mark as Ineligible” process
- Cleaning up spacing, buttons, and pop-up messages
BEFORE
AFTER
We decided to switch the placement of the tabs because the proximity of the higher navigation tabs caused confusion. For the success screen, we added a way to exit the screen because users were pigeon holed into only continuing onto the 'Eligible Expenses' section.
BEFORE
AFTER
When marking an expense as ineligible in the edit function, originally the color of the button would inverse to indicate the button was 'on'. This caused confusion because the button now looked like the 'save' button. To resolve this we added a pop up module that provides users with feedback on their action of marking an expense as ineligible.
IDEAL STATE FLOWS
Expenses That Need Review
Expenses Marked Eligible
INTERACTIONS
Solution Prototype
We designed an onboarding system for Bend that includes a tour of tool tips. For each new action the user comes across, the user will be notified on how to use it with the option of skipping the tour. Our redesign demos a few scenarios a user may come across while using the Health Expense Tracker.
Onboarding
Bend's artificial intelligence the 'Bend Advisor' will help give users a clear understanding of the portal. When users arrive onto a page for the first time, users will be prompted on the key functions for that particular page.
Needs Review-Very Likely Expenses
The Bend Advisor reviews the user's transactions and categorizes them into 'Very Likely', 'Potential' and 'Unlikely' health expenses. On each login, the user is notified of how many health expenses to review and has to mark each as 'Eligible' or 'Ineligible' for reimbursement.
Splitting a Transaction that includes a Health Expense
Expenses that have the potential to be a healthcare expense, are populated in the 'Potential' section.
The user is able to edit the expense, split the eligible amount, add a receipt, and mark it eligible for reimbursement.
Designating a Non-healthcare Transaction as Always Ineligible
Expenses that are unlikely to be a healthcare expense, are populated in the 'Unlikely' section.
If there is a recurring expense that will never be marked an eligible healthcare expense, the user is able to edit the expense and designate it as ineligible. This way it will no longer populate in 'Needs Review'.
Removing an Expense Marked as Eligible for Reimbursement
Mistakes will happen and users need a way to undo any actions that they have taken. In this case, an expense was marked as eligible but it is in-fact ineligible and needs to be removed. The user can edit the transaction and in 2 steps remove the transaction from the 'Expenses ready for reimbursement' list.
When the user is ready to be reimbursed, they are able to select specific transactions and designate which account the money will go to using the drop-down menu. Once the action is complete, the user receives a confirmation screen.
Selecting Expenses for Reimbursement
REFLECTION
Next Steps
During this project, I had the opportunity to collaborate with a team on a live product for a start-up. I learned the process of working within features that have already been launched. The designer to developer handoff also became a point of interest as we worked within the same framework as the developers to make sure the end product translated easily. Working in a consultant perimeter we had to overcome constraints that did not allow us to explore more options with user research. Below are the additional steps we would take to address this redesign with Bend Financial:
Next Steps
- Animations to demonstrate where line-items go when marked as “eligible” or “ineligible”
- Usability Testing with current Bend HSA users
- Further interviews and testing relating
to onboarding
- Clarifying and updating cards on
the dashboard
- Adding additional resources relating to an
HSA and the functionalities of the Bend portal to the “Resources” page
Next Project— 'NetCliques' Mobile Feature for Netflix