Exit
LUKE MANIMALA
// design

Creating a concept fitness app for the YMCA brand

context

I designed this conceptual bootcamp mobile app as a concept for the YMCA brand.

tools

Sketch, Illustrator, InVision, Principle

timeline

3 weeks

I was challenged to design a mobile app that increases YMCA engagement and membership among millennials. As an educational project, I served as the lead designer, product manager, and primary stakeholder. I focused on app functionalities that aligned with the YMCA mission and users.

My design effort began with domain discovery, and included brand identity design, UI product design prototyping, and a marketing website build.

Domain discovery

I did an analysis the competitive landscape within the digital fitness space and found theYMCA to be well established as a community health organizer. In order to make the brand compete amongst leading fitness apps, I looked at a multitude of health based solutions on the market. I paid close attention to each competitor's target customer, culture, voice, feel, and impact.

No items found.

I then looked to the YMCA brand which has a rich history dating back to 1844. They’re a generational proponent of physical and community health and are iconic in American fitness culture.

Some phrases I found when doing research on the existing YMCA site. 

The Y is a non-profit with a large facility infrastructure that serves over 17.5 million individuals in over 10,000 communities. I took a look at the app branding with reference to the YMCA brand values.

Customer: The Y is an accessible gym and that aims to extend their outreach to as many users as possible regardless of economic, fitness, or cultural background.

Culture: The YMCA is a community organization focused on helping members in their journey to be healthy, not sexy. Honesty, kindness, and diversity are central values to the Y culture.

Voice: The YMCA voice is kind, inspiring, and optimistic. The app voice must be energetic enough to motivate but understanding to the individual's ability.

Feel: The Y fitness app should have the modern and minimalist aesthetic that's currently popular in fitness apps.

Impact: This app should unlock gym functionality, motivate with positive fitness content, and encourage gym community for users.

Visual identity exploration

Next, I develop divergent concepts for visual aesthetics. I created two concepts which were counter to one another but still representative of the YMCA brand and value.

Mood and style tile generation

The first visual direction was the "You" concept, communicating a sense of strength and drive that empowers the user to take action. This concept was focused on positivity through self determination and gratitude.

No items found.

Next was the "Us" concept, expressing the feelings of community and belonging. The goal was to bring people together to form a collective that is stronger than the individual.

No items found.

Product name exploration

Building off the YMCA brand attributes and style concepts created, I began to iterate on names. Looking to create a name that was unique but recognizable to the YMCA org, I ideated by name concepts with a word map.

Then I explored the best names in greater detail by visualizing how they might look as logos.

Finally, I determined my strongest name for the app was “Better” because word better consistently appears in YMCA brand marketing and the name could be used with regard to the app's value proposition.

Designing a logo

I vectorized a handful of logo concepts, each with different levels of emphasis on the word “Be” within “Better”.

Several variations of the Better by the YMCA logo.
Some compelling logo concepts were designed with the You concept in mind while others were centric to the Us concept.

At this point, I decided to move forward with the "Us" visual direction because it was most aligned with the YMCA’s presence as a community centered organization. Following this decision, I animated the logo to give a subtle nod to "Be" without add complexity to the lockup.

A logo that says Better by the YMCA, where the remaining letters slide out from behind the first two letters B E.
A logo animation which could be used during app startup or signature moments
No items found.

Solution

The solutions I prototyped were functionalities that appeared compelling for the YMCA member and millennial users. I designed in-gym functionalities, a digital class player, and a routine playlist for users to workout at home.

Hi fidelity screens

I created a class and activity scheduler that would allow users to view the current schedule availability and sign up accordingly. This include exercise classes as well as community events.  I also provided a QR feature which would allow a user to pull up a digital ID tag to be scanned at gym facilities like the entry desk, equipment rental, or upon entering a class. Finally, I created a navigational element that would direct users to a “Staff & Members” page to promote community within the gyms and help users find the appropriate employees for their concerns.

Two screens on iphones, the first is a menu of user functionalities at a gym, the second a gym class reservation module
The Your Club tab includes class and activity reservation module, a staff and member directory, and a QR check in FAB.

I also created a live or prerecorded class player that would allow users to stream classes to their phone from anywhere. The visual aesthetic for the live classes player was designed to contrast the menu experience and invoke a focus state in the user.

Two screens on an iphone. The first shows the menu, the second a live workout class.
The Workout tab includes live classes for long format workout videos lead by an instructor.

Finally, I created a workout routine player to give users a curated routine from YMCA trainers. The visual aesthetics in this solution are also dark, like a theater mode.

Two iphones showing a workout routine player
A workout routine player for individual exercise


I accompanied the routine player with an interaction design depicting the motion the next exercise thumbnail and title advancing to the current position while the progress tracker at the bottom also advances.

Marketing Site

My final effort for this project was to design and build a marketing site that could be used to promote the app and funnel users to the Android and Apple app stores. I used a web application called Studio.design, which allowed me to design and style the page at common desktop, tablet, and mobile breakpoints. This app also allows for responsive dimensioning, allowing for the design to work all screen resolutions. The marketing website I designed is hosted as a free site on a studio.design domain. You can check the website out in detail by clicking here.

By the end of this project, I had created a comprehensive brand and product design which included a prototype, a marketing website, and a style guide that could all be used for further development and iteration on this app.

No items found.
next case study