The Challenge

Truepill were building bespoke healthcare solutions for a variety of clients. Each solution was a custom build and therefore very costly and time-consuming. How might we develop a white-label solution that enables us to deliver our products faster and more cost effectively?

Company

Truepill

My Role

Lead designer

Services

UXR
UX Design
Visual Design
Usability testing

📍Creating a white-label MVP

We'd partnered with a company that needed to deliver a solution to provide COVID test kits and telehealth consultations, utilising our APIs. As with most start-up environments, there's always pressure from above to deliver things quickly, and even more so due to the serious nature of the Coronavirus.

As such, I had little to no time to conduct any usability testing. I pushed back on this as much as possible, but due to a HiPPO decision we couldn't fit any into the plan, and we had to ship something in 12 weeks.

As I knew this project would be the basis of our white-label experience, I worked closely with our UXR team to try and distill the importance of usability testing and validation early on in the design process. We managed to fit some post MVP testing into the pipeline, so we could adopt a test and learn approach from there.

🗺 Patient journey mapping

Since we had built very similar experiences in the past, I had a strong foundation to start from. I started by reviewing each experience and mapping out the patient journeys to identify any crossovers or areas of opportunity. 

⚙️ Design System for rapid prototyping

Fortunately, I had our design system (Capsule) to work with. It's a very comprehensive set of components, tried and tested on other Truepill products, with clear documentation. This allowed me to quickly jump into the ideation phase and start creating some initial prototypes to test internally.

Whilst designing these screens, I worked collaboratively with a content designer on the copy. We usually worked on these at the same time, however sometimes this wasn't possible due to time zone differences. To make it easier, I created all the screens using Auto-Layout, which made sure when any copy was changed, the spacing remained consistent.

📃 Documentation

The plan was to continuously iterate on the build, with different contributing designers and engineers. This build would be used as the platform for future clients, so I felt it was important to write some clear documentation.

Since we already had component level documentation, I focused on the page templates and screens, and wrote included;

• The purpose and behaviors of the screen 
  
• Components used on the page, linked to design system
• Change log
• Research insights
• Test ideas

After writing the documentation, I presented it to the wider team and explained how it should be used.

🎯 Delivering the MVP in 12 weeks

Our original deadline was 12 weeks to design, build and launch the site. We actually achieved this just one week over the deadline. Here are a few things that I did to help the process;

📱 Conducted internal usability tests to validate design decisions on key areas of the journey

🎨 Led the end to end design process, from conceptual work and usability testing to final UI designs

🤝 Collaborated closely with the other leads in our squad to quickly address issues or set backs

🤔 Worked with the UXR to plan some post-mvp usability testing to iterate on what we'd built

Post-MVP Iteration

Building and improving on the foundations

I use quantitative data to identify areas of our product which could be improved. I then combine this with qualitative research methods, to understand why these areas need improving. After evaluating both, I work with the product manager to prioritise features and improvements.

📊 1. Data driven insights - quantitative research

At Truepill, we use Mixpanel for product analytics and I work closely with our data team to identify any areas in our product that need improvement. I worked with the Product Manager to understand which areas of the journey weren't performing as we'd like, and we looked at things like bounce rate on key pages and conversion rate in the checkout.

Together, we identified that the main focus area should be the checkout. We knew a lot of people were reaching this stage, however a lot of people were abandoning the checkout.

🤔 2. Usability testing to understand 'why'

Now that we had identified two key areas of opportunity, I worked closely with the UXR team to conduct some usability testing. We wanted to evaluate the product to;

• Understand why users were dropping off at certain screens
• Evaluate baseline usability of the product
• Validate new features that were being worked on
• Identify new opportunities

Because of the complexity of the journey, we decided that moderarted testing would be best. Our Lead Researcher would conduct the testing, whilst I observed, analysed and documented notes.

Key observations

Summary

To summarise our findings; All users we spoke to were confused in some way about the checkout. Most weren't expecting to see it and all 6 participants didn't really understand what they were paying for.

HMW
Increase checkout conversion

After gathering both qualitative and quantitative data on the checkout, I had some great insight into what wasn't working, and what needed to be changed. I set out exploring some ideas on how we could improve the experience for our patients, and increase conversion.

Setting expectation pre-checkout

All participants said they weren't expecting to see a checkout. I added in a screen before the checkout to let the patients know exactly where they are in the journey, and inform them of the next steps

Expanded cart by default

On the old checkout, the cart as hidden at the top of the screen. Usability testing showed us people didn't interact with it, and they didn't understand what they were paying for. I re-designed this so it was shown by default, and worked with a content designer to provide much more informative copy

Consistent field validation

Usability testing showed us that some form fields didn't have the correct validation. Users were entering correct information, but getting errors and unable to checkout. I worked with the engineers to correct this, whilst also adding in error feedback below the fields.

Tell the users what happens next

"What happens if I click on pay, what am I paying for?" Some users weren't confident in paying because they didn't know what happened next. To help improve their confidence, I Improved the order review section by including a step by step guide on what happens once you've paid.

Simple and effective copy changes

I worked with our content designer to update the copy throughout the checkout. We wanted it to be more transparent and informative, to completely remove any confusion.

Optimise all checkout steps for browser autofill

Usability research by Google indicates that form completion time can be reduced by 30% on average when users are able to rely on browser autofill to prefill. However, it's it’s crucial that the information is correctly filled and matches user expectations.

🚶🏻‍♂️Next Steps

The next step is to implement our ideas, measure their success, and learn from it. We’ll then look at other areas of the experience that need work, prioritising work accordingly. 

As I mentioned earlier, 99% of our partners follow the same structure and functionality as they leverage our Telehealth, Diagnostics and Pharmacy APIs. The plan is to use this project going forward as our ‘white-label’ experience and a source of truth. It’s been built in a way that it can be re-themed with minimal effort, meaning for future partners, we can reduce build time and cost significantly.

My role is to continuously improve our white-label experience, using an iterative process. I will continue working closely alongside the UXR team, combining patient insights with quantitative data to ensure we’re providing our patients with an outstanding experience.