Stories From the Sun UX Design Guide

Core Mission

Design a family heirloom, not a recording app. Every element must honor storytellers (seniors) and preserve memories for generations.

User Profiles

Storytellers (60-85+): Primary users

•Physical: Reduced vision, tremors/arthritis, possible hearing loss
•Cognitive: Need processing time, prefer concrete over abstract
•Emotional: Vulnerable when recording, needs reassurance and dignity
•Tech comfort: Variable, often cautious

Legacy Keepers (35-65): Admin users

•Wants to preserve memories and stories, wants control without complexity
•Protective of parents' experience
•Need seamless tech that "just works"

Design Standards

Color Palette (Purpose-Driven)

Color	Hex	Purpose	Use Cases	Contrast
Antique White	#FAF1E6	Visual calm, reduce eye strain	All backgrounds	Base
Soft Gold	#D4AF37	Warmth, importance (NOT red)	Primary CTAs, active states, recording button	Test vs white
Warm Brown	#8B4513	Grounding, heritage	Borders, icons, secondary buttons	Strong vs light
Deep Navy	#1A1F3A	Maximum readability	Body text, headings	13.4:1 on antique
Burgundy	#800020	Emotional depth, dignity	Special moments, emphasis	8.2:1 on antique

Rules:

•All text: 6:1 contrast minimum (exceeds WCAG AA for aging eyes)
•Never red for recording (signals danger to seniors)
•Use Soft Gold for recording with gentle pulse

Typography

Font: Serif (Bricolage Grotesque/Georgia) - triggers familiarity with physical letters/books

Sizes:

•Body: 16pt minimum (18pt preferred)
•Headings: 24pt minimum
•Buttons: 18pt
•Line height: 1.5-1.6
•Letter spacing: +0.02em

Rules:

•Left-align only
•No all-caps body text
•Avoid italics for long passages
•No justified text (irregular spacing confuses)

Touch & Interaction

Targets:

•Minimum: 56x56px (not standard 48px - allows for tremors)
•Spacing: 16px between targets minimum
•Example: Recording button = 80x80px

Feedback (all three required):

•Visual: Color change, animation
•Haptic: Gentle vibration
•Audio: Soft chime (lower frequency for hearing loss)

Animation Timing (slower than standard apps):

•Fade-in: 300ms (vs 150ms standard)
•Slide: 400ms (vs 200ms standard)
•Bounce: 200ms (vs 100ms standard)
•Pulse cycle: 1500ms
•Never <200ms (seniors miss it) or >500ms (feels broken)

Forbidden: Quick flashes, parallax scrolling, auto-play, looping animations

Voice & Tone

Transform technical language into family language:

Don't Say	Say Instead	Why
Record audio	Share your story	Elevates action
File saved	Your memory is preserved	Honors contribution
Playback	Listen to [Name]'s voice	Personal connection
Users in circle	Your family	Human language
Administrator	Legacy Keeper	Meaningful role
Error	Something didn't work quite right	No blame
Complete profile	Let's add details to get started	Gentle invitation
Invalid code	That doesn't match. Try again?	Kind redirection

Principles:

•Do not act out of fear, but desire to preserve. Example do not write "One day, you won't be able to call them. But you'll always be able to hear them." no negative positive. Only positive like "Preserve your family stories for the generatins."
•Elevate, don't diminish
•Use family language
•Be gently encouraging, never demanding
•Celebrate contributions
•Never blame for errors

Screen-Specific Guidance

Welcome Screen

Goal: Transform uncertainty into welcome

Elements:

•Background: Faded family photo album (familiar imagery)
•Tagline: "Welcome to Your Family's Keepsake" (sets emotional tone)
•Buttons: "Join Our Family Legacy" / "Return to Your Memories" (not "Sign Up"/"Login")
•No technical jargon

Record Your Memory

Goal: Transform vulnerability into confidence

Key decisions:

•Microphone icon: Vintage style, centered, gentle pulse (patient, not rushing)
•Prompt in speech bubble: "Share a memory of..." (invitation, not demand)
•Speaker icon: Read aloud at slower speed, warm voice
•Recording button: Soft Gold circle (not red), transforms to "Pause"
•No timer visible: Removes pressure
•Post-recording: "Save to Our Legacy" (Soft Gold) / "Try Again" (outlined, no shame)
•Background: Parchment texture + faint family tree watermark (10-15% opacity)

Memory Vault

Goal: Celebrate preservation, enable discovery

Elements:

•Layout: Grid of cassette/vintage radio cards (not list - cards feel precious)
•Card shows: Name (large), date, play button
•Header: "Our Family's Memory Vault" (not "Recording Library")
•Shadow effect: Cards appear liftable (tangible)
•Interaction: Tap card → immediate play (minimize friction)

Family Memory Well

Goal: Spark memories gently, never demand

Elements:

•Visual: Wishing well / communal journal
•Prompts: On parchment notes, readable handwritten font
•
Quality prompts: Specific but universal, positive, sensory
- •Good: "What was your first car like?"
- •Bad: "Describe your childhood" (too broad)
•Add button: "Add Your Own" with quill pen icon
•Animation: Quill pen while typing (validates contribution)

Memory Playback

Goal: Honor the story, create presence

Elements:

•Styling: Old radio/gramophone with vintage knobs
•Controls: Play/Pause (large), Replay (smaller), NO fast-forward (disrespectful)
•Progress: Vinyl record groove with needle
•Shows: Name, date, prompt used
•Hides: File size, technical metrics, editing controls
•Background: Warm wood texture (creates sonic "room")

Family Circle Dashboard (Legacy Keepers)

Goal: Empower without overwhelming

Elements:

•Layout: Polaroid-style frames (not spreadsheet)
•Each frame: Name (handwritten font), avatar (heart default), soft shadow
•Add button: "Add a Loved One" (not "Add User"), heart + plus icon
•Remove: Small X, confirmation shows impact: "[Name] has 12 memories. Remove?"
•Family code: Decorative badge (wax seal), groups of 3: ABC-DEF-GHI

Sync Experience

Goal: Technical magic feels human

Pre-sync:

•"Looking for family devices..." (not IP addresses)
•Shows "[Name]'s iPhone" (human names)

During:

•Circular progress, devices illustrated with memories flowing between
•Rotating messages: "Sharing Grandma's stories...", "Nearly there..."

Success:

•"Our legacy is now in harmony" (not "Sync complete")
•Heart icon (not checkmark)

Component Specifications

Primary Button

code

Background: Soft Gold (#D4AF37)
Text: White, 18pt, serif
Border-radius: 8px
Padding: 16px 24px
Shadow: 0 2px 8px rgba(139,69,19,0.15)

States:
- Hover: Darken 10%
- Active: Scale 0.98
- Disabled: 50% opacity

Use: Start Recording, Save Memory, Join Family

Secondary Button

code

Border: 2px Warm Brown (#8B4513)
Background: Transparent
Text: Warm Brown, 18pt
Border-radius: 8px
Padding: 16px 24px

States:
- Hover: 5% brown tint
- Active: Darker tint

Use: Try Again, Cancel, View Details

Input Field

code

Background: White
Border: 1px Warm Brown
Border-radius: 4px
Padding: 12px 16px
Font: 16pt serif

Focus: 2px Soft Gold border
Error: 2px Burgundy border + helper text
Placeholder: #9B9B9B italic "e.g., Mary Johnson"

Navigation Bar

code

Position: Fixed bottom
Background: Antique White
Height: 72px (tall for easy tapping)
Shadow: 0 -2px 8px rgba(26,31,58,0.05)

Tabs (80px min width each):
- Record (microphone)
- Vault (cassette)
- Well (quill)
- Family (tree, Legacy Keepers only)

Active: Soft Gold icon + 3px underline
Inactive: Warm Brown

Accessibility Requirements

Visual

• All text: 6:1 contrast minimum
• Works at 200% zoom without breaking
• Color + icon/text (never color alone)

Auditory

• Screen reader: Proper semantic HTML, ARIA labels
• Audio feedback: Lower frequency tones
• Every icon has aria-label

Motor

• All features via keyboard (Tab + Enter)
• Focus indicators: 3px Soft Gold outline
• No timeouts for recording/reading/decisions
• Login session: 30 days

Cognitive

• One primary action per screen
• Consistent patterns (same button, same place)
• Physical metaphors (vault, well, recording)
• Progressive disclosure (don't show everything)

Error Prevention

Auto-save: After 10 seconds of recording

Exit mid-recording: "You have an unfinished memory. [Continue Recording] [Save What I Have] [Discard]"

Network issues: "We couldn't connect this time. Your memories are safe. Try again when ready."

Deletion confirmation: Small remove button → "Remove Grandpa Joe's 23 memories from vault?" (shows impact)

Micro-Moments

First recording: "Your first memory is preserved. This is just the beginning..."

10th recording: "You've shared 10 precious memories. Your family will treasure these forever."

Loading states:

•Syncing: "Bringing your family's memories together..."
•Loading vault: "Opening your family's treasure..."
•Saving: "Preserving this precious moment..."

Empty states:

•Empty vault: "Your family's first memory is waiting. Ready to start?"
•Empty well: "Let's create your first inspiration together."

Validation Checklist

Before any release:

Emotional:

• Makes user feel valued, not used?
• Grandmother would feel comfortable?
• Every word elevates experience?
• Honoring stories, not just storing data?

Senior-Friendly:

Family Connection:

• Admin feels empowering, not technical?
• Sync feels like bringing family together?
• Vault feels like treasure?
• Prompts feel like loving questions?

Anti-Patterns to Avoid

❌ Technical language ("upload", "sync", "file") ❌ Rushed interactions (auto-advance, timers) ❌ Cold design (stark white, harsh blacks) ❌ Impersonal copy ("user added") ❌ Stressful patterns (countdown, urgency) ❌ Small text, low contrast, tiny buttons ❌ Generic UI, stock photos, corporate tone

Golden Question

Before any design decision, ask:

"Will this help preserve precious memories and strengthen family bonds for generations?"

If not a clear yes, reconsider.

Remember: You're not building features. You're building bridges between generations. Design with the care you'd use to restore an old family photo album.