Mediq

Role: Product Designer (UI/UX)

Platform: Mobile App (iOS & Android)

Industry: HealthTech / Telemedicine

Overview

Mediq is a telemedicine and doctor appointment booking app designed to connect patients with verified physicians; across specialties like Dermatology, Cardiology, and General Practice, through a single, trustworthy mobile experience. I designed the complete end-to-end flow: doctor discovery, specialist profiles with health metrics, appointment scheduling, multi-method payment, and booking confirmation. The product had to earn trust at every screen, because healthcare is one of the few spaces where a confusing or cold UI can make users feel genuinely unsafe.

The Goal

The goal was to make accessing a doctor feel as easy and reassuring as booking a restaurant; with the same speed and clarity, but with the additional weight of trust that healthcare demands. Specifically: reduce the friction between "I need a doctor" and "appointment confirmed," give patients enough information to feel confident in their choice, and make the payment and booking steps feel secure and transparent.

The Problem

Healthcare access in many markets still runs through fragmented, frustrating systems; phone queues, manual appointment books, and no visibility into a doctor's real-time availability. Even where apps exist, they tend to fall into two failure modes: either they're clinical and cold, which erodes patient comfort, or they're visually polished but shallow, offering little actual decision-making information. Neither helps a patient who needs to quickly find a dermatologist on a Wednesday morning, understand what that appointment will cost, and trust that the doctor is real and qualified.

The deeper challenge is that in healthcare, trust and clarity aren't nice-to-haves; they're the product. A user who feels confused at the payment step doesn't just abandon the checkout; they lose confidence in the care they're about to receive.

The Solution

Mediq is organized around the three moments that matter most in a booking journey: finding the right doctor, understanding what you're booking, and paying with confidence.

The discovery screen uses specialty-based filtering (Physician, Cardiologist, Neurologist, General Physician) to cut through a crowded list quickly, with doctor cards showing ratings, clinic affiliation, and price-per-session upfront so there's nothing hidden until checkout. Doctor profile pages go deeper; availability slots, a health metrics panel for relevant indicators like cardiovascular health, blood sugar, and liver markers, and clear bio copy; so a patient can make an informed choice rather than a blind one.

The appointment calendar gives a full timeline view of upcoming, completed, and cancelled sessions. Payment consolidates method selection (Mastercard, Visa, Apple Pay) and fee breakdown on a single screen, with a clean confirmation state that communicates both success and next steps (confirmation email, appointment reminder) at a glance.

The Design Approach

I structured the design process around one central question: at what point does a healthcare app lose the user's trust, and what does it take to rebuild it? That question shaped every flow decision.

I began with competitive analysis across telemedicine apps in both mature and emerging markets to understand where trust broke down; typically at doctor credibility signals, fee transparency, and post-booking clarity. From there I mapped the full patient journey from initial search to appointment attendance, building user flows for both primary users (patients booking their first appointment) and returning users (rebooking a known doctor).

Wireframes focused on information hierarchy within each screen before visual design was introduced, since the data load on screens like the doctor profile is high and hierarchy had to work at low fidelity before colour and photography made it easier. Usability testing concentrated on two critical moments: the transition from discovery to booking, and the checkout step, since both carry the highest risk of drop-off.

Component structure was defined early; card variants for doctor listings, availability slot states (selected, available, passed), payment method rows, and status tags, so the system stayed consistent across a screen count that grew as flows were refined.

Visual Direction

The visual language is clean, confident, and deliberately human. A near-white background with soft light grey surfaces creates a clinical cleanliness without feeling cold; the warmth comes from large, high-quality doctor portrait photography that anchors the most important cards and profiles. Doctors feel like real, approachable people, not database entries.

The colour palette keeps the UI restrained: near-black for primary text, mid-grey for secondary information, and a single green accent reserved for availability, success states, and upcoming appointment tags; a deliberate choice to associate green with health and positive outcomes throughout the experience. The "Upcoming" label in green, the "Payment successful" confirmation circle, and the availability indicator all share the same signal colour, creating visual consistency across the emotional high points of the journey.

Typography is clean and highly legible; slightly oversized for doctor names and appointment headers, compressed and muted for supporting detail; so a user scanning the screen quickly always lands on what matters first. The overall aesthetic aims to feel premium and trustworthy without being intimidating, appropriate for a product where the user's physical wellbeing is on the line.

Key Screens & Flows

Doctor Discovery — Specialty filter chips, rated doctor cards with clinic and pricing, top-rated flags, and a clear call to action for booking. The list is scannable without scrolling past unnecessary content.

Doctor Profile — Bio, availability grid with colour-coded slot quality (Good/Fair), health metrics panel with bar-chart visualisations for condition-specific indicators, and a persistent "Pay Now" CTA so booking is never more than one tap away.

Appointment Calendar — Monthly calendar view with day-level appointment status (Upcoming, Completed, Cancelled), upcoming session detail card with "Attend Now" action for online visits.

Payment — Multi-method selection (card, Apple Pay), itemized fee breakdown (consultation, online/physical visit toggle, tax), and a single "Pay Now" CTA. No multi-step checkout, no hidden fees surface at confirmation.

Booking Confirmation — Full-screen success state with green confirmation icon, appointment summary (specialty, date, time, visit type), and a clear statement that a confirmation email and reminder have been sent.

The Outcome

Mediq represents the full complexity of healthcare UX — high information density, multi-step flows, and an audience where trust is non-negotiable, condensed into a mobile experience that feels light and easy to navigate. The completed prototype covers every stage of the patient journey from discovery to confirmed booking, with a visual system built to scale across additional specialties and features without requiring redesign. It's the case study in my portfolio that most directly reflects my healthtech domain expertise, and the one I point to when discussing the relationship between UI clarity and user confidence in high-stakes products.

Reflections & Key Takeaways

Mediq pushed me to think carefully about what "accessible design" means in a healthcare context; not just WCAG compliance, but emotional accessibility: designing so that a person who is already anxious or unwell doesn't have to work hard to understand what's in front of them. It also reinforced that in healthcare, the post-action state (confirmation, receipt, follow-up) is as important to design as the primary conversion, because anxiety doesn't end at the "Pay Now" button. If I revisited this, I'd push further into the online visit experience itself; the waiting room, consultation, and post-visit summary screens; since that's where the product's actual healthcare value lives.