Sun Protection App – Low-Fidelity Wireframes

Client-shareable and developer-friendly wireframes for the mobile MVP.

Built from the uploaded product blueprint.

Core MVP modules reflected here: sunscreen coverage scanning, predictive UV protection alerts, and a family safety hub.

Navigation model: Home · Scan · Family · History · Profile

Onboarding Sign Up Home Scan Results Reminder Setup Family Hub

1. Onboarding

9:41Onboarding
Illustration / Product Intro Area
Protect smarter in the sun
Scan coverage · Get UV alerts · Protect your family
• Scan sunscreen coverage
• Get smart reapply reminders
• Check family safety status
Get Started
PurposeExplain the app quickly and move the user into account creation.
Primary CTAGet Started
Key elementsLogo/hero, short value props, sign-in shortcut

2. Sign Up / Login

← BackCreate Account
Email or phone
Password
Confirm password
Create Account
or continue with
Apple
Google
Already have an account? Sign In
PurposeCreate the user account and establish a session.
Primary CTACreate Account
Key elementsEmail/phone, password fields, social sign-in, auth mode switch

3. Home Dashboard

Hi, Sarah:bell:
UV Index Today: HIGH
Peak 12:00–2:00 PM
Protection Status
Protected until 1:40 PM · Last scan 10:15 AM
Scan Coverage
Upcoming Reminder
Reapply in 35 minutes
Family Summary
2 of 4 protected
PurposeGive the user one clear answer: what is my sun risk and what should I do next?
Primary CTAScan Coverage
Key elementsUV card, protection card, reminder card, family summary, bottom nav

4. Coverage Scan Capture

← BackScan Coverage?
Camera Preview
Body / Face Guide Overlay
Stand in bright light and hold still for best results.
Flash
Switch
Capture
Need help? Scan Tips
PurposeCapture an image for sunscreen coverage analysis.
Primary CTACapture
Key elementsCamera viewport, capture button, flash/camera switch, scan guidance

5. Scan Results / Heatmap

← BackScan Result
Coverage Score: 78%
Heatmap / Body Map Result
Missed Areas
Nose bridge · Left cheek · Upper shoulder
Reapply Now
Set Reminder
Save to History
PurposeTranslate the scan into something actionable and easy to understand.
Primary CTAReapply Now
Key elementsCoverage score, heatmap, missed area list, next-step actions

6. Smart Alerts / Reminder Setup

← BackSmart Alerts
Today's Conditions
UV: High · Weather: Sunny · Humidity: 68%
Time outdoors: 2 hours ▼
Reapply interval: Every 90 min ▼
Smart Recommendation
Reapply every 75–90 minutes today
☑ Push alerts
☑ Family safety alerts
Save Reminder Plan
PurposeTurn conditions and exposure into a personalized reminder plan.
Primary CTASave Reminder Plan
Key elementsUV/weather summary, duration selector, interval selector, alert toggles

7. Family Safety Hub

Family Hub+ Add
Household Status
2 protected · 1 needs reapply · 1 unchecked
AvaProtected
LeoReapply now
MomProtected
DadNo scan today
View Household History
PurposeLet a parent or household lead see the safety state of everyone in one place.
Primary CTAAdd Member
Key elementsHousehold summary, member list, status labels, history entry point

8. Scan History

← BackHistory
Search history
All
Scans
Alerts
Today
10:15 AM Coverage 78%
8:40 AM Reminder set
Yesterday
2:20 PM Coverage 84%
11:00 AM Coverage 73%
Export Summary
PurposeShow past scans, alerts, and protection activity for trust and review.
Primary CTAExport Summary
Key elementsSearch, filter chips, grouped entries, export button

Developer Notes

PriorityScreensNotes
P1Onboarding, Sign Up, Home, Scan, Results, Reminder Setup, Family HubMust-have MVP path
P2HistoryUseful for trust, retention, and later exports
P3Profile, Settings, Subscription, Member DetailCan follow after MVP release

Recommended next UI pass: convert this low-fi set into a mid-fi grayscale design system with reusable cards, status chips, and a consistent bottom navigation.