The Context

Starting the summer of 2019, business management team made a decision to pivot Regi’s attention from increasing beauty treatment bookings to focusing on medical aesthetics treatments, which was giving me only a week of time to quickly come up with a design for marketing growth manager to acquire traffic to a new landing page, introducing Regi regarding how we can help book medical aesthetic treatments.

The goal is to:

  • Increase the awareness and engagement among users regarding the booking service for Medical Aesthetics treatments that Regi provides
  • Increase the booking requests for Medical Aesthetics consultations through Regi
  • Learn and understand the needs of users for booking medical aesthetics treatments

The Constraints

The constraints lie in:

  • Regi is backed by Allergan® . How to change the mindset of a company that is B2B at core to B2C.
  • How to balance between designing for the needs of users while in the meantime accommodating the requests from business to maintain relationships with Health Care Providers (Allergan's main customer base).
  • How to design the best experience within the limitation of legal compliance and most importantly, how to design responsibly.

Design Process

We followed Lean UX process in learning and iterating fast.

Ideate solutions and draft wireframe

As mentioned, this was a quick and hard pivot, and before this, almost all the user research or study were about understanding users’ behavior and needs on beauty regimen, so I barely understood the users and not mentioning that medical aesthetics was a complete new world to me.

I drafted some concept wireframes to conduct user study with.

In order to react quick, I decided to come up with some basic wireframes based on what I think would be most important things a user should know about Regi and about how to book if he/she is interested in medical aesthetics treatments. During the wireframing process, I invited a lot of feedback from business partners who have been with Allergan for a long time and thus they have a lot of insights regarding medical aesthetics industry in general.

Conduct 2 rounds of remote user study with 20 users

I then first used the wireframe to conduct a first round of user study using usertesting.com as the platform. Since for this project, I started blind with design, so I considered this user study not only to validate if goals were achieved including if users were able to understand what Regi can offer and if users were comfortable to book a treatment with Regi through this landing page, but also a chance for me to start to understand users’ needs and what would be some possible next design ideas. Based on the first round of user study, some minor design changes and content changes were made.

One of the major findings during this step was how users preferred to contact.

And I followed up with second round of user study with polished mockups to ensure that the landing page was good to launch. One of the major findings during this step was how users preferred to contact. Though Regi is a text-first booking platform, for users who were first to Regi, a more casual contact method was preferred. And considering that we would love to launch fast and learn quick, instead of taking extra effort and time to revamp our system in order to let guest users get in contact with us through texting while in the meantime, it might not achieve as much traffic as introducing a chat function on our landing page, we made a design decision to introduce Chat as the main communication channel for this landing page.

Redesign Health Care Provider Profiles

Why starting with Health Care Provider Profiles? Regi at its core is a booking platform, so health care provider profiles are the place where users will make their decision to book. And from user study, being able to see what providers are on our platform was one of the key factors to make users comfortable booking with us. It also seems that most users are dropping out from this step. Plus, if we were to redesign the search results page for medical aesthetics treatments, data of each doctor needs to be fetched from each doctor profile.

I conducted a card sorting exercise with users to understand what they value in finding a health care provider.

I first conducted a card-sorting exercise with 30 users to understand what are the factors they care about if they are to book a consultation with a new health care provider. And then based on the results and the transcripts, I made some wireframes and kicked off 2 design workshops, one with business team to make the team align on scope and one with engineering team to understand the level of effort.

I kicked off 2 design workshops to align team scope and project goal.

From there, I started to conduct user testing on the new doctor profiles and iterated design based on the findings. Then I worked with engineering team to build the new MVP profiles, and the admin tools for account managers.

How did the profile design evolve.

Track the performance of the landing page

I combined CrazyEgg, Heap and Usertesting.com to conduct user research.

Combining qualitative user study after pivoting, questions we got through live chat and quantitative data that coming from the new landing page, it turned out that we are acutlly attracting large amount of users who are in upper funnel of their MA journey, meaning they are still exploring and learning about new treatments instead of considering finding a new provider. A user journey started to become clear.

I drafted a user joureny of medical aesthetic booking for Regi.

But where should we start?

With only one designer and a small development team, priority was needed. Based on the findings, I ranked the importance of each step through the user journey and created a design roadmap to get teams on board.

The design roadmap I created to align team scope and track work status.

Design the treatment guide

While account managers were collecting new information from our health care providers, I started to look into how can we design treatment guides for users who just start this medical aesthetics journey and need more information to understand the treatments before they are to book a treatment. At this point, we have launched LiveChat for a while, so I went through the transcripts to see what kind of questions they were asking and what they were interested in.

Affirmity map helped me to understand the gap between users' needs and Regi's offerings.

I then made a quick design to conduct user study. I iterated design based on the findings and finalized the design.However, one thing I learnt from this was that I should involve legal feedback earlier in the process. After I finalized the design and submitted for legal review, I was learnt there were certain limitations that we were not able to do. If I were to know earlier, I would be able to react quickly and make some different design ideas to alternative solutions in the treatment guide instead of just taking certain part off.

Treatment guide final design.

Redesign the search results page

To get inspiration, I did a landscape audit of websites that is within the same industry with Regi such as ZocDoc and Realself as well as other booking websites such as Airbnb.

I put together a general user persona to guide design based on all the learnings we have gathered so far.

I also went to doctor's offices and talked to office managers to understand if they are comfortable to be listed with other doctors' office on the same page, what they are willing to share or not, and what are some successful methods they have seen to make users comfortable to book with them.

Then I drafted some sketches and started to talk to users. After 3 rounds of user study with design iterations, I finalized the design. Some of the key iterations are as follows.

Learning vs. Exploring

In the beginning, I put some icons on the top for users to switch between learning and finding providers. Though users loved the icons, but from observation, I decided to remove them, based on the following considerations. Firstly, it was distracting users from exploring doctor profiles and made the filter hard to find. -- some users even thought the icons would servce as filters instead of taking them to a learning page. Secondly, when users are on this page, learning is not in their mindset, and they are more in the flow of finding and booking an appointment, so placing the learning icons on the very top was actually in the way preventing users to get what they want instead of helping them. Educating on treatments feels more natural in the earlier user journey.

Objective tags to help users differentiate providers and provide helpful filters.

Reviews and pricing are not allowed on Regi because of certain policy and limitations, these tags have received positive signs during user studies that can provide value for users to differentiate as well as to find the healthcare providers to their preference. Also, when tested the design with consultation fee listed, users would only pick an HCP based on the fee, which was not the ideal creteria when finding a quality provider.

Accommodate the needs for users of different knowledge level in medical aesthetic treatments.

Introduce a tout to help users who don’t know how to pick a provider. For users who have never had a medical aesthetics treatments before, it was quite overwhelming for them to see all the unfamiliar terms and not able to understand what is right for them. So a place where they can get help to book a provider for themselves might be valuable to them (we have seen an increase of 2.41% booking reqeusts since this tout and following experience was launched). In the meantime, a robost filter system can help users who are knowledgable to find the providers they are looking for.

The Outcome

We were able to react and pivot fast within 5 months. We were able to release and iterate in each Sprint. And since July,

  • We saw an increase of 2.41% booking requests since July.
  • We saw an increase of 2.32% engagement through chat and was able to get tons of knowledge from the users.
We were also planning to build new experiences based upon all the learnings we gathered.

An example is a converstational onboarding flow.