A task-oriented app that makes sun safety a daily habit.
SunSafe educates people on protecting themselves and their loved ones from the risks of skin cancer, turning UV awareness into simple, gamified daily actions that fit seamlessly into everyday routines. It combines real-time UV tracking, smart reapplication reminders and wearable integration inside a calm, accessible interface.
People underestimate UV risk, and existing apps are either dry data or cluttered dashboards.
A gamified, accessible habit app, UV tracking, smart reminders and skin-type personalisation.
SUS 76.1 (“good”), grounded in 54 participants and seven flows iterated from testing.
UV exposure is rising, and most people underestimate the risk.
Exposure to UV radiation from an early age can lead to serious eye disease, premature ageing, sunburn and skin cancer. With climate change, daily UV exposure keeps climbing, in spring 2020 the UK broke sunshine records with 626 hours, 30% above the five-year average. Yet existing apps are either purely informational or cluttered with complex data.
…encourage people to consistently practise sun-safe habits while making UV awareness simple, accessible, and engaging?
I started by talking to 54 people.
Before designing anything, I ran a mixed-methods discovery study, a 25-question survey alongside three in-depth interviews, to learn how people actually relate to sun safety, rather than how I assumed they did.
Three in four never check the UV index, a widespread gap in sun-protection awareness.
Nine in ten wanted proactive, personalised sun-safe guidance, a clear appetite for educational content.
Even where UV data exists, three-quarters overlook it, visibility and relevance are too low.
Two in five spend significant time outdoors in the afternoon, when UV risk is highest.
These patterns shaped the five personas, the feature priorities and the behavioural approach that follow.
A gamified experience that builds habits with minimal friction.
SunSafe fosters lasting UV-protection habits by combining behavioural science with a calm, accessible interface. Three principles guided every decision.
Users spend minimal time inside SunSafe, sun protection never becomes an extra daily burden.
Clear visual representations of progress and exposure that encourage daily accountability.
Sun-safe practices slot into existing routines, reducing breaks in concentration.
Seven features, one effortless routine.
Live local UV index with hourly forecasts and threshold warnings.
Micro-habits (apply SPF, wear sunglasses, check the UVI) tied to rewards and streaks.
A timer triggered automatically from skin type, UV index and activity level.
Quick check-in and reapplication alerts, right on the wrist.
Multi-profile management so parents can track children’s sun exposure.
A face scan and Fitzpatrick questionnaire tailor UV advice to each user.
A dual-encoded visual system (colour + icons/patterns) engineered to WCAG AA/AAA.
Designing for habit, grounded in the Hook Model.
To make sun safety stick, SunSafe applies Nir Eyal’s Hook Model, the loop that turns a prompted action into a self-driven habit.
External high-UV alerts and reapplication timers; internal desire to protect skin and family.
One-tap task completion, e.g. “Applied SPF 50”.
Daily streak counter, SunSafe Guardian badge progression, community impact score.
Setting skin type, custom locations, connecting Apple Watch and customising kids’ profiles.
Competitor analysis
I benchmarked five live UV apps against a feature matrix. Every one tracks the UV index, but none supported multiple-user profiles or wearables, and only one offered skin-type personalisation, and none combined these with gamified habit-building.
| Feature | UV Index | Sun Smart | UV Lens | UVI Mate | Sun Index |
|---|---|---|---|---|---|
| Location | ✓ | ✓ | ✓ | ||
| UV index | ✓ | ✓ | ✓ | ✓ | ✓ |
| External device / wearable | |||||
| Multiple user profiles | |||||
| Forecast | ✓ | ✓ | ✓ | ||
| Warnings | ✓ | ||||
| Vitamin-D tracking | ✓ | ||||
| Sunscreen reminder | ✓ | ||||
| Face analyser / skin age | ✓ | ||||
| Free to use | ✓ | ||||
| Skin type | ✓ |
What users were asking for
A review analysis of existing apps surfaced consistent, unmet needs, from reapplication reminders to colour-blind accessibility.
Five people, five relationships with the sun.
Built from the discovery survey and interviews, spanning outdoor workers, busy parents, student athletes and a colour-blind snowboarder.
Outdoor enthusiast, hiking, camping, skiing.
- Previous severe sunburns
- Overwhelmed by contradictory advice
- Enjoy the outdoors safely
- Track UV effortlessly
Busy professional running outdoor events.
- Frequent sunburn on work days
- No quick, actionable advice
- Stay productive outside
- Automated reapplication alerts
Protecting young children on days out.
- Worry over kids’ UV vulnerability
- Hard to run multi-person routines
- Multi-profile monitoring
- Fun, gamified tasks for children
Track athlete with a family history of skin cancer.
- High daily outdoor exposure
- Anxiety around relapse
- Precise UV logging
- Community sharing & advocacy
Winter-sports athlete with red-green colour-blindness.
- Green-red UV scales are unreadable
- Snow glare causes rapid burning
- Fully accessible interface
- Altitude & glare adjustments
Scenarios
I storyboarded a day in each persona’s life to ground the features in real moments.
From behavioural research to a tested product.
Behavioural analysis (Hook Model), competitor research and user-review analysis.
Concepts for onboarding, home, reminders and the gamification system.
Low-fidelity sketches and user flows for onboarding, tasks and reminders.
Card sorting and affinity mapping to structure the information architecture.
A purple-based, accessible design system with reusable components.
Usability testing and accessibility evaluation using the SUS methodology.
Four tabs, everything a tap away.
Card sorting and affinity mapping shaped a four-tab structure, UV Index, Activities, Resources and Account, sitting under a splash and registration flow.
Card sorting
An open card sort had users group every feature into eight natural buckets, which I then consolidated into the four primary tabs.
The four-tab structure
An accessible, purple-led system behind the screens.
Badges, from purple to colourful
The first badge library shared one purple, gold-embossed look, so nothing felt distinctly earned and the key element got lost on the gradient. The finals became flat and colourful, each carrying its own sun-safety element, drag the divider to compare.
Wireframing the core flows.
Before any visual design, I wireframed every core flow in low fidelity, skin-type onboarding, tasks and rewards, resources, smart reminders and kids’ profiles, to settle structure and content ahead of the hi-fi screens.
The finished app, screen by screen.
Every high-fidelity screen from the SunSafe prototype, grouped by flow. Swipe, drag, or use the arrows to browse.
Seven testers, a full SUS study, then iterated.
Seven participants ran through the core flows. I measured the experience with a 10-question System Usability Scale and evaluated every screen against Nielsen’s heuristics, then A/B-tested the fixes.
Well above the 68-point industry average, placing SunSafe’s usability in the “good / B-grade” band. The chart shows the spread of responses across all ten SUS questions (Q1-Q10).
Before & after
Seven flows testers stumbled on, redesigned from their feedback, swipe through each before and after.
Sign-up flow. Testers stalled at a hard registration wall before they could try anything. Adding a “Continue as a guest” path, with full feature access, removed the barrier to first use.
Home page. A “Complete your profile” card lingered after the task was done, and there was no way to change location. The redesign strips redundant cards and surfaces location switching (Nielsen: aesthetic & minimalist design).
Activity page. The screen title read “Your Daily Goal” while the nav said “Activities”. It was renamed “Activity” to match, with a clearer progress ring and an obviously-tappable insights button (Nielsen: match between system & the real world).
Task progress. The hydration tracker’s row of empty glasses read as clutter, “too many visuals”. It became a single fill-state bottle with a clear “+”, which testers praised.
Resources. Articles were inconsistent, image-less and densely packed. They were restructured into clearly sectioned Articles and Community tabs with supporting imagery.
Account. An oversized “Open a kid’s account” card felt irrelevant to users without children. The menu was rebalanced and a quick shortcut to earned badges was added.
Accessibility, progress ring. The progress ring’s rainbow scale was unreadable for colour-blind users. A colour-blind-safe palette, validated on a colour wheel, meant colour-blind testers who had been blocked could complete the flow.
Behavioural science, accessibility and gamification, working together.
- A user-centred UV-protection experience grounded in behavioural science.
- An accessible, inclusive interface validated with colour-blind users.
- Gamification integrated into genuine health habits, not vanity metrics.
- Usability validated through testing and a 76.1 SUS evaluation.
Where SunSafe goes from here
Track 100 users to measure whether gamified streaks increase real-world sunscreen adherence.
Connect to Bluetooth UV sensors on clothing and hats for passive tracking.
SunSafe sharpened how I balance engagement with simplicity, designing behaviour-driven health experiences that stay accessible to genuinely diverse users.
View the full case study on Behance ↗Sources & further reading
- Eyal, N. (2014). Hooked: How to Build Habit-Forming Products. Portfolio / Penguin.
- Brooke, J. (1996). SUS: A “quick and dirty” usability scale. In Usability Evaluation in Industry.
- Fitzpatrick, T. B. (1988). The validity and practicality of sun-reactive skin types I-VI. Archives of Dermatology.
- W3C (2018). Web Content Accessibility Guidelines (WCAG) 2.1.
- Cancer Research UK. Melanoma skin cancer statistics. cancerresearchuk.org.
- World Health Organization. Ultraviolet (UV) radiation and skin cancer. who.int.
- Met Office (2020). Provisional spring statistics, record UK sunshine.
- Colour Blind Awareness. Colour blindness prevalence. colourblindawareness.org.