Healthcare Booking & Digital Queuing App

The main goal of this project is to bridge the gap between patients and healthcare services. By integrating online doctor consultations and home-based lab testing into a single platform, the objective is to eliminate the stress of travel and long waiting times, making healthcare accessible and comfortable.

Approach

The design process focused on building a robust, scalable system from the ground up over a two-week duration using Figma and Photoshop. To achieve a balanced layout across various mobile screen sizes, I implemented a structured 4-Column Grid System. This provided a clear framework for organizing medical cards, service categories, and appointment details.

Vision and Innovation

The vision was to create a clean, professional, and calming interface that builds immediate trust between the patient and the service provider. To achieve this, I selected a deep primary blue (#05668D). In a healthcare context, blue is the universal color of trust, stability, and professionalism, which helps reduce user anxiety and builds confidence in the platform's reliability.

Identifying Unique Challenges

Designing for healthcare presents the unique challenge of displaying dense information without overwhelming the user. A primary objective was to present complex medical data, such as lab results, in a simplified, easy-to-understand visual format. Additionally, ensuring the UI is easy to navigate for all age groups, especially for elderly users who prefer home-care services, was critical.

Resolving Complex Problems

To resolve issues of visual clutter and maintain rhythm, I established a custom Scaling Spacing System based on the 8pt grid principle. I utilized 12px/16px for internal padding within components and 20px/24px for larger gaps between distinct sections, ensuring every element feels intentionally placed. Furthermore, I designed specific components like the "Popular Lab Test Card" and "Appointment Card" to encapsulate complex data neatly.

User-Centric Design

Every interaction was designed with the user's physical ease in mind. I defined strict button sizing based on touch targets: Large (48px) for primary CTAs like "Book Appointment" to reduce error, Medium (42px) for secondary actions, and Small (36px) for tight spaces. I also utilized a Hybrid Approach to iconography. Outlined icons maintain a clean and airy aesthetic to prevent feeling cluttered, while Filled icons are strategically used for Active States and Critical Call-to-Actions to guide the user's focus.

Meeting User Needs

To address the user's need for speed and efficiency, the interface guarantees a seamless experience. The comprehensive layout and distinct visual hierarchy are engineered to create an intuitive booking flow, allowing users to schedule appointments and lab tests in under 2 minutes.

Detailed Pages and Features

The design system ships with a highly legible typography scale utilizing SF Pro in Bold, Semi Bold, Medium, and Regular weights. It includes a wide array of reusable UI components tailored for healthcare, such as Doctor Cards, Test Carts, Prescription Cards, and Patient Details Cards. High-contrast primary colors are applied specifically to headers, navigation, and primary actions to guide the user toward the most important tasks.

Accessibility and Optimization

The layout was built to be fully responsive by utilizing a 'Stretch' layout type, which automatically adapts to different mobile screen widths. A consistent 16px side margin ensures content does not touch the screen edges, providing a breathable viewing experience, while a 16px gutter between columns ensures adequate separation between UI elements, significantly enhancing overall scannability.

Conclusions

This cohesive design system successfully translates complex healthcare requirements into an approachable, user-friendly digital product. By combining an 8pt spacing system, strategic color psychology, and accessible component sizing, the resulting application delivers on its promise to make booking medical care intuitive, fast, and stress-free.