Onboarding patients UI

In the beginning of 2021, when Covid-19 was at it's highest peak, I was helping
Leadershiphealth.org with UI of onboarding patients process. The goal was to make it intuitive,
and help the users to finish 3-step process in order to get free Covid-19 monitoring kit.

*It is worth to note, that at this time I wasn't aware of UX - and this work purely represenets UI skills along with problem-solving.
However, at the end of this case study I written a few paragprahs on how I would approach this challenge differently with UX.

Date: 2021 

Tool: Adobe XD 

Type of project: Client work


Making sure that users start and finish the process of onboarding. Patients had to confirm data (pulled from registration form) and schedule a call in order to get the kit.


Simple 3-step process with a cues, that would show patients where they currently are in the journey, and that way motivate them to finish it. 

1. Patient onboarding screen after registration form

Patients at first sees the 3 step process, which they can start by clicking the button start setup.

Orange color indicates awaiting action.

* The last screen at the bottom (number 6) shows us changed states of step 1, 2 and 3 after completion of the process. This helps them to understand where they are currently in the onboarding process.

2. Start of the 3-step onboarding process

This is what patients see, once they start 3-step process in order to get the kit.

I used colors and different states in order to indicate, that they are on first step and two more are awaiting.

For the most part - majority of users will click "confirm" since the data (coverage and address) was always pulled from back end.

3. Continuation of the process - midway

After confirmation of the first step, you can see the change of multiple components.

For example - the first step turns into a checkmark and it unlocks the step two.

Another one is the top bar which got filled with color.

I believe from UX perspective this was a great way to motivate the user, and also show him what left is to be done.

4. Finishing - the last step

As you can see, this is the last step.

Once again. previous step turned into "completed state" and top bar fill color moved as well.

All the user has to do is to confirm.

5. Confirmed completion

After that, we congratulate to the user for completion and we confirm that the call was schedule on that specific date.

Also, here we provide more information about the kid.

The wording here is also important. We say "After the appointment, we'll ship you the kit..".

Meaning - it's important for patien to attend the appointment in order to get the kit.

6. Process completed - change of states on the first screen

As I mentioned about the first screen - orange indicates awaiting action, while green indicates completed action.

Now the user has to attend the call and he'll receive the kit.

Once the patient attends the call and receives Covid-19 monitoring kit, he'll be moved to the "onboarded patients" - a place where other family members are.

How would I approach the challenge now?

I think we did a great job. However, as a perfectionist, I believe I could do more UX research (which is absolutely critical). I am not an expert - and I feel like an impostor in the UX world, but I think I am starting to get a grip on things. Some techniques and methods might be better than other.. but here is what I would do:

1. First of all, I would try to gather as much information as I can about our primary users. This is crucial step in order to create user-centered design.

Why it's important?

Well.. if our primary users are older patients in 40-60 age, we have to understand that they might have certain disabilities. For example - if it's common for them to have problems with eyes and reading text - so we must use bigger fonts / and additionally implement some AT (assistive technology such as text-to-speech).

That will make our solution acessible - hence user-friendly. 

2. Another step would be to make a competitor analysis. Mainly in order to see what works for other big companies ,and maybe try to identify what are they doing great and also wrong.

3. Then, I would try to synthesize all gathered information during research phase and interpret it. We might determine here what we need in the steps & and what not. What is crucial - and what is just an necessary block in the user's journey.

4. I like doing user flows - so I would continue by doing that. This would help the team to decide on what information should be presented at what step.

5. Ideation phase - time to get dirty with pencil and paper! Just by puting a timer and sketching out ideas helps a lot! This is where you can get really creative, while having the user's problems & needs and company goals in mind.

6. Prototypes & testing - Over here, we could develop our first prototype and test it on our first users to see, how it is performing. We might find out that something is way too confusing and if so - then we need to get back to ideation phase and fix that. Same aplies for usability flaws.

We could repeat this process untill we find the perfect design that works really really well.

It's also important to keep in mind that testing is not finished once we launch. Quite the opposite. You need to keep an eye on the feedback and measure quantitative data from heatmaps, analytics and etc. and keep making adjustments and small tweaks. That's how some of the greatest products were made.

This project was amazing and I am very happy to be working with such a great people from MedStar Shah Medical Group! and Leadership Health!