Experience Design & Experimentation

How tried and true UX design skills alleviated a customer pain point and brought a new experience to life.

 

TL;DR:

  • There was no way to make a health care expense payment or reimbursement, from start to finish, within the Benefits Portal.

  • I partnered with product, UX, and development partners to design an end-to-end transaction.

  • I created flow diagrams, wireframes and detailed designs that were A/B tested.

  • We solved a huge customer pain point and laid the foundation for the Benefits Portal to become a one stop shop for managing health care expenses.

Role

Lead UX Designer

Key skills

A/B Testings \ Diagramming \ UX design \ Wireframing

A laptop and smartphone showing the confirmation screen of a payment.
 

Opportunity

Experience Gaps Aren’t Cute

There was no way to make a health care expense payment or reimbursement, from start to finish, within the Benefits Portal. We relied on third-party solutions or functionality that only existed on a different platform—both options required the user to navigate away from the Benefits Portal, with no easy way to get back to where they started.

The ask: ]create a streamlined, responsive* experience that allowed users to complete a transaction using a health savings or reimbursement account, utilizing existing technology and the current design system.


*A native mobile experience was built concurrently, in which I provided oversight to ensure consistency across channels

 

Process

Constraints are your frenemy

I began by understanding the existing bill payment functionality and any technical constraints that limited design options. At the time, the bill payment tool required payees to be tied to specific payment accounts, rather than to a user. This limited our ability to pay a person or company from multiple accounts unless a user manually added them to each payment account. This constraint ultimately dictated the order of user steps.

 

Got in the flow

I spent several design sessions with product, UX, and development partners reviewing flow diagrams and high-level wireframes to ensure the proposed user experience worked within our technical constraints, met product expectations, and scaled across web and mobile channels.

Two flow diagrams depicting user experience flow options

Flow diagram options

A flow diagram with wireframe images of a payment flow

Wireframe flow diagram

 

Left to right? Or up and down??

Once I had a high-level of confidence that the structure of the transaction was agreed on, I moved into detail design and pre-market A/B user testing of navigation direction and UI affordance.

Results: While there was no statistical performance differences between a transactional experience that navigated through steps from left to right or top to bottom, there was a clear preference from users to navigate from left to right, similar to TurboTax.

 

What if the design system component isn’t the best fit???

Once I had a high-level of confidence that the structure of the transaction was agreed on, I moved into detail design and pre-market A/B user testing of navigation direction and UI affordance.

An affordance for navigating a form already existed in the design system, but we hypothesized that more modern mobile interactions would translate to web and perform better.

Results: Mixed—in some cases, the new controls performed better, but in others, the traditional buttons outperformed. User did not prefer one treatment over the other (except they preferred the close “X” icon), so we stuck with the design system component and added the close icon in the top right.

Design system philosphy

Use what you have within the design system until it breaks or something proves better.

 

Now, is it usable????

Lastly, our research partner conducted a usability test on the entirety of the transaction.

Result: All participants were able to complete the task successfully and rated positively on all concept validation metrics. Participants also reported the flow was faster than they expected and they loved the simplicity and ease.

 

Design-Final-ReallyFinal.png

 

Results

Customers are now able to stay within the Benefits Portal, avoiding navigation and product confusion, to complete the transaction.

This MVP experience laid the foundation for managing health care expenses from one place—one step closer to making the Benefits Portal a one stop shop for health care.