Expanding Functionality within Bend Financial’s Health Savings Account Expense Tracker
In collaboration with Bend Financial, a Boston-based Health Savings Account company, I was challenged to understand their business goals and redesign their healthcare expense tracking system within their user-facing HSA Portal to allow users to take full advantage of the services Bend offers.
To address these issues, my team and I designed:
1. A revamped healthcare expenses tracking system with increased functionality and usability.
2. A progressive, educational onboarding system that leads first-time users through their HSA Portal and illustrates the benefits Bend offers.
My Role
I focused on the user research, interface design, and prototyping phases of this project, playing a prominent role in Research Synthesis, Interface Design and Iteration, and Prototype Creation.
Research
Drafted questions for user interviews
Conducted three of six user interviews
Facilitated three of four initial usability tests
Analyzed best-practices within expense tracking softwares
Identified our problem and solutions
Design
Participated in five rounds of Design Studio
Created high fidelity mockups utilizing atomic design and Bootstrap Vue
Iterated mockups in response to further usability testing
Created both initial and iterated prototypes
The Problem
User Problem: Bend HSA users need a better way to manage their healthcare expenses and learn about the benefits of their Bend Health Savings Account because the current portal lacks essential functionalities and can be confusing to use and understand.
The Solution
Our final prototype included:
A message of completion when a user finishes designates their expenses.
The ability to split an expense total into eligible and ineligible categories
The ability to override the AI categorization and always deem charges from specific vendors as either eligible or ineligible
Flexibility and error prevention through the ability to remove expenses from a category once they’ve been reviewed.
Revised and redefined taxonomy through the portal’s information architecture.
A progressive, educational onboarding system that walks a first-time user through the Bend Portal and illustrates how to use their HSA to its full potential.
Fig. 1: The AI-powered "Bend Advisor” reviews the user's linked credit card transactions and categorizes them into 'Very Likely', 'Potential' and 'Unlikely' health expenses. The user is notified of how many health expenses need review and has to designate each as 'Eligible' or 'Ineligible' for reimbursement. We included a notification when a user finishes sorting through expenses in any given category to give users a sense of completion.
Fig 2: Previously, users were unable to split a transaction into both “Eligible” and “Ineligible” categories. We designed an expense splitting function that allows users to maximize their reimbursements while staying in accordance of the law. Previously, it was all or nothing. Now users get the best of both worlds.
Fig. 3: We also included an “AI Override” option to save users time while sorting through their eligible and ineligible expenses. This feature allows a user to designate all current and future transactions from a non-healthcare vendor to always be “Ineligible,” so users won’t need to consistently sort through ineligible expenses.
To see all of our design, please visit our interactive prototype.
Research & Design Process
Research
User Interviews
We screened 12 potential participants to gauge their knowledge of Health Savings Accounts and whether they utilized an HSA. We selected six participants to interview.
Interview questions covered a wide range in topics, including: Understanding of HSA benefits, Current Expense Tracking Behaviors, Preferred Softwares for Expense Tracking, and our Users’ Expectations from an HSA Administrator.
Usability Testing
After concluding each interview, we conducted a usability test with each participant using the current Bend HSA Portal to illustrate pain-points and potential areas for improvement.
We tasked users to perform certain actions such as splitting an expense, deleting an expense, and reimbursing themselves. We also asked users to interpret the taxonomy of the portal to understand their perception of where/how specific functions could be performed.
Affinity Mapping
After concluding our interviews and the initial round of usability testing, we transcribed specific points onto sticky notes and created an Affinity Map to better illustrate commonly recurring trends, specific user pain-points , and areas of opportunity within our redesign.
Key Takeaways
We discovered that our users:
Are not completely familiar with all of the benefits of their HSA.
Experienced confusion with some of the terminology used on the portal, including “Eligible,” “Unreviewed,” and “Unreimbursed”.
Had difficulty performing certain functions, like splitting and deleting expenses.
Appreciated a sense of completion after dealing with their expenses.
Generally budget expenses on a regular basis.(i.e., weekly, monthly)
Wanted to see additional resources on how to use the product.
Business Analysis
Our Company
We spent hours navigating through the Bend HSA Portal to gain firsthand knowledge and become intensely familiar with the product and we spoke with Bend’s Director of Design to understand its positioning within the HSA marketplace.
From these applications, we created a SWOT analysis to depict our company’s strongest and weakest areas, in the process highlighting how a redesign might reshape these.
Our Competition
We were limited in conducting firsthand research into our competitors within the HSA market due to financial and insurance-related parameters.
We instead focused on researching expense tracking software mentioned in our interview phase, such as Mint and You Need A Budget, to understand best-practices within expense tracking and system onboarding.
Design
Design Studios
After identifying our user problem and solution, my team and I brainstormed the concept of our design by conducting five rounds of Design Studio, wherein we sketched out ideas and pitched our best ones. The Design Studio process created our initial wireframes, highlighted essential features, and illustrated user flows. The process also allowed our team to collaboratively establish our concept’s renewed visual design and hierarchy.
Real World Design Systems
To ensure that our redesigns would be usable to Bend’s developers, we were challenged to conform our revisions to Bend’s current design system, which utilizes Atomic Design theory and models its code from Bootstrap Vue.
Atomic Design
We were given access to Bend’s Design Library, which was constructed based on the principles of Atomic Design. Utilizing this library allowed me to redesign the Expense Tracker in a way that seamlessly fits into the overall design and visual styling of the Bend HSA portal.
Bootstrap Vue
When designing elements outside the scope of Bend’s Atomic Design Library, we conformed our designs to visual parameters established by Bootstrap Vue, the preferred code base for Bend’s development team.
Mock Ups & Mark Ups
Our team then diverged to begin creating high fidelity mockups for each step in our revised user flows. I focused on the “Needs Review” area within the expense tracker wherein a user has to review line item expenses categorized by the AI and deem each expense as “Eligible” or “Ineligible” for reimbursement. I also focused on the revised “Expense Splitting” feature and the “Override AI” feature. These series of actions constituted the bulk of the redesign.
This mockup illustrates the initial conception for the “Needs Review” layout and its “Expense Splitting” function.
After completing our mockups, our team converged and collectively revised each mockup. This process allowed us to select the best of our designs to incorporate into the final design and eliminate or change as needed.
Usability Testing
After unifying our designs, I built our initial prototype using Invison and we tested our redesign with four participants using the same prompts from the first round of testing. We found that our redesign made specific tasks like splitting an expense easier, but we uncovered some lingering issues related to:
Revising the portal’s “Needs Review" Information Architecture
Adding additional feedback to “Mark as Ineligible” process
Revising the portal’s “Needs Review" Information Architecture
Cleaning up spacing, buttons, and pop-up messages.
Design Iterations
V1
V2
To prevent confusion due to the portal’s Information Architecture and to avoid a “Tabs within tabs” issue, we inverted the tabs within the “Needs Review” workspace. We also revised the Success modal when a user finishes reviewing their expenses to provide an exit other than navigating to the “Eligible Expenses” tab.
V1
V2
As a means of error prevention, we introduced a feature wherein a user could remove an expense they may have accidentally deemed as “Eligible.” This process initially involved a user toggling on a “Mark as Ineligible” button, and then saving the window to delete the expense. We found that users would toggle on the button, and attempt to click it again to save, only for it to toggle off. We solved this issue by introducing a pop up modal wherein a user could “Yes, I’m Sure” to remove this expense from the Eligible Expenses workspace.
Conclusion
Personal Takeaways
Through the course of this project, I was given the opportunity to collaborate with a team on a live product for a real start-up in Boston. I was challenged to understand a business and industry that I previously did not know exist, and furthermore learn how to improve upon a live product to meet both business and user goals. Utilizing the real-world design systems of Atomic Design and Bootstrap Vue allowed me to consider and understand how to approach handing off design work to developers in a way that translated easily to ensure success. I also learned how to be creative and adaptable within a research capacity as we were not able to speak to actual Bend HSA users, given our role as consultants.
Next Steps
Considering animations to demonstrate where line-items go when marked as “eligible” or “ineligible.”
Conducting further Usability Testing with current Bend HSA users.
Clarifying and updating cards on the dashboard’s homepage in response to further usability testing.
Refining the onboarding procedure and adding additional resources relating to an HSA and the functionalities of the Bend portal to the “Resources” page.
Concept
Mobile App Design
Team of Three
Client Project
Tools
Sketch
Invision
Pen & Ink
Duration
Three Week Sprint