UI/UX + Mobile + Visual Design + User Research
Ripple 🌀 is a mobile app designed to encourage youth leaders to connect with community-focused projects, like-minded peers, and experienced mentors.
Timeline —
Role —
Spring 2024
Mobile Product Design
User Research and Testing
Visual and Branding
Wendy Yu
Ish Acharya
Tools —
Figma
Team —
OVERVIEW
Ripple
The YMCA, a nonprofit organization dedicated to strengthening communities, sought to connect youth leaders who share a passion for social work and community impact. They aimed to encourage youth to utilize programming spaces to advance their projects and connect with like-minded peers.
Ripple is a mobile system that allows involved youth to visualize the impact of their projects through recognition from a social network-style feed. Youths are encouraged to launch their own projects, join pre-existing ones, and connect with mentors for project support.
MY ROLE
What did I do?
As a co-lead of Ripple's visual design and mobile UI/UX system, I worked closely on designing and user researching/testing. I was responsible for preliminary user research, wireframing, prototyping, and iterative user testing. Throughout the process, I prioritized designing intuitive user interfaces and ensuring ease of usability for our target audience.
PROBLEM SPACE
How can we effectively support and connect youth with peers who share similar interests?
*Provided by the National YMCA as an initial starting point for the project.
THE SOLUTION
Find your project, or start one. Need resources? Mentors have you covered. See your impact, it matters.
A mobile social networking app that enables youth to connect with their peers, encouraging them to launch their own community-driven projects or join ones that resonate. With peer and mentor support, tangible impact is recognized and celebrated. (View poster PDF)
LITERATURE REVIEW
What insights have past studies uncovered?
To first gain a comprehensive understanding of current pain points faced by the YMCA and other youth programming spaces, I conducted literature review on several peer-reviewed, academic sources. These insights were also used to guide the creation of my survey to youth leaders and interview questions for YMCA stakeholders.
-
Programs often fail to create clear pathways for youth participation and do not establish relevant roles for them. Youth need to be meaningfully involved in decision-making processes and have their contributions recognized.
-
Many programs struggle to balance adult involvement, often too adult-directed, hindering youth autonomy. Effective youth programs should foster authentic decision-making, mentorship, and reciprocal relationships between youth and adults.
🔗 Measuring and Understanding Authentic Youth Engagement, 2016
-
Youth programming frequently overlooks critical areas such as support for the transition into adulthood and mental health struggles.
🔗 The Promise of Adolescence: Realizing Opportunity for All Youth, 2019
-
Programs can become too educationally focused and fail to prioritize hands-on involvement and community engagement. Maintaining youth interest is challenging, especially when students have other priorities. Programs need to be designed to be engaging and relevant to youths' lives and interests.
🔗 Engaging Youth for Positive Change: A Critical Analysis of Case Studies on Local Action, 2007
PRIMARY SOURCE RESEARCH
Stakeholder Interviews
With resources provided by Carnegie Mellon University’s Design for America chapter, I summarized recent interview findings from 6 YMCA Directors of Youth Programming across several prominent US branches.
This research was focused on gaining a better understanding of each individual YMCA chapter and their experiences with youth engagement in recent years. I was especially interested in knowing what resources each YMCA chapter had for youth development, how they were being utilized, and the specific challenges they faced in engaging and retaining youth participation.
Sample Interview Questions
1. What existing youth change-maker programs are at your YMCA?
2. How does your YMCA currently recruit new members? How do youth primarily learn about new programs?
3. What are your chapter’s biggest challenges/concerns, and is there a goal you’d like to meet?
👥 Demographics
Local YMCA Staff
Directors of Youth Programming
Youth involved with changemaking
National YMCA Coordinators
🎤 Interview Insights
Youth programs have limited outreach and have difficulty with recruitment.
Heightened by the pandemic, there has been increased difficulty reaching a broader youth population beyond those already familiar with the YMCA. The Y heavily relied on word-of-mouth advertisement with little social media leverage.
Youth programs lack a strong recognition system, often leaving change-makers feeling undervalued and unmotivated to continue their involvement.
Difficulty of youth retention in programs are often a result of competing activities, such as school-related commitments which may offer more immediate gratification. Program costs create barriers to sustained participation, especially when youth feel unrecognized for their efforts.
There is a lack of consistent and engaging programs that appeal to the youth.
Programs failed to give youth autonomy in their roles, resulting in youth feeling disengaged from their involvement. YMCA directors recognize youth need for leadership opportunities and creating programs/resources that are relevant to youth development.
SURVEY
Hear from the youth leaders
Of course, it was necessary to gauge firsthand youth experiences with programming spaces to understand the perspectives of those directly impacted. I created and sent out a survey asking youth change-makers aged 15-25 about their level of involvement with programming spaces such as the Y, the kinds of resources they were able to obtain from those spaces, and any additional support they would’ve liked to receive.
By collecting this data, I was able to identify valuable common trends, preferences, and challenges that may not be evident through literature review and stakeholder interviews alone.
💭 Youth leaders want…
To easily discover social programs and initiatives that align with their interests.
To connect with users (for testing), experts, and mentors.
Increased participation within an ongoing project.
To visualize the impact and success of their projects.
To simplify the process of contacting youth spaces and mentors
PROJECT GOALS
What do we need to focus on?
Phew! That was a lot. Let’s narrow down our project goals before we begin ideating possible solutions.
How can we enable young change makers to connect with like-minded peers and mentors who can support them in achieving their goals in a widely accessible way?
How can we enhance current outreach strategies to effectively engage a wider demographic of youth beyond the immediate local community?
How can we develop a recognition system that allows young people to clearly see and appreciate the impact of their work?
IDEATION
What solutions did we consider?
After conducting user research and narrowing our project goals into 3 distinct areas of consideration, we began to brainstorm potential solutions through affinity diagramming and crazy eights.
🧑💻 Digital networking platform
A mobile app or website that centralizes program and project information while providing a space for youth to track their involvement and see the impact of their contributions.
🤝 Mentorship matching program
A mentor matching program that connects experienced professionals with youth based on shared interests and career goals, providing guidance and support outside of program activities.
👫 Youth ambassadors program
A youth ambassadors program within schools and local communities to promote various youth programs, share success stories, and encourage peer-to-peer recruitment.
SOLUTION EXPLAINED
Why a mobile app?
Based on a survey published by the Pew Research Center, nearly all teens (95%) have a smartphone, followed by 90% of teens who own a laptop or desktop. Considering that our target audience are teenagers and young adults aged 15-25, it was very important to consider a solution with the highest accessibility. In addition, a mobile app enables wider reach with little barriers to cost, ensuring remote opportunities and social media advertising abilities.
-
Michelle Faverio. “% of U.S. teens ages 13 to 17 who say they use the internet.” Pew Research Center. https://www.pewresearch.org/internet/fact-sheet/teens-and-internet-device-access-fact-sheet/
COMPETITOR ANALYSIS
Let’s get inspired
Before thinking about the design of Ripple, I first wanted to understand the current capabilities of existing social media/networking mobile apps. I compared the UI of different relevant mobile apps and mockups, identifying trends and best practices to be incorporated into Ripple.
Main Takeaways
1. Allow users to select their interests during onboarding to recommend more personalized projects, increasing user engagement
2. Allow users to sign in with Google to minimize unnecessary steps with education emails
3. Needs an ‘activity’ or some type of feed so that users can post and be posted as a recognition system
4. Allow users to bookmark projects, view project descriptions, and message those involved in a project
5. Allow users to customize their own profile page to foster peer-to-peer connections
PROTOTYPING
Wireframes
After researching existing UI trends in social media platforms and looking at various mobile mockups for inspiration, I began designing wireframes for account creation, onboarding customization, and the main navigation pages. This helped me better visualize potential flows and consider specific aspects of the user experience in greater detail.
USER TESTING
Putting the wireframes into action
I led think-aloud user testing sessions on our low-fidelity wireframes and gathered feedback from youth participants involved in various YMCA programs. The structure of these user testing sessions were split into 3 main sections:
1. Initial Impression: Give time for participants to go through every page of the app, click around, and hover their cursor over various aspects of the app. They should say what their initial impressions are– what they like and dislike about each page.
2. Task-Based: Participants are asked to complete specific tasks within the app, ex: If you wanted to post a project, what steps would you take to do so?
3. Final thoughts: Ask participants what could be added or improved about the app (open-ended).
🚀 Improvements
Instead of directly implementing the changes into our low-fidelity wireframes, we decided to iterate our high-fidelity prototypes instead with the desired changes!
STYLE GUIDE
Color Palette and Typography
When considering our app’s style choices, we focused on our target audience: the youth change-makers. We envisioned a playful, bright, and inviting interface that would make connecting with new people and joining new projects feel less intimidating and more enjoyable.
APP FEATURE 1
Customizable Onboarding Process
Designed to be intuitive and efficient, Ripple’s onboarding process offers users the option to sign up with Google (ideal for students using their education email) or with their personal email. Users are then guided through a streamlined, four-step profile customization with the option to specify their project interests. These selected interests personalize the user’s project recommendations and facilitate connections with like-minded peers who share similar passions.
APP FEATURE 2
Find your project…
Through onboarding customization, Ripple recommends engaging projects that match the user’s interests. Users can refine their search further with Project Filters, ensuring results that fit their accessibility needs and schedule. Project pages are rich with information, offering users a clear understanding of each project's purpose, introducing them to its members, and highlighting any upcoming events.
APP FEATURE 3
…or start your own
For youth leaders with a unique vision they wish to bring to life, Ripple provides the ability to launch their own projects. With just four simple steps, they can set up their project, customize its details, invite members, and begin making an impact with full autonomy.
APP FEATURE 4
Connect with others
With Ripple, users can connect with like-minded peers from diverse fields and backgrounds, far beyond their local area. Mentors from across the United States are available to provide valuable support, including financial assistance for projects, help in securing venues, and guidance in overcoming challenges. This broad network ensures users have access to a wealth of resources and expertise.
APP FEATURE 5
See your impact, it matters
Ripple’s Activity page keeps users updated with the latest project developments and their friends' activities. Users can tag project members, engage with posts through likes, comments, reposts, and shares, and connect with peers. This interactive feature enables users to visualize and enhance their positive impact within the community.
REFLECTION
Post-project thoughts!
This was my first UX project and my introduction to product design and human-computer interaction. I'm incredibly grateful to my team members, Wendy and Ish, who navigated this crazy project with me through its ups and downs and made it such an enjoyable experience. 💙
I've learned so much about the design process, from understanding our stakeholders and problem space to prototyping our ideas to life with Figma. This project has taught me so much, and I wanted to share just a sliver of experiences and learnings I’ve gained from it.
🪡 The UX design process is detailed and intricate
From ideation to building, I never could have imagined the level of consideration and detail designers and researchers put into every aspect of the process. Even things like choosing what type of research method to use or simply narrowing down a specific problem space to research required an immense amount of collaboration and iteration. This project has given me a newfound appreciation for the meticulous and empathetic work that designers do.
Having a diverse team really makes a difference in research and design. As a statistics major, I loved seeing different viewpoints in communication design and cognitive science. Everyone’s unique perspective helped us tackle problems from new angles and come up with creative solutions that I wouldn’t have been able to come up with alone.
🧑🧑🧒🧒 The more the merrier