The problem

The existing storefront design exists as a single desktop landing page — strong visual identity (koala mascot, navy/coral palette, mission-driven copy), but no documented adaptation for tablet or mobile, even though most merch-store traffic skews mobile. Showing it as one static screen undersells the work in a portfolio context: it reads as "a page," not "a system."

What I had

One high-fidelity desktop screen: promo bar → nav → "New Features" icon row → "New Merch Arrivals" product grid → split promo banner → navy mission band → donation/photo section → three-icon trust row → "Kindness gifted cards" carousel → Instagram social proof grid → bottom CTA with photo → email signup footer.

Responsive decisions

• Nav: Collapses from a full text nav (Home / New In / All Products / Donate / Sale) to a hamburger + persistent cart icon at tablet and below; search bar shrinks to an icon that expands on tap.
• New Features row: 3-up icon grid on desktop → stays 3-up on iPad Pro (just narrower cards) → stacks to a horizontal swipeable carousel on iPhone 16.
• New Merch Arrivals: 5-up product grid → 3-up on iPad Pro → 2-up scrollable row on iPhone 16, with "View all" staying pinned top-right at every size.
• Split promo banner: side-by-side on desktop and iPad Pro → stacks full-width on iPhone 16, each panel keeping its own carousel arrows.
• Mission band + donation/photo section: full-bleed navy band scales cleanly at all sizes; the photo + "Join us in our mission" copy block stacks (photo on top) below tablet width.
• Kindness gift card carousel: 4 visible cards on desktop/iPad Pro → 1.5 cards visible (peek-next) on iPhone 16 to signal swipeability.
• Bottom CTA: desktop's side-by-side copy + photo composition becomes copy-first, photo-second stack on mobile, with the orange/navy geometric shapes repositioned behind the headline instead of behind the photo.

Composite rendered with Nano Banana from the original storefront screenshot, reflowed across desktop, iPad Pro, and iPhone 16 frames.

Key functions carried across all three sizes

• Persistent cart + account access in the nav at every breakpoint.
• "Shop for Instructor materials / First Aider materials / Accessories" entry points stay above the fold on every device — these are the store's primary task-based routing, not just decoration.
• Donate CTA never drops below one scroll on mobile, preserving the mission-first framing.

The problem

Mental Health First Aid runs as a course-and-certification model, not a one-time purchase. Once someone finishes a course, the brand relationship mostly ends at the merch store. There's no home for refresher content, certification tracking, finding upcoming courses, or staying connected to the community the mission band on the storefront talks about.

Research objectives

Through interviews with recent course graduates and instructors, I wanted to understand what happens to a certified First Aider's engagement after the course ends, learn what instructors currently use (or improvise) to manage rosters and re-certification reminders, and identify what would make someone re-engage with the mission beyond a single purchase.

Research insights

Personas

Persona #1

The newly certified First Aider

Just finished the course through a workplace wellness push. Motivated, a little proud of the cert — and with no idea what to do with it next.

Devon

Customer Support Rep · 27 · Austin, TX

Bio

Devon got certified after his company made Mental Health First Aid part of a wellness initiative. He liked the class more than he expected, but a month later the binder is in a drawer and he has no idea when — or whether — he needs to renew. He'd take an active role in the mission if there were an obvious next step.

"I don't want this to be something I did once and forgot about."

Motivations

• Keep the certification current without tracking it himself
• Put the training to use, not just hold the credential
• Stay connected to people from his course

Frustrations

• No warning before his certification lapses
• Can't find volunteer opportunities tied to the mission
• His cohort's group chat disappeared after the course ended

Needs

• A renewal countdown with built-in reminders
• A directory of local community/volunteer opportunities
• A lightweight way to stay in touch with his cohort

Persona #2

The repeat instructor

Runs several cohorts a year for a regional health nonprofit. Knows the material cold — the part wearing her down is everything around it.

Renee

MHFA Instructor & Behavioral Health Counselor · 52 · Charlotte, NC

Bio

Renee has taught MHFA for six years and still runs every cohort the same patchwork way: roster in a spreadsheet, materials in a shared Drive folder, reminders by email blast. She loses prep time every session chasing down who completed pre-work and reprinting handouts for people who lost theirs.

"I shouldn't have to leave the app to actually run my class."

Motivations

• Spend prep time on content, not logistics
• Keep every cohort's roster and materials in one place
• Build a reputation as a reliable, organized instructor

Frustrations

• Roster info is split across email, spreadsheet, and Drive
• No visibility into who's done the pre-work
• Reprinting materials for participants who lost theirs

Needs

• One roster view with attendance and cert status
• One-tap material push to the whole cohort
• Built-in messaging instead of personal email/text

How might we

Ideation & information architecture

Sitemap splits into two primary modes selected at first login — First Aider and Instructor — sharing a common shell (Community, Shop, Profile) but with mode-specific home dashboards. Core flows: track certification status → find a refresher or recert course → join a community/volunteer event; for instructors: create a cohort → distribute digital materials → message the roster.

Focused sitemap

Focused sitemap separating First Aider and Instructor dashboards, sharing one common shell.

User flow — finding and booking a refresher course

User flow for a First Aider finding, filtering, and booking a recertification course.

Laying the foundation

Based on the research insights, I focused early wireframes on the three things people actually asked for: a certification countdown they couldn't miss, a roster instructors could manage without leaving the app, and a community feed that gave the mission somewhere to live after checkout.

Early low-fidelity wireframes for the three highest-priority screens, before branding was applied.

Key functions

• Certification tracker — visual countdown to recertification, one-tap link to find a renewal course nearby.
• Digital materials library — the same Instructor/First Aider materials sold physically in the storefront, available digitally post-purchase.
• Community & volunteer feed — local mental-health-awareness events and volunteer opportunities, tying the app back to the storefront's mission message.
• Instructor cohort manager — roster view, one-tap material distribution, group messaging — built directly from the "less admin, not more features" insight.
• Connected store — merch and gift e-cards from the storefront, accessible without leaving the app.

Branding

Carries the storefront's navy/coral/cream palette and koala mascot forward rather than introducing a new identity — the app should feel like "the same brand, now in your pocket," not a separate product. Wordmark: MHFA Connect, set in the same bold rounded sans as the storefront logo, coral accent underline.

Testing objectives

Validate the dual-mode concept — confirm First Aiders and instructors actually want separate dashboards rather than one shared view. Observe the certification-tracker flow — would users actually act on a recert reminder, or ignore it like a generic push notification?

Usability results

(Concept — framed around expected validation criteria rather than shipped data.)

First Aiders responded most positively to the community/volunteer feed — it answered the "what now?" gap directly. Instructors flagged cohort messaging as the single highest-value feature, ahead of the materials library, reinforcing that admin relief outweighs content access for that group.

Iterations

Initial concept had one shared home dashboard for both modes; the research insight that instructors prioritize admin tools over content pushed the IA split into two distinct dashboards instead.

Takeaways

The biggest opportunity wasn't a flashier course experience — it was closing the gap between "certification ends" and "mission relationship ends." Tying the app's retention loop to the same mission language already on the storefront, rather than inventing new app-only messaging, kept the brand coherent across both surfaces.

Nice to haves

• Push reminders tied to real recertification windows, not generic engagement notifications.
• Instructor analytics on cohort completion rates.
• Storefront cross-sell, surfacing relevant merch right after certification renewal.