SOCIAL MEDIA APP
LOCATION BASED
DESIGN SYSTEM
Summay
How I helped Mind Body Awareness Project bring a decade of trauma-informed curriculum off printed handouts and into a scalable, accessible digital platform, built for incarcerated youth, underserved adults & educators who serve them.
My Role
My main role was defining product experiences on curriculum and lesson pages though stakeholder meetings and design iterations. Collaborated with developers and project leads to meet design goals and stakeholder needs for such a meaningful project.
Stakeholder Outcomes
10K+
people in MBA's reach - now with a persistent digital home
0 → 1
from zero digital infrastructure to a, grant reportable platform
Easy Upload
staff can publish and manage content with out technical support
0 — AT A GLANCE
There are three core surfaces…
A curriculum library, 3 lesson formats, an admin panel, and a calm design system, each designed around a different user and different need.
Curriculum Library Page - Final Design, Admin Panel — Staff can publish without training
Lesson Pages & UI Components — video, audio, and reading, one consistant pattern
1 - THE OPENING
"Imagine you're a counselor at a Bay Area juvenile hall. You have 45 minutes with a group of teenagers who have never had a structured conversation about their mental health. You arrive with a stack of printed handouts, the same ones you printed last week, and the week before. When the session ends, the papers stay behind. Some get folded into pockets. Most get left on chairs. Next week, you start over."
The situation
This was the reality for Mind Body Awareness (MBA), educators spent time they didn't have organizing, distributing, and re-explaining content that could have been self-served. When a session ended, the learning largely ended with it.
MBA had reached…
10K+
people reached through MBA's programs to date
1,500
youth served annually in Bay Area facilities
0
digital touchpoints for users to continue learning
But he curriculum itself lived entirely in printed handouts, in-person sessions, and a scattered Google Drive folder of documents and shared links. There was no persistent home for it. No way for someone to revisit a lesson, go deeper at their own pace, or access support between sessions.
The cost of the status quo
For the organization's leadership, there was a second, existential problem: grant reporting. MBA's funding depended on demonstrating structured, measurable impact. Without a digital platform, there was no reliable way to show how often content was accessed, which lessons resonated, or how engagement changed over time. The organization was doing meaningful work — but couldn't prove it at the scale funders needed to see.
How might we design a digital platform that extends MBA's reach beyond in-person sessions — simple enough for users with limited tech experience, and structured enough to support the grant reporting MBA needs to sustain its mission?
2 - REASERCH
Designing for people, not users
MBA's audience spans incarcerated youth encountering mindfulness for the first time, adult professionals looking to deepen a practice, and non-technical administrators managing a content library with limited time and training.
Users (Leaderners)
Discover lessons easily (by type or topic)
Track learning progress across multiple sessions over time
Access content in video, audio, or text format
Feel calm — not overwhelmed — when opening the app
Upload and organize extensive content
Edit content cards quickly
Maintain consistency and structure across content types
Eventually export engagement data for grant reporting
Admins (MBA Saff):
Approach
MBA's staff had limited availability — a real constraint of working with a lean nonprofit. Rather than treating this as a blocker, I adapted. I used our monthly stakeholder meetings as structured research sessions:
presenting prototype iterations to surface expectations,
validate navigation logic, and
pressure-test assumptions about what "simple" meant for this audience.
Watching where stakeholders hesitated or asked questions revealed more than a survey would have.
"We need something our staff can update without calling IT" — MBA Stakeholder
"Our users may have never used an app like this before. It has to feel safe, not clinical." - MBA program lead
3 - DESIGN PROCESS
FALL QTR
Discover & Define
Stakeholder Interviews
Competitive Analysis
User Needs mapping
Low-fidelity wireframes
Key output: problem definition + initial concepts
Winter QTR
Develop & Test
Stakeholder Interviews
Competitive Analysis
User Needs mapping
Low-fidelity wireframes
Key output: validated direction, gamification decision
Spring QTR
Refine & Ship
Final Feedback rounds
Paired dev review sessions
Figma handoff & spec documentation
Key output: production-ready design + handoff doc
The project followed an agile/scrum workflow across three academic quarters. Each phase had a clear focus, a set of deliverables, and a key decision that carried into the next phase.
Initial Wireframe - Fall QTR
Mid-fi palette testing - Winter QTR
4 - DESIGN DECISIONS
What I chose, and why
Three decisions shaped the product most significantly. Each one involved a real tradeoff — between ambition and sustainability, between feature richness and clarity, between the client's initial instinct and what the evidence suggested.
Decision 1 — Dropping gamification for a durable design system
Considered: Early in the project, MBA's team came inspired by Duolingo's gamification model — streaks, badges, and progress rewards. It was a reasonable instinct: gamification drives engagement, and engagement is what their grant reporting needed to demonstrate.
Chosen Instead: Badges and streaks require constant updates to stay motivating. MBA didn't have the staff or budget to maintain that. A stale reward system erodes trust faster than no system at all — so we chose durability over novelty.
Result: This decision also unlocked our design language direction. Without gamification's bold visual grammar, we could lean into a calmer, more grounded aesthetic that better served a mental health context.
Old components for gamification ideas
Decision 2 — Color as an accessibility
tool, not brand decoration
Constraint: MBA's brand used deep, dark tones. For users navigating trauma or with limited digital experience, that palette risks feeling clinical or anxiety-inducing — the opposite of what a mental health product needs.
Chosen: We shifted to a softer, nature-grounded palette: muted greens, warm neutrals, generous whitespace. Color also does functional work — each content type (video, audio, reading) is color-coded so users build recognition passively, without having to remember a system.
New Color Palette (left) & Old Color Palette (right)
Decision 3 — Scoping filters out of v1 intentionally
The Ask: Filtering and tagging was the most-requested capability from both users and stakeholders. With a large eventual content library in mind, it made sense to want it.
Tradeoff: At launch, the content library will be small. Filter UI on a sparse library creates near-empty states that erode trust. We built the architecture to support tagging natively so it can be activated as content grows — no redesign needed. Search alone handles discovery at current volume.
Document: Filtering was documented as the highest-priority v2 addition, alongside analytics for grant reporting — which was similarly descoped due to engineering lift but designed as a natural v2 extension.
V2 idea - Filtering User Page (Left side) & Admin edit view (Right side)
5 - DESIGN SOLUTIONS
What was built
One design principle across every screen: the system should teach itself through consistent patterns, because the people using it may already be carrying a lot.
Curriculum page — building to scale
Search-forward layout that surfaces content without scrolling. Simple at current library size, architected to support filters and tagging as content grows.
Lesson pages — three formats, one consistent pattern
Video, audio, and reading formats share a single layout with format-specific adaptations. Completion button sits beside the navigation arrow so progress tracking never interrupts the lesson flow. Related content surfaces on the side — encouraging depth without crowding the main experience.
Admin panel — low-friction content management
Built for non-technical staff who need to add, edit, and reorder lessons without support. Color-coded by resource type for fast scanning. Controls are minimal and labeled literally — a new staff member should be able to publish a lesson on day one.
Design system — calm by design
Muted sage greens, warm neutrals, generous whitespace. Typography unhurried, interactions unambiguous. The system is built to feel like a quiet room — not a dashboard.
6 - COLLABORATION
Working across the team
Building trust with a nonprofit client
Early on I asked MBA's team how they preferred to communicate. Direct, plain language — no jargon. That shifted how I ran every meeting after: "how the pages are organized" instead of "information architecture," "what felt confusing in testing" instead of "heuristic evaluation." Feedback came faster and more honestly — and it became a design principle: if the people commissioning this product struggled with technical language, so would their users.
Developer collaboration
Structured Figma handoffs with component-level specs, plus live paired review sessions where developers could ask questions in real time. Before final delivery we audited the live system together — comparing implementation against spec and documenting gaps.
7 - EDGE CASES AND WHAT'S NEXT
TheHhonest Roadmap
In MBA's final review session, their team noted that staff would be able to navigate the admin panel and upload content without dedicated training — a meaningful signal for an organization that can't afford onboarding overhead. The primary barrier to a full public launch wasn't the product; it was securing the ongoing funding to sustain it. The platform was ready. The mission continues.
What I'd measure
No end-user data exists yet, but here are the four metrics I'd track — each tied to MBA's real goals, not just standard UX KPIs.
01 — Lesson completion rate
Whether users finish, not just open. For a trauma-informed curriculum, completion signals the pacing and structure are working — and it's the core engagement metric MBA needs for grant reporting.
02 — Return visit rate within 30 days
MBA's model only works if users build a practice. A 30-day return rate shows whether the platform is becoming a habit or a one-time visit — and informs how content should be sequenced.
03 — Admin content publishing frequency
If the admin panel is too complex, publishing drops off and the library stagnates. Frequent publishing by non-technical staff is the clearest proof the admin design is working.
04 — Grant reporting export usage (v2)
When built in v2, report usage ties the product directly to MBA's sustainability — the metric that determines whether they can keep serving communities at all.
8 - REFLECTION
What I learned
1*
Constraints are a design material
Limited stakeholder availability, a small content library, no budget for gamification upkeep — every constraint on this project shaped a better decision. Learning to reframe constraints as inputs rather than blockers was the most transferable skill I built here.
3*
Communication style is UX too
Asking how stakeholders wanted to communicate early changed every conversation after. The same principle runs through the interface: meet people in the language they already speak.
2*
Durability over novelty
The gamification decision taught me to ask not just "will this work at launch?" but "will it still work in year two without intervention?" I'll bring that question to every project.
4*
What I'd do differently
I would have involved the engineering team earlier — during the mid-fidelity stage rather than at handoff. Some feasibility conversations we had in review sessions could have saved iteration time if they'd happened two sprints earlier.
I conducted 3 iterations of usability tests with 10 students at UCSC. Through this, I got information on what to iterate between each round.
