usability hub


Olive is a health and wellness Webapp created as part of my UX design course for CareerFoundry. Hospitals, pharmacies, and physicians have most health apps but offer only some of the tools and features users want and need. After competitor research and user interviews, I saw what was missing. This is how Olive came to life, and all in one platform.




Through a competitor analysis and user research, I saw that most apps or websites out there need to be completed. Some offer good record saving,  appointment systems, or communication but not one could offer all in one.


I created a Web app with the main focus on the users' needs, and I proudly generate this statement.

Problem statement

Our users need a way to connect with doctors in their network quickly and efficiently.  They wish to have a map or location where they can go based on their insurance network and a way to contact the doctors in the network without having to go to different sites.

We will know this to be true when we see how many elders and non-tech people use our web app to find doctors within seconds and chat with their doctors without having to go for a non-emergency visit.

user experience design

Design Process

User Interviews

Looking at what competitors had was an excellent way to get a clear picture of the idea in this field. The user interviews opened my eyes to what the users want, and as a UX designer, I value that more. I interviewed five people from different parts of the world with diverse backgrounds and internet skills. I got great insights from this, such as:  

- Having all their records in one place.  
- Have an easy and fast way to contact Doctors, Providers, and Physicians, such as Tele-med or live chat.
- Want a web app that is easy and friendly.  
- An easy and fast way to make appointments with physicians in their network and area.  
- Clear links and maps to find doctors and calendars for appointments.

User Personas

As one of the most essential steps in this project, user personas allowed me to get into the mind of two different people with different needs. This focus on the spectrum of the users provides me with the clarity to sketch some flows and design ideas.

User Flows

With those user personas in mind, I designed their flow through the web app. I wanted to make an easy and fast way for them to complete a task successfully.

Site Map

To start my design, I needed first to see how my users would organize and categorize the main items that my WebApp would have. I provided them with a card sort with categories already created for them and an open category they could add if needed.


With my HTML knowledge, I wanted to create something that would be possible to build. Although it was a challenge as I was making a Web app, I needed to ensure that the responsiveness was adequate. I had a lot of fun in this step of the process. I had so many ideas from the user interviews, and watching the flow come to life was a great feeling.

Mobile Design first

From paper sketches to high fidelity

I started with the mobile design first and continued with the desktop design. Scribbling in paper and finally made a high-fidelity version in Figma.

Mobile version

(Find Care)

Desktop version

(Find Care)

Usability Testing

To ensure all the thoughts I put into the wireframes were correct and aligned with the users. I created a mid-fidelity prototype and had some users test it. Three users tested my mobile version and three on my desktop version. After the testing, some flows needed to be modified. Then I gathered all the comments and insights into a rainbow spreadsheet and categorized them according to Jakob Nielsen’s four-step rating scale.

The Iteration Begins

Using the data from the usability testing, I redesigned, modified, and added to my low fidelity. Then I started to develop my first mid-fidelity prototype. I tested this mid-fidelity, and these were some insights from the testing. Here, I start looking into color feelings, sizing, and hierarchy.

Change #1

Now able to find the Video Call option

Users had a major issue trying to find the video call option. Users suggested having an icon on the communications screen to help them find it. 

I also incorporated the floating button with the video call into it, which will help the user find it faster.

Change #2

Confusing colors

When testing, all the users had an issue with the red color for the unavailable dates. Some thought those were days they had already booked. Then others thought those were the only available dates. All users had a feeling of danger or warning. Changing the color scheme and adding a legend will help the users understand more clearly.


- Changes in the menu location.
- In the v5 version, I added the current appointment button.

Appointments (calendar)

- Eliminate doctors to make the screen less cluttered.
- Added them to another screen.
- Modification of the colors in V5.
- Implementation of material design.

Nav Bar Opened

- Changes in the nav menu opening.
- Made it full screen in V2.
- In V5, instead of dropping down to a full screen, I decided to bring it from the side as it will be in the desktop side menu.

Find Care (List)

- Made the physicians' options full-screen.
- In V5, I reduced the size of the physicians' pictures.
- Changed the info button to the well-known info icon.

Style guide

Having a style guide is crucial to have developers build my design quickly and fluently and avoid delays. Here developers can see how the app should look and what to do and not do.

Peer Review

Once the screens were ready, I shared my prototype with six UX/UI designers. They contributed 22 points of feedback in total. The feedback was a mix between user design and interaction design.

All the feedback was highly appreciated. I made changes accordingly to the input I agreed on and didn't change the ones I didn't agree with. Some of the feedback I received, which I disagreed with, was that the person giving the feedback couldn't see the prototype running correctly.

After altering those points mentioned in the feedback, I saw how the screens came together better.

Small Buttons

Peers pointed out that the CTA buttons in the doctors' portal were too small and hard to read. I resized them and increased the font size.

Before Peer Review

(Doctors portal)

After Peer Review

(Doctors portal)

3rd Sweet Eye Spot

One of the feedbacks received was that the overlay needed to be more in their eye capture.  I relocated it in the 3rd sweet eye spot and added more background so it stands out more.

Before Peer Review

(Appointment Success)

After Peer Review

(Appointment Success)

Is it Centered?

A common issue I encountered with this project was my alignment. My peers mentioned on some of my screens that my alignment needed to be more accurate. My mentor showed me how to make sure my items are always aligned.

Before Peer Review

(Appointment Calendar)

After Peer Review

(Appointment Calendar)

final screens

Onboarding / Sign Up

find care (navigation system)

video call (premium)

Appoinment system


take aways

As my first project, this case study taught me great things. One of the biggest ones is that not all I think of is what users want or need. I learned how to cope with the feedback and took it as a growth moment, not a direct attack on me or my designs. I also gained more patience and collaboration. ​​​​​​​

Thanks for stopping by

Let's work together

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

More Work