Taran.world

Taran.world

Taran.world

Taran.world

Works

Content

About

Easy visit Redesign

Note: This section is not optimized for Tablet and phones just yet. Its something under construction. 🚧

This is a UI and UX redesign of the existing app "Easy Visit". My goal was to review and audit any UI and UX issues the original app had, and revise them in the new design. The original app is certainly functional, but comes with a number of issues, that are discussed below.

Please note: this study and redesign is in no way intended to disrespect the original designers and developers of the app. This is solely my take on the redesign process, albeit, it does include objective audit and design principles.

A few quick issues to note right off the bat;

  • Button / Card UI shadows are too harsh.

  • Colours are too bright

  • Home page Menu button at the bottom is not responsive, and is underlapping the iOS Home Bar.

  • Visuals are outdated

  • Gaps between elements are inconsistent

This design is by no means complete, but its a step in the right direction. I used simpler black and white colours.

And having the bottom navigation bar provides user a visual indicator on what page they are, and gives them the option to user features explicitly.


Home Page

Before

After


Home Page

Before

After


Home Page

Before

After

Upon selecting the clinic in the "Near you" option, the user can view the clinic's profile to understand the services they offer. CTA buttons are labeled clearly, to be able to utilise messaging in-app or calling them to clarify any questions, before proceeding to make the booking.

Clinic Profile

Before

After

Upon selecting the clinic in the "Near you" option, the user can view the clinic's profile to understand the services they offer. CTA buttons are labeled clearly, to be able to utilise messaging in-app or calling them to clarify any questions, before proceeding to make the booking.

Clinic Profile

Before

After

Upon selecting the clinic in the "Near you" option, the user can view the clinic's profile to understand the services they offer. CTA buttons are labeled clearly, to be able to utilise messaging in-app or calling them to clarify any questions, before proceeding to make the booking.

Clinic Profile

Before

After

The same covid policy pop up has been used for the new design to keep the consistency, but with the "Proceed" response button at the bottom rather than above. This is a business-leaning decision to encourage the users to proceed rather than cancel.

Covid Policy Notification

Before

After

The same covid policy pop up has been used for the new design to keep the consistency, but with the "Proceed" response button at the bottom rather than above. This is a business-leaning decision to encourage the users to proceed rather than cancel.

Covid Policy Notification

Before

After

The same covid policy pop up has been used for the new design to keep the consistency, but with the "Proceed" response button at the bottom rather than above. This is a business-leaning decision to encourage the users to proceed rather than cancel.

Covid Policy Notification

Before

After

We then narrow down the doctor profiles that are available at the selected clinic.
The doctor profile card provides an overview of their areas of expertise using chip tags. The user can then look further into their profile for more of the doctor's background, or press "View availability" to proceed with the booking.

Doctors' Profiles

Before

After

We then narrow down the doctor profiles that are available at the selected clinic.
The doctor profile card provides an overview of their areas of expertise using chip tags. The user can then look further into their profile for more of the doctor's background, or press "View availability" to proceed with the booking.

Doctors' Profiles

Before

After

We then narrow down the doctor profiles that are available at the selected clinic.
The doctor profile card provides an overview of their areas of expertise using chip tags. The user can then look further into their profile for more of the doctor's background, or press "View availability" to proceed with the booking.

Doctors' Profiles

Before

After

The user is then presented with another pop up notification. This varies from doctor to doctor. It is merely to notify the user / patient to be aware of the pricing, in case they missed it before.
This also prevents from any confusion later on.

Notes for patients

Before

After

The user is then presented with another pop up notification. This varies from doctor to doctor. It is merely to notify the user / patient to be aware of the pricing, in case they missed it before.
This also prevents from any confusion later on.

Notes for patients

Before

After

The user is then presented with another pop up notification. This varies from doctor to doctor. It is merely to notify the user / patient to be aware of the pricing, in case they missed it before.
This also prevents from any confusion later on.

Notes for patients

Before

After

The first half section of the screen then represents the selected doctor, their specialities, the next available time of the doctor, and the clinic's location.

The bottom half is where the user interacts to select a date and time slot. By default, it selects the next available time, but users can also manually choose a date and time in the future.

The "Today" badge is used if the date is matched with the user's platform's date, to highlight that the date selected is today.

Select date and time

Before

After

The first half section of the screen then represents the selected doctor, their specialities, the next available time of the doctor, and the clinic's location.

The bottom half is where the user interacts to select a date and time slot. By default, it selects the next available time, but users can also manually choose a date and time in the future.

The "Today" badge is used if the date is matched with the user's platform's date, to highlight that the date selected is today.

Select date and time

Before

After

The first half section of the screen then represents the selected doctor, their specialities, the next available time of the doctor, and the clinic's location.

The bottom half is where the user interacts to select a date and time slot. By default, it selects the next available time, but users can also manually choose a date and time in the future.

The "Today" badge is used if the date is matched with the user's platform's date, to highlight that the date selected is today.

Select date and time

Before

After

The Confirm-before-you-book screen is missing in the original app, and something I figured would be extremely beneficial to the users, as its a great way to provide an overview before committing to the booking.

The user can also write a note for the doctor to get prepared for the booking.

The details card also shows the pricing so the user is not caught off guard and is aware of the appointment fee.

Confirmation screen

The Confirm-before-you-book screen is missing in the original app, and something I figured would be extremely beneficial to the users, as its a great way to provide an overview before committing to the booking.

The user can also write a note for the doctor to get prepared for the booking.

The details card also shows the pricing so the user is not caught off guard and is aware of the appointment fee.

Confirmation screen

The Confirm-before-you-book screen is missing in the original app, and something I figured would be extremely beneficial to the users, as its a great way to provide an overview before committing to the booking.

The user can also write a note for the doctor to get prepared for the booking.

The details card also shows the pricing so the user is not caught off guard and is aware of the appointment fee.

Confirmation screen

The final screen shows the user that the booking has been confirmed, with a green logo to visually verify it.

There's appointment information displayed again with specific details.

The two CTA buttons at the bottom let the user view the appointment in the Appointments tab, or take them back home.

Booking confirmed

Before

After

The final screen shows the user that the booking has been confirmed, with a green logo to visually verify it.

There's appointment information displayed again with specific details.

The two CTA buttons at the bottom let the user view the appointment in the Appointments tab, or take them back home.

Booking confirmed

Before

After

The final screen shows the user that the booking has been confirmed, with a green logo to visually verify it.

There's appointment information displayed again with specific details.

The two CTA buttons at the bottom let the user view the appointment in the Appointments tab, or take them back home.

Booking confirmed

Before

After

And that's the overview of the app's redesign!
There's a proper case study that I intend on doing to break down the elements further, but that'll come eventually.

Thank you for reading! 🙌🏼

Back to Home

Back to Home

Next Project

Next Project