Teen Center Programs
Expanding access to opportunities for underprivileged teens by centralizing event information and simplifying registration across multiple Teen Centers located in Central Orange Coast.
Sole UX Designer
Nov ‘24 - Mar ‘25
Figma, Pinterest, Canva, Zoom
the problem
Scattered information made opportunities hard to reach for teens.
Teens couldn’t find opportunities that were right in front of them. With event details scattered across Instagram, emails, and flyers, many teens only heard about opportunities through word-of-mouth. Those who attended less often were left out, while staff spent extra time trying to fill the gap.
the solution
One app to unify every Teen Center and connect teens anytime, anywhere.
I designed a centralized mobile app where teens can discover, register for, and stay connected to events. This solution helps level the playing field by ensuring all teens, regardless of how often they attend or which center they visit, have equal access to opportunities across the organization.
background
What inspired the mobile app
In my previous role as a Workforce Development Coordinator at the Boys & Girls Clubs of Central OC, I worked closely with the staff of Teen Center Programs. While I wasn’t directly part of their team, our departments operated under the same director, giving me valuable insight into their daily operations.
Through these experiences, I began to observe recurring challenges in how our teens discovered, accessed, and engaged with events (see below):
Scattered Information
Barriers to Access
Ineffective Communication
user interviews
Expectations vs. Reality: Recruiting teens
What I hoped for:
To validate my observations and uncover additional insights, I set out to hear directly from the teens. I knew recruitment would be challenging since I had worked closely with them before and understood that after a long day at school, most just wanted to relax (and honestly, who wouldn't?).
Nonetheless, I was optimistic that I could recruit at least 5 teens for a 15-20 minute chat, especially with the added incentive of Starbucks drinks as a reward.
What actually happened:
When I visited each Teen Center, I learned that the Irvine and Costa Mesa locations had few or no teens enrolled for the academic year. Still hopeful, I turned to the Santa Ana location, but enrollment there was also low and the few teens I approached declined to participate.
Unable to conduct teen interviews, I turned to the next best source: staff members who work with them daily. While not my original plan, their firsthand knowledge of teen behavior, communication challenges, and engagement patterns provided valuable insight into the problem space.
analysis + insights
Poor communication methods limits teen engagement.
After speaking with all 7 staff members, I compiled key data points and used affinity mapping to identify recurring themes. While many findings validated my initial observations, the staff interviews also shared new perspectives I hadn’t uncovered before.
I found that fragmented and inconsistent communication methods caused teens to rely almost entirely on word-of-mouth and staff to relay event details. This dependency created a feedback loop, where staff continued using the same informal channels. As a result, ensuring equal, easy, and reliable access to opportunities became even more challenging.
Communication Challenges
Word-of-mouth became the primary way teens received information, benefiting those who attended regularly while leaving less frequent visitors out of the loop. This created unequal access to opportunities across the Teen Center community.
Event Promotion Channels
Promotion channels like Remind, email, Instagram, and physical flyers didn’t do much to reach teens. Word-of-mouth was the most successful method but excluded teens who attended less frequently.
Suggested App Features
Staff envisioned an app that not only lets teens RSVP and get reminders but also share events and invite friends. They emphasized the need for a fresh, modern design and the ability for teens to access events across multiple centers.
personas
Meet our teens: Britney, Amy, and Sonny
Using research insights, I created 3 personas based on common trends and behavioral patterns. While fictional, they closely represented the teens we frequently encountered and served. These personas helped synthesize key data points, ensuring my design decisions stayed aligned with our teens' real needs and goals.
pov + Hmw
Narrowing down the MVP focus
Guided by the personas, I created POV statements and reframed them into HMW questions. From there, I prioritized those that align with the app’s primary goal: helping teens discover and register for events.
Since this was an MVP, I focused on core functionalities first. After all, if teens couldn’t easily sign up for events, additional features, like those supporting social engagement, wouldn’t add meaningful value.
My consolidated HMW question
FEATURE PRIORITIZATION
Identifying key features
Informed by user research, I brainstormed various features, then organized and ranked them by priority. Features, like Account & Profile Creation or Event Registration, were prioritized because they directly supported the app's primary function.
Other features, such as Direct Messaging or Center Locator, were also included as they enhanced the overall event experience. Meanwhile, engagement-focused features, like Point-Based Reward System or Guest Registration, were saved for future iterations.
SITEMAP
Determining the app structure
After identifying key features, I needed to figure out their placement within the app. The initial structure consisted of Home, Calendar, My Events, Messages, and Profile.
However, I recalled that the Director of Teen Services emphasized the importance of allowing teens to easily access center details, such as hours of operation and amenities. To accommodate this, I replaced Profile with Centers in the second iteration, as teens were less likely to access their profile frequently.
USER FLOWS
Optimizing navigation to increase retention
Keeping the steps simple and intuitive was crucial because any friction points could discourage teens from adopting this new platform, just as they had with previous communication methods. For the MVP, I created 4 user flows: Onboarding, Event Registration, Messaging Staff, and Locating a Center.
wireframes
Bringing all these ideas together
With the key features and information architecture in place, I sketched app screens on paper to quickly explore different layouts and structures. I then selected the most viable designs and translated them into mid-fidelity wireframes in Figma, focusing on usability, intuitive navigation, and visual clarity.
moodboard
Where Minimalism meets Neubrutalism
Upon reviewing the brand guidelines, I realized that the vibrant color palette would pose accessibility challenges. While exploring solutions, I came across Neubrutalism—a bold, high-contrast design trend that aligned with the brand aesthetic but felt too harsh for a user-friendly experience.
To balance this, I envisioned blending Neubrutalism elements with the simplicity of Minimalism. This blended approach would allow me to soften the intensity while maintaining strong contrast for better readability and accessibility.
accessibility
Ensuring color contrast with blue and orange
From my past experiences, I was aware that blue and orange were among the trickiest colors to work with for accessibility. Rather than altering the organization's color palette, I explored the following ways to maintain accessibility while preserving the branding:
Added a black border around the primary CTA button
While research has shown that white text on a blue button is more readable than black text, I still chose to add a black border around the primary CTA button.
This not only reinforced the Neubrutalism aesthetic I was aiming for but also improved accessibility by adding an additional visual signifier.
Increased the header text size to 20px
I initially set the bolded header text to 18px, but upon checking the contrast ratio, it did not meet accessibility standards.
Since the contrast ratio was 3.31:1, I knew that increasing the text size to 20px would ensure compliance, as WCAG requires bolded text 19px or larger to have a minimum contrast of 3:1.
first round
2 minor improvements in my design
For the first round of testing, I ideally would have worked with our teen users. However, due to the Director’s busy schedule, we couldn’t coordinate a suitable time. With my own time constraints, I moved forward by recruiting 5 users familiar with events apps or event-related features. While they weren’t the intended audience, their experience with event discovery and registration provided valuable feedback for early improvements.
Add a check mark next to ‘Going’
❌ Participants noted that they might overlook their RSVP status if they didn’t read carefully.
✅ A check mark emoji was added, helping users to quickly recognize their RSVP status at a glance.
Consider renaming ‘Calendar’ tab
❌ Most participants were unable to locate events under ‘Calendar’. Some suggested renaming it to ‘Discover’ or ‘Explore’ or merging ‘My Events’ with ‘Calendar’.
✅ I initially named the tab this way to match how our Teen Centers post events on a monthly calendar. However, since this round involved participants unfamiliar with how the Teen Centers operated, I decided to wait until the 2nd round. There, I hoped to gather feedback from teens to determine if a change was necessary.
second round
2 additional minor improvements
For this second round, I successfully recruited 4 teens (third time's a charm!). Like the first round, they were given six tasks to complete, followed by questions about what they liked and what they found confusing.
The feedback was overwhelmingly positive, and the teen participants confidently stated they would use the app if developed. However, I still made minor improvements based on their input to further improve the user experience.
Positive Interest
Ease of Use
Task Completion Rate
Maintain the ‘Calendar’ tab label
❌ A label change might be necessary, if the teens, like the first set of participants, struggle to locate events under the Calendar tab.
✅ 3 out of 4 teen participants successfully navigated to this tab with minimal to no hesitation. This indicated that they intuitively understood that monthly events were found under 'Calendar.' Since the label effectively conveyed its purpose, no changes were made.
Switch from combined to separate calendar view
❌ When asked whether they preferred a combined or separate view of the calendar of events, responses were evenly split.
✅ Teens who preferred the combined view liked seeing all events at once. However, the separate view had the same use via the List icon. Meanwhile, those who preferred the separate view found it less overwhelming. To accommodate both needs, I chose the separate view as the final design.
mockups
A mobile app that makes it more accessible and convenient for teens to discover events and connect with Teen Centers across the Boys & Girls Clubs of Central Orange Coast network.
Account & Profile Creation
Sign up in just a few steps to join the Teen Center Programs community. Set up a quick profile to personalize your experience and get connected to the right events.
Event Registration
Explore upcoming events happening throughout the month in either a calendar or list format. Select any event of interest and register instantly with a single tap.
Direct Messaging
Easily get in contact with any Teen Center, with the option to call or send a message.
Center Locator
Locate other Teen Centers in your area and check out their hours, amenities, and what makes each one unique.
key learnings
What wisdom did I gain?
Get creative with research strategy.
Although I wasn’t able to directly interview teens, this taught me that when direct access to your primary user group is not possible, you can still gather useful evidence from alternative sources such as analytics, secondary research, or by consulting people who interact closely with them.
next steps
So, what’s next on the agenda?
Incorporate a new location: Bandai Teen Center in Anaheim-Cypress.
While working on this app, the Director told me that the organization had acquired a new Teen Center. By then, I was already deep into the design phase, and the team was still in the process of restructuring the new location. Once operations settle, I plan to integrate Bandai Teen Center into the app.
Add social engagement features.
With the MVP complete, I want to add features that boost social engagement: a guest invite so teens can bring friends, plus a points-based rewards program and a referral program to drive repeat use and attendance.
