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, take classes 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 an efficient, engaging way with better social connectivity.

 

Group

Rubi Aliaga, Sophia 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 weeks

 
 
 

Step 1: DISCOVERY/RESEARCH

 
 

Task Analysis

Task Analysis

First we conducted Task Analysis of current mobile app to understand people's pain points and define users’ goals and what they are trying to achieve. We found people's pain points are in the navigation, finding program information and checkout flows.

 
 

Heuristic Evaluation

Heuristic Ealuation

As a quick and inexpensive way to generate feedback, Heuristic Evaluation was needed to be performed to evaluate current YMCA app and it gave a more comprehensive assessment of the app and uncovered learnability and efficiency issues as the most frustrated factors.

Journey Map

Journey Map

We observed user’s reaction through Task Analysis of the current YMCA app and found it is impossible to access YMCA program information using YMCA SoCal app. The user was frustrated all the way through the end of using the app and finally abandoned the app.

C&C Analysis

C&C Analysis

We focused on class signup, scheduling, activities while performing a C&C analysis on companies. Doing this analysis allowed us to find what users want and need.

 
 
 

Key Insights/Synthesis

  • Users are frustrated with Inaccessibility to YMCA program
  • Users (young adults) hope to have mentors and learn life skills
  • Users want to share their community involvement with their friends
 
 

Step 2: DEFINE

Persona

940 copy.jpg

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.

Persona_Quote_01-01.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
 
 
 

Design Studio + Feature Prioritization 

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 users' needs.

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

 
 

User Flow

We have come up with the ideal path through the YMCA app that makes it clear for users to browse class information, register classes, share with friends.

Information Architecture

We analyzed and interpreted consumer usability throughout YMCA app experience and successfully reinvented the app. We reorganized the overall structure yet provided creative solutions with a good sense of the overall goal of the app and then able to develop the road map to achieving it.

 

 
 

Key Insights

  • Data from research allowed us to collect, synthesize, and organize critical user data to solve users' pain points.
  • Browse information, register classes, share with friends were the main keys. 
  • 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

 
 
Free-Premium-iPhone-7-App-Screen-Mockup-PSD.jpg
 
 
 

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.