Open to work Local time in Amman:
العربية

04 // Health · Mobile app · Team

Sehati

One calm app for booking doctors, ordering medicine and asking an AI health assistant.

Role
UI/UX designer and UX researcher in a team of designers
Project
University team project
Platform
iOS and Android
Tools
Figma, FigJam, Google Forms

Problem

Getting care means juggling separate apps and phone calls to find a doctor, book, order medicine and ask a quick question.

What we did

Interviews and surveys, a seven-app competitor audit, a persona, flows, wireframes, a design system and a usability test plan.

Outcome

Four services one tap from home, booking in four steps from search to confirmation, and large targets and high contrast for people who feel unwell.

Sehati

Research and competitor audit

We interviewed and surveyed potential users, grouped what we heard in affinity diagrams, and audited seven local and global apps (Hakimi, Dwaa, Talabat Pharmacy, Drug Center, iHerb, Tebcan and Altibbi) on navigation, booking, ordering medicine and consultations.

Key insight: no single app did booking, pharmacy and trustworthy advice well. Each strong product was missing the other two, so users kept switching apps.

Competitor audit: strengths and weaknesses of seven apps (in Arabic).

Persona and needs

We synthesised the research into one primary persona, Ramzi, a busy professional who uses his phone for almost everything and abandons any flow that is confusing or slow.

  • Book a trusted doctor quickly, without long waits.
  • Get reliable answers from an AI assistant at any time.
  • Order medicine with clear prices.
  • Trust that medical data is private and secure.
Primary persona: Ramzi.

Flows and wireframes

Using Crazy Eights we sketched many directions quickly, then prioritised features for accessibility, trust and speed. We mapped the user flow and site map so every core task starts from the home screen.

Low-fidelity wireframe of the home screen
Site map
Registration / log in → Home
  • Book a doctor7 screens
    • Doctor page
      • Confirm booking
      • Rate
    • My appointments
      • History
      • Reschedule
      • Cancel
  • Online consultation5 screens
    • Doctor page
      • Consultation
      • Rate
    • My consultations
      • History
  • AI chat2 screens
    • Previous chats
    • Chat
  • Store4 screens
    • Item page
    • Cart
    • Checkout
    • Rate
  • Profile & settings9 screens
    • Edit profile
    • Security
    • Notifications
    • Subscriptions & payments
      • Payment methods
      • Billing history
      • Upgrade plan
    • Help & support
    • About us
User flows
  • Start
  • End
  • Screen
  • System action
  • Decision

Sign in

  1. Start: Start
  2. Decision: Have an account?
    • Yes: email and password
    • No: register with email, username and phone
    • Or continue with Google
  3. Decision: Valid?
    • No: edit and try again
    • Yes
  4. End: Home

Book a doctor

  1. Start: Search for a doctor
  2. Screen: Select a doctor
  3. Screen: Choose a date and time
  4. Decision: Time available?
    • No: join the waiting list, pick another time or doctor
    • Yes
  5. Screen: Confirm booking
  6. End: Rate the service and the doctor

Order from the pharmacy

  1. Start: Search for an item
  2. Decision: Right item?
    • No: keep shopping
    • Yes: add to cart
  3. Screen: Checkout: delivery address
  4. Decision: Payment method
    • Saved card
    • New card, validated
  5. Screen: Order confirmation
  6. End: Delivery, then rate

Ask the AI assistant

  1. Start: Type or speak a question
  2. Screen: The answer appears
  3. Decision: Next?
    • Ask a follow-up
    • Save to profile with a title
    • Back to Home
  4. End: End

Online consultation

  1. Start: Search and select a doctor
  2. Decision: Active subscription?
    • No: pay or start the free trial
    • Yes
  3. Screen: Start the consultation
  4. End: Rate the doctor

Design system and UI

We built a small design system in a calm medical blue with generous white space, then designed the high-fidelity screens. Ratings, years of experience and patient count sit on every doctor card to build trust before anyone books.

From Figma Built with Figma colour and text styles. Read from the Sehati Figma file: 40 colour styles in four families, 27 text styles and two extra colour variables.

The system in use

Colour

Contrast is calculated against white or the darkest ink, whichever is higher. Click a swatch to copy its hex.

Primary: medical blue

Secondary: sky

Type and background

Extras

Typefaces

  • Public SansLight, Medium and Bold for every size

Type scale

  1. H1 · 58 · 700Design people understand
  2. H2 · 50 · 700Design people understand
  3. H3 · 40 · 500Design people understand
  4. H4 · 32 · 500Design people understand
  5. H5 · 24 · 500Design people understand
  6. H6 · 20 · 500Design people understand
  7. Body · 16 · 400Design people understand
  8. Small · 14 · 400Design people understand
  9. XSmall · 12 · 400Design people understand

Line height 120% across the scale.

Sehati design system
  • Home: four services
  • Doctors by speciality
  • Doctor profile
  • Pick a slot
  • Pharmacy
  • Cart
  • My bookings
  • Chat with a doctor

Usability test plan

We planned remote sessions with five realistic tasks and evaluated every screen against Nielsen’s 10 heuristics, tracking time on task, success rate, confusion points and a post-test survey on ease and trust.

  1. Book a cardiologist on a given date.
  2. Ask the AI assistant a medical question.
  3. Buy Vitamin C from the pharmacy.
  4. Open a doctor’s profile and read reviews.
  5. Switch between consultation, booking and pharmacy.

Prototype: booking a doctor

The live prototype from our Figma file, from sign-in to the last screen: log in (or register, or recover a password), then book a doctor, order from the pharmacy, ask the AI and manage your bookings.

Live in FigmaSehati, the team’s prototype

Runs in Figma: click the hotspots like the real product. Loads about 2–4 MB. Open full screen in Figma (new tab)

Prefer a quick look? Below are the key screens, one at a time, with notes.

Tap through the main flow from the team’s Figma prototype. Long screens scroll inside the phone, just like the real app.

  1. Sign in
  2. Home: four services (scroll)
  3. Doctors by speciality
  4. Doctor profile with ratings
  5. Confirm the booking
  6. My bookings
  7. Ask the AI assistant
  8. Pharmacy
  9. Cart
  10. Done: rate your experience

1 / 10 Sign in

Tap the screen, swipe, or use ← → to move through the flow.

Reflection

Healthcare UX is about trust before beauty. Showing a doctor’s rating, experience and clear prices did more for confidence than any visual polish. Next, I would test the AI assistant’s wording with real patients and add Arabic-first screens.

Keyboard shortcuts
Single-key shortcuts

Turn off if you use speech input or find them getting in the way.