Dekel Factor Designs
Case study · Medical technology

DermAid

Skin care, connected.

A mobile-first dermatology concept connecting skin scans, professional advice and ongoing care.

Context
NetCraft Academy project, 2023–2024
My focus
Research, user flows, UX and interface design
Platform
Mobile-first concept, designed in Figma
Scope
Scan, questions, possible result, communication and care tracking

3D is unavailable in this browser, so the case study shows without its animated backgrounds.

Skip to final design
Scroll the story
01 / The brief

A skin concernis also ahuman concern.

A concerning change can start an anxious search: what is it, who can help, and what should happen next?

DermAid explores how assessment, doctor contact and follow-up could work as one connected experience. The focus extends beyond the scanning moment to the decisions a person needs to make afterward.

My role

What I owned,and with whom.

Role
UX/UI & product designer
Team
Solo, with feedback from NetCraft mentors
Timeline
NetCraft Academy · 2023–2024
What I did
ResearchUX flowsUI designPrototypeStyle guide
02 / Research & goals

Listen beforedesigningreassurance.

The study combined a review of industry studies on digital health and patient behavior, 10+ in-depth interviews with people with diverse skin conditions, and a review of existing products. Every conversation pointed to one of three needs.

Report analysis · 10+ interviews
72%

prefer virtual visits with dermatologists for convenience and quick access.

53%

of health apps are deleted within the first month if their value isn’t immediate.

73%

saved time finding the right treatment compared with traditional methods.

01 / HEARUncertainty.

Understand the concern behind the scan.

02 / CONNECTAccess.

Bridge assessment and professional advice.

03 / CONTINUEContinuity.

Keep care information within reach.

02 / Existing alternatives

Four products.Pieces ofthe answer.

The review compared four apps across six capabilities. Each covered part of the journey; the opportunity was in connecting them.

AI DermMDacneAysaSkinScan
ScanningChatDoctor callsPurchasesProgress trackingScheduling
DESIGN OPPORTUNITY

From result to next action.

Connect the assessment to an understandable next action, then make professional contact and care history easy to return to.

02 / Feature comparison

Everyone had a piece.No one had the path.

Six capabilities across the four apps reviewed. Every one of them scans; none lets you call a doctor or book a consultation, which is everything that happens after the result.

Feature comparison of DermAid, AI Derm, MDacne, Aysa and SkinScan
CapabilityDermAidAI DermMDacneAysaSkinScan
Skin scanDermAid✓AI Derm✓MDacne✓Aysa✓SkinScan✓
Live chatDermAid✓AI Derm✕MDacne✓Aysa✕SkinScan✕
Call a doctorDermAid✓AI Derm✕MDacne✕Aysa✕SkinScan✕
Treatment purchasesDermAid✓AI Derm✕MDacne✓Aysa✕SkinScan✕
Track progressDermAid✓AI Derm✓MDacne✓Aysa✕SkinScan✓
Schedule a consultationDermAid✓AI Derm✕MDacne✕Aysa✕SkinScan✕
✓ Has it◐ Partly✕ Missing
03 / Who it’s for

Meet Rachel.

Portrait of Rachel Levi

Rachel Levi

52 · Haifa, Israel

“I live far away from any doctors in the area. I wish I could easily connect to one over the phone.”

Early detection of skin cancer. Rachel enjoys outdoor activities and has recently noticed a suspicious mole on her arm. With a family history of skin cancer, she’s vigilant about her skin health, and needs a reliable way to monitor changes in her skin and access professional advice promptly.

GOALS
  • Early detection of skin cancer
  • Short wait times between appointments
  • Track medications and healing progress
  • Immediate skin assessment and care by the right doctor
PAIN POINTS
  • Concerned about the many skin spots that have developed
  • Keeps getting referred from one doctor to another with no answers
  • Looking for peace of mind, easy referrals and tracking
  • Long waiting times for appointments as the condition gets worse

The main persona, drawn from user interviews

03 / User story

Same worry.Two different paths.

Rachel’s goal never changes: find out whether the spot on her arm is something to worry about, and get the right care without driving across the country. What changes is how much of the process she has to carry herself.

Without the app

Fragmented path

  1. 01
    Spot a change

    A new mole appears, and there’s no doctor nearby to ask.

  2. 02
    Wait for a GP slot

    Weeks pass before someone who can’t diagnose it takes a look.

  3. 03
    Get referred onward

    Another doctor, another waitlist, the same story told again.

  4. 04
    Lose the thread

    No record of how the spot changed while she waited.

Worry grows while the spot goes unchecked

With DermAid

Connected path

  1. 01
    Scan it at home

    A guided photo captures the spot the moment she notices it.

  2. 02
    Talk to a dermatologist

    Call or chat with a specialist, without leaving Haifa.

  3. 03
    One referral path

    The next step is booked from the same place, not restarted.

  4. 04
    Track it over time

    Photos and notes build a history every doctor can see.

Peace of mind, and a clear next step

One scan

The first step happens at home

One path

Referrals continue instead of restarting

One history

Every doctor sees the same record

04 / User flow

One assessment,the right care path.

Before the screens had a look, they had a structure. A single clinical path — scan, history, assessment — where the analysis classifies each case and routes it to the right result, doctors and medicine. Only at the diagnosis does Rachel choose, and every path returns to one record.

ScreenDecision pointUpdates home

04 / User journey

A path,not a dead end.

Each stop on the line is a screen. Scroll to follow Rachel from a concern to ongoing care.

01 / 05Anxious

Scan

She frames the spot on her forearm inside a guided viewfinder.

DesignOne clear action, with framing and light checks built in.

02 / 05Unsure

Answer questions

Three quick taps say how long it’s been there and what changed.

DesignTap-first answers and visible progress, no typing required.

03 / 05Focused

Possible result

She sees what it could be, what it isn’t, and what to do next.

DesignPlain language, and every result ends with a next step.

04 / 05Relieved

Professional contact

A dermatologist picks up her case with the image and answers attached.

DesignHand off the full context, so she never has to repeat herself.

05 / 05In control

Follow-up care

Her appointment, scans and treatment now live in one place.

DesignA care home that gives her a reason to come back.

From concern to careNow, the product.

05 / Final design

Closer to the product.Closer to the decisions.

Scroll through the flow. Each state carries one design decision.

  1. 01 Scan

    Start with one clear action.

    Keeping the scan distinct from the questionnaire gives the user one task at a time.

  2. 02 Questions

    Give the image context.

    Separating capture and questions keeps the assessment from feeling like an unexplained answer.

  3. 03 Possible result

    Make the next step visible.

    The result leads directly to professional contact instead of leaving someone alone with it.

  4. 04 Doctor

    Keep the conversation in the product.

    Chat and booking happen in-app, connected to the scan that started it.

  5. 05 Care home

    Bring recurring actions to the surface.

    Appointment, recent scans and treatment progress greet her when she returns.

The flow, screen by screen

Five screens. One care journey.

Screens from the final Figma design. Scroll or drag sideways to turn through the flow.Scroll or swipe sideways to turn through the flow.

DermAid scan: the camera framed on a mole, with the Scan, Location, Symptoms and History steps above
01Scan
DermAid skin examination: What symptoms are you experiencing, with Both selected and a Next button
02Answer questions
DermAid risk assessment: Possibly Melanoma, high risk, with Schedule Test Nearby and Call Doctor Nearby buttons
03Possible result
DermAid appointment with Dr. Jenny Wilson: profile, stats, Call and Chat buttons and the booked visit time
04Professional contact
DermAid home: upcoming appointment, a recent Melanoma scan with chat and schedule actions, and regions to scan
05Follow-up care
The full flow, in motion

From scan to doctor.

The prototype end to end: sign in, mark the spot, get a possible result, reach a doctor, land on home.

06 / Decisions & trade-offs

Every screenwas a fork.

The three calls that shaped the product most: what I chose, and what it replaced.

Fork 01 · Possible result

What happens after the result?

Chosen

A possible result, with a doctor connection right on the same screen.

Instead of

Getting referred from one doctor to another with no answers.

Why. Finding the right doctor is the hard, anxious part. Putting the connection next to the result turns a worry into a next step.

Evidence · Rachel, the main persona, keeps getting referred between doctors · 72% prefer virtual visits with dermatologists.

Fork 02 · Scan & questions

Wait for a specialist, or scan now?

Chosen

Scan from the dock, get an AI assessment in seconds, then answer a few questions to sharpen it.

Instead of

Waiting months for a specialist to take a first look.

Why. People put off care when getting seen is hard. An instant first read, refined by the answers, lowers the bar to start.

Evidence · 85% of users delay seeking help because of scheduling friction.

Fork 03 · Care home

Scan and done, or ongoing care?

Chosen

A home built around care: doctor contact card, recent scans, treatments and medication reminders.

Instead of

A scan tool people open once and forget.

Why. Early detection and tracking healing are ongoing goals. A home that keeps care in one place gives people a reason to come back.

Evidence · 53% of health apps are deleted in the first month if the value isn’t immediate.

07 / Continuity of care

The result isn'tthe end ofthe story.

Recurring actions belong close to the surface. Contact details, recent scans and treatment information give people a reason to return beyond the first assessment.

Track

Every dose,on the calendar.

Track turns treatment into a weekly timeline. Medication reminders, infusions and appointments sit on one day view, each with who prescribed it.

  • Weekly view
  • Reminders
  • Appointments
DermAid Track tab: a weekly calendar with medication reminders for Accutane, infusions and an appointmentDermAid Treat tab in full-body view: a Melanoma scan pinned to the left shoulder, marked high risk, with prescriptions belowDermAid Treat tab in list view: the Melanoma scan with chat, call and schedule actions, and Aldesleukin and Accutane prescriptions with refills leftDermAid messages: a conversation list led by Dr. Jenny Wilson of Vcare ClinicDermAid voice call: Dr. Carly Angel on the line at 00:21, with speaker, hang-up and mute controlsDermAid video call: Dr. Carly Angel full screen, the patient in a picture-in-picture tile, with camera, hang-up and mic controls

Doctor and appointment

Details return to the home screen after an appointment is arranged.

Recent scans

Earlier concerns stay accessible, with routes to details and professional contact.

Treatment

Medication information supports the ongoing care journey.

In-app contact

The conversation stays connected to the rest of the experience.

08 / Style guide

Clinical clarity.Human tone.

The original style guide uses SF Pro Display, a violet primary color and quiet surfaces to organize information.

Identity
DermAid logo: overlapping translucent violet and sky-blue petals forming a ring around a clear centreDermAid

Overlapping translucent petals in violet and sky blue form a soft ring around a clear centre. The wordmark is set in SF Pro Display.

Typography
HeadingsSF Pro Display BoldAaYour skin, understood.Aa Bb Cc Dd Ee Ff Gg Hh 0123456789
BodySF Pro Display RegularAaYour scan results are ready to review.Aa Bb Cc Dd Ee Ff Gg Hh 0123456789

SF Pro Display throughout: Bold 700 and Medium 500 for titles and key information, and Regular 400 for reading text and descriptions.

Colour
Primary#5856D6

Actions and highlights

Surface#EDEDFC

Backgrounds and cards

Text#333333

Body text

Muted#697077

Secondary text

Style guide

The Button component from the DermAid library, measured as it is in Figma. Pick a variant and press it.

Library
Fill
Label
Type
Inter Semi Bold 16 / 150%
Box
327 × 56 · padding 16 · radius 14

Components

Three building blocks from the final design, rebuilt live. Try them.

Interface designA clean, easy-to-use design keeps users engaged and gets them help without friction.
Nearby Doctors
Direct communicationIn-app messaging and calls shorten the time between diagnosis and treatment.
Dr. EstherOnline

Hello! I've reviewed your scan.

Hi Doctor, that's great news. Is it serious?

It looks like mild eczema. I'm sending a prescription now.

Remind & trackMedication reminders, appointments and healing progress in one place.
MedicationAccutane1 pill dailyNext: Today, 20:00
MedicationInfusion2x weeklyNext: Tue, 14:00
AppointmentDr. Jenny WilsonFollow-up visitNext: Thu, 15:30
09 / Accessibility & trust

Anxious peopleneed calm interfaces.

In a health product, accessibility and trust are the same problem: anyone, in any state of mind, should understand what happened and what to do next.

Plain language

No clinical jargon. “Possible result”, not a condition name. Every screen ends in one obvious action.

Contrast & type

Primary violet #5856D6 measures 5.6:1 on white and 4.9:1 on its tinted surface, and body text 12.6:1, all passing WCAG AAWeb Content Accessibility Guidelines, level AA — the standard for colour contrast and readability..

Touch & motion

Targets of at least 44pt for shaky, stressed hands. Capture guidance that doesn't rely on color alone. Motion respects reduced-motion settings.

Health data & consent

Explicit consent before a scan is stored or shared, and a clear view of exactly what the dermatologist can see.

10 / Projected outcomes

What the researchpointed toward.

DermAid was a school concept, so there was no usability testing. These are targets estimated from the interviews and industry reports: what the design should achieve, and what a first validation round would measure.

≥80%

complete scan → doctor contact without help

Target · task success
≥90%

understand the result is not a diagnosis

Target · comprehension
<3 min

from opening the app to a booked appointment

Target · time on task
3 / 3

research goals covered: Hear, Connect, Continue

Design coverage

How these were estimated

Each target traces back to a pain point from the research: long waits for a specialist, confusion about what a result means, and no way to follow up. In the research, 85% delayed seeking help because of scheduling friction, 72% preferred a virtual visit with a dermatologist, and 53% delete a health app within a month if its value isn’t immediate. A moderated test on the Figma prototype would be the first step to confirm them.

11 / Reflection & next steps

What worked.What I'd change.

What worked

Treating the result as a handoff.

Framing the result as a next step rather than a verdict kept every screen pointed forward, toward a person who can actually help.

What I'd change

Test the result screen first.

It carries the most emotional weight and the most risk of being misread. I'd put it in front of people earlier and more often.

What I learned

Calm is a feature.

In health products, lowering anxiety is as much the interface's job as delivering information. Tone, pacing and one clear action do that work.

Where I would take it next

The original project identifies richer scheduling, in-depth tutorials and public-healthcare integration as next steps.

This is a design case study, not evidence of a deployed diagnostic system or a measured reduction in treatment time.

01 / 05
From scan to doctor