HealthSync : UI/UX Design Process

Introduction

Hi myself Tanishq Mehta , a BTech 3rd year student. I did this project during my summer internship , here I learnt about ux research , wireframing , style guidelines and figma high fidelity designs.

Overview

Everything thing being digital in today’s era , healthcare also become digital, booking appointments , tracking health , navigating to different reports becomes complex and difficult to use.

So to solve this problems, I designed HealthSync application that focus on making healthcare services easy to understand , navigate and use by anyone. This blog will help you to understand by process of designing the UI of HealthSync.

What is UI and UX ?

User Interface(UI) : UI means how the interface will look like and how user will interact to it. It focuses on visual aspect of product that includes colors , typography , buttons , spacing and layout. In this project I have maintained a similar layout , spacing and color palette to make the UI of app consistent.

User Experience(UX) : UX means how user will experience while using the app. It focuses on the experience of user while they are on the app and also ensures that product is easy to use , navigate and user can achieve their goals with lesser efforts.In this project I have maintained a consistent user flow and navigation which allow user to achieve their goal with lesser efforts.

Problems

Many systems today create confusion for users as they offer many services at once, such as complicated appointment booking , complicated onboarding processes, confusing navigation , time-consuming appointment booking and difficulty accessing healthcare information.

Goals

The design focuses on creating a simple and user-friendly healthcare experience by enabling users to register and verify their accounts quickly, book appointments with minimal effort, easily browse doctors and healthcare services, and access important medical information through a clean, organized, and intuitive interface.

Understanding Users

Understanding the users was the first step in the design process. I identified the primary users as patients booking medical appointments, individuals managing regular health checkups, first-time users seeking healthcare guidance, and people who prefer simple and intuitive mobile applications. Based on user research, the key needs included a simple registration process, fast login, easy appointment scheduling, clear navigation, a readable interface, and minimal cognitive load. These insights shaped every design decision, ensuring the app delivers a smooth, accessible, and user-friendly healthcare experience. The goal was to reduce friction at every step and help users complete essential tasks with confidence. By keeping the interface clean and intuitive, the design makes healthcare services easier to access for users of all experience levels.

User Personas

Persona 1 — Priya Sharma (Patient)

Name: Priya Sharma

Age: 34

Profession: Marketing Manager

Location: Ahmedabad, Gujarat

Goals :

Book doctor appointments quickly

Track health reports in one place

Consult doctors online during busy schedules

Receive reminders for medicines and health checkups

How Priya Uses HealthSync :

Book appointments within a few clicks

Attend telehealth consultations from home

Store lab reports digitally

Get AI-powered health summaries in simple language

Receive smart health reminders and wellness tips

Persona 2 — Dr. Raj Mehta (Doctor)

Name: Dr. Raj Mehta

Age: 48

Profession: Cardiologist

Location: Mumbai, Maharashtra

Goals :

Manage patient appointments efficiently

Access patient history quickly

Write prescriptions faster

Reduce administrative workload

How Dr. Mehta Uses HealthSync :

Manage schedules and appointments

Conduct telehealth consultations

Access patient records instantly

Use voice-to-text prescription writing

Receive alerts about patient reports and appointments

Persona 3 — Anita Verma (Caregiver)

Name: Anita Verma

Age: 42

Profession: School Teacher

Location: Jaipur, Rajasthan

Goals :

Monitor her elderly father’s health

Track medicine schedules and appointments

Access reports remotely

Get alerts during emergencies

How Anita Uses HealthSync :

Anita uses HealthSync to:

Manage multiple family profiles

Monitor vital reports remotely

Set medicine and appointment reminders

Book telehealth consultations for her father

Share reports directly with doctors

Design Process

Research : The process began with research to understand common patterns in healthcare applications and identify areas for improvement. I analyzed existing apps and found recurring usability issues such as information overload, inconsistent navigation, and lengthy onboarding processes.

Information Architecture : After understanding the users and their needs, I mapped the complete application flow to ensure a logical and seamless experience. The journey progresses from the Welcome Screen to Login or Sign Up, OTP Verification, Profile Completion, Home Dashboard, Browse Doctors, Book Appointment, and finally Appointment Confirmation.

Wireframing : Before creating the final interface, I designed low-fidelity wireframes to establish the screen hierarchy, navigation structure, content placement, button positioning, and user interactions.

Visual Design

The high-fidelity interface was designed in Figma with a focus on simplicity, clarity, and trust. I used a modern, minimal design style with a blue and purple color palette on white backgrounds, where blue represents trust and healthcare, purple adds a modern touch, and generous white space improves readability while reducing visual clutter. Rounded components, consistent typography, and balanced spacing create a clean, professional, and welcoming experience that is easy to navigate.

Logos

Application logo

Wordmark logo

UI Screens

Onboarding Screen 1

Onboarding Screen 2

Home , Appointment and Book Appointment Screen

Conclusion

HealthSync demonstrates how intelligent UI/UX design can alleviate the pain of complex healthcare experiences by: Understanding user needs and what is really important to them; Reducing the friction in what they are trying to do; Maintaining a clear visual hierarchy. Each screen was designed to provide a seamless, natural, and accessible experience from registering to booking an appointment, while building trust with a clean, consistent interface.

This project taught me a lot about user-centered design and the importance of designing digital products that are not only visually appealing but actually useful. It also helped me to improve my research, information architecture, wireframing and visual design skills. Thanks for taking the time to look at this case study I welcome any feedback or suggestions that can help me continue growing as a UI/UX designer.