Summary
A full UX/UI redesign of One Mobile, a marketing and member-engagement app that delivers educational resources, podcasts, videos, articles, and weekly challenges. I led the end-to-end product design: discovery, IA, interaction models, hi-fi UI, design system tokens, prototypes, and usability validation—handing off a developer-ready Figma file set.
Problem:
The existing app suffered from content sprawl, inconsistent navigation, and low engagement on educational materials. Users struggled to find relevant content and complete weekly challenges.
Goals
- Make discovery of educational content (podcasts, videos, articles) intuitive and fast.
- Establish a coherent IA with clear navigation and content taxonomy.
- Increase weekly challenge participation and completion.
- Create a reusable design system for faster iteration and engineering handoff.
Users & Use Cases
- Members: browse curated content; subscribe to topics; complete weekly challenges.
- Marketing/Content Editors: promote collections, surface new items, measure engagement.
- Care/Coaching Teams: recommend content and challenges by condition/interest.
DESIGN PROCESS:
Discovery & Research
- Stakeholder interviews to map business goals and success metrics (content engagement, weekly challenge completion).
- Heuristic review of the current app; competitive scan of health/learning apps.
- Synthesized pain points: hard-to-scan feeds, buried categories, unclear challenge flow.
Information Architecture:
- Reorganized IA around Home, Search, Favorites, Profile, Settings.
- Defined content taxonomy (topics, series, formats) and faceted filtering.
- Mapped key flows: discover → detail → save/continue → completion → streak/reward.
Wireframes:
- Low-fi wireframes to validate layouts and navigation.
- Hi-fi component library in Figma with tokens (color, type scale, spacing, elevation).
- Built interactive prototypes for path testing (onboarding, content discovery, challenge join/complete).
Validation:
- Task-based usability tests (remote):
- Find a podcast on sleep health
- Start this week’s challenge
- Save a video and continue later
- Iterated on empty states, filter clarity, content detail structure, and challenge progress cues.
Handoff:
- Delivered redlines, component variants, motion specs, and accessibility guidance.
- Partnered with mobile engineering on feasibility and edge cases (offline states, long titles, subtitles/captions).
Key UX/UI Deliverables:
Content Cards System
- Unified card layout across podcasts, videos, articles: title, duration/badge, progress.
- Visual indicators for saved, in-progress, and completed.
Challenge Flow
- Clear “Join challenge” CTA, daily tasks checklist, progress ring/streaks, celebratory completion state.
- Nudges: optional reminders, suggested content aligned to the challenge.
Navigation & Wayfinding
- Bottom nav with 5 tabs; persistent mini-player for audio/video.
- Faceted filters and pinned “active filters” chips.
- Empty/zero states with instructional microcopy.
Accessibility
- WCAG-aware color contrast; larger tap targets; consistent focus order.
- Captions/subtitles guidance for video; transcripts for podcasts.
- Dyslexia-friendly line length & spacing in article view.
Design System (Figma)
- Typography scale, color tokens (light/dark), spacing grid, elevations.
- Components with variants: buttons, chips, tabs, cards, lists, skeletons, modals, toasts, banners.
- Motion guidelines for transitions (200–250ms ease-in-out).
Collaboration:
- Weekly design reviews with Marketing and Product; incorporated editorial needs (collections, promos).
- Paired with mobile engineers to ensure component feasibility and performance.
- Coordinated with Analytics to tag critical actions (join challenge, complete task, save item).
Outcomes:
- Cleaner IA and discoverability; users in testing completed tasks faster with fewer taps.
- Early stakeholder feedback: improved readability, clearer challenge flow, stronger content surfacing.
- A scalable design system reduced design/implementation drift and sped up dev handoff.