Man-Holding-iPhone-7-Mockup.jpg

Mobile app for YMCA 

Los Angeles

BRIEF

 

YMCA is a non-profit organization that is located in all 50 states of the US, but many local YMCAs have their own mobile apps. Los Angeles is one of the big cities with many communities that uses the mobile app of its own. Our challenge was to re-invent the YMCA app for Los Angeles so young adults can connect better with each other and get involved in their community through the YMCA app.

PROBLEM

 

SOLUTION

Lack of clarity of navigation makes it hard for users to access the class information and share it with friends.

 

Create a YMCA mobile app that strengthens the foundation of community through youth development and engages young adults into accessing information in a very efficient engaging way with better social connectivity.

 

Group

Rubi AliagaSophia Lee, Jacob Kim, Jongho Lee

My role in group

  • UX/UI designer
  • Researcher
  • Information Architect

Tools

  • Sketch
  • InVision
  • Axure
  • Illustrator
  • Photoshop

Category

iOS app design

Timeframe

2 week

 
 
 

Step 1: DISCOVERY/RESEARCH

 

RESEARCH

 
Affinity Diagram

Affinity Diagram

 
 

First we conducted Task Analysis of current mobile app to understand people's pain points. Heuristic Evaluation helped us to analyze usability of the current app. We observed users' emotions through Journey Map, identified opportunities to differentiate the app from competitors with C&C Analysis.

Lastly organized the data into Affinity Diagram toward the end of our research process. Affinity Diagram allowed us to sort through the data and identify key problems our users are experiencing and helped us to further define users' pain points.

 
 

Key Insights

  • Research enabled us to collect, synthesize, and organize critical user data to define users' pain points
  • Users are frustrated not being able to access programs YMCA offers
  • Users want to share their community involvement with their friends
 
 
 

PERSONA

Based on the research found a persona was developed, Lily Richards. Designing for Lily helped in making informed design decisions as we had the end user always in mind.

 
 
940.jpg

Who She Is

  • Recent college graduate
  • Owns a smart phone
  • Wants to learn to manage finance

What She Wants

  • Easy access to expert advice
  • Explore community events
  • Share info with friends through app
 
 
I wish my school made it mandatory for students to take a class on how to manage their finances.
 
 
 

Step 2: DEFINE

 
 
Design Studio

Design Studio

 
 

What are the KEY problems our users are experiencing?

Based on user research results, we started brainstorming ideas to improve users' experience solving users' pain points. And several sessions of Design Studio helped us explore opportunities and innovate products to better serve customes needs.

Site Mapping, several sessions of Design Studio, Feature Prioritization were used to define clear direction on how to solve users' pain points.

 
 
 
 

Key Insights

  • Data from research allowed us to collect, synthesize, and organize critical user data to solve users' pain points .
  • Users want to share it with their friends
 
 

Step 3: DESIGN

 

Prototype + Test + Iterate (hand sketch & paper prototype)

Based on user research results, we started identifying users' pain points.

 
 
 
 
 

Prototype + Test + Iterate(Medium-Fidelity Sketch Mockup)

With our medium-fidelity Sketch paper mockup, we have users register the class and share it with their friends.

 
 
 

Prototype + Test + Iterate (High Fidelity Prototype)

We applied product branding, grid structure, typography, color scheme, and icons to develop a high fidelity prototype. We made it interactive with tools like Sketch and InVision. This allowed the team to easily distribute and observe exactly how well the app would function before it gets developed.

 
 
 

Home Screen (Old & New)

Docked Global navigation with a hint of Sub Menu helps users to navigate around YMCA app easier.

 
 
YMCA_HomeScreen_Comparison_01.jpg
 
 

Old

New

 
 

Home Screen with Sub Menu (Old & New)

Newly designed small Sub Menu from hamburger menu overwhelmingly passed Usability Test with access to user's account.

 
 
YMCA_HomeScreen_Comparison_02.jpg
 
 

Old

New

 
 
 
 
 

Key Takeaways

  • Clear CTA helps users to take action while using the app. Crafting a simple and intuitive design requires understanding the people we are designing for, what they are trying to accomplish, how do they describe the problems with their words, and the steps they need to take. It requires understanding the context of those interactions.
  • Social Media connectivity would connect people more and boost the numbers of users. For us is was essential to develop empathy with the users, to develop the users’ observational skills, and to instill the knowledge of how to combine different aspects of our product into a single, smooth interaction.
  • User research and testing are key. Collect as much quantitative user behavior data as you can, then analyze and categorize them to make sure you have solid qualitative data to ensure we're solving the right problem. Design, get user feedback, and iterate fast.

 

What's next?

  • More testings on how people might use this app, and how the interface should change based on their behaviors.
  • Improving class search and YMCA news.