─ BACKGROUND

What's the Story?

I was tasked with creating the visual design and brand system for a mobile platform that reimagines how people can find and engage with fitness recommendations, and health plans using what the YMCA has to offer. 

User Persona

Timeline

─ RESEARCH

Competitive Analysis

The athletic app space is extremely saturated, so there is tons of data to learn from. I selected six different competitors to see how they were designing workouts, nutrition trackers, goal tracking, and overall brand presence.

Strava• White background creates a clean layout with attention brought to orange elements
• Icons, graphics, photos nicely break up text 
• Sturdy, sharp elements and photos of males makes the app appear more masculine.

Weight Watchers• Bright and cool color scheme is balanced with whites and greys
• Large cards with photos and texts create intrigue without being overwhelming
• Strong hierarchy with font type and size, boldness, and row separations

Nike Training Club• Mostly grey scale color scheme where colors are reserved for photos & logo
• Dynamic photos with text overlay are the main focus
• Focus on fitness, classes, merchandise

My Fitness Pal• Too many strong colors on some screens
• Cluttered feel due to little white space and unclear text hierarchy
• Nutrition counter is a calculator and pie charts utilized for calorie breakdowns.

Planet Fitness• Bright yellow & purple color scheme brings energy.
• Just enough information on a page. 
• Exercise focus with ability to connect to Planet Fitnesses’ gym

Peloton• Simple grayscale color scheme, thin icons, and light font creates high-end feel 
• Strong red accent color is used sparingly to draw the eye to active elements
• Heavily image based with focus on people, Content focuses on fitness classes

Trends

Color Palette: The most effective apps utilized a crisp, neutral color scheme which appeal to both men and women. However, these apps often lack energy.
‍Photos and Icons: Photo overlays and card layouts are common. Photos of people being active seem most effective to inspire activity. Most icons are bold and square, with the exception of peloton using very thin and elegant iconography.
‍Hierarchy: Most effective with the strong use of negative space, with font size and color guiding the eye.

─ BRAND NAME

Brand Name & Logo Exploration

Brand Adjectives

I had to brainstorm what adjectives would encompass the brand before exploring visual ideas. Since the product would be a YMCA sub-brand, my goal was to transform the YMCA's current values to embody a fitness app. I saw that the YMCA's commitment was to help everyone reach their potential, in three areas: youth development, healthy living, and social responsibility. I landed on the following three brand adjectives.

Warm

Energetic

Youthful

─ LOGO

Name & Logo Exploration

I started brainstorming names and logos which encompassed these adjectives. I decided on the name "Solarfit" because it most clearly communicated warmth, energy, and youth. “Solar” was inspired by the external energy of the sun combined with the internal energy of the human soul. After tons of iteration, I narrowed the options down to three logo ideas.

Final Logo

I landed on this logo because it sparks a feeling of joy, is most unique to other apps, and is memorable. It also received the most positive feedback from the wider design team.

─ STYLE TILES

Convergent Directions

I created two divergent styles which fulfilled the user's need of feeling motivated to workout in a warm, energetic, and youthful way.

This style reflects a clean minimal layout achieved through negative space, geometric shapes, cool tones, juxtaposed by a refreshing splash of zest through bright, cool photography. This style takes a holistic approach to health and fitness.

This style was inspired by retro pop-art elements and contains bright colors and bold typeface, in order to bring forward the unstoppable energy associated with being young to solve the problem of lacking motivation.

Chosen Direction

I chose the second concept because it's competitive vibe and energetic elements solved the user’s issue of lacking motivation. It also stood out in the current landscape, where most apps were plain and afraid to use color.

─ UX ANALYSIS

Wireframe Analysis

The previous UX team did most of the heavy lifting on the navigation, information architecture, and labeling and provided some wireframes for me to transform into a visually appealing UI. After analyzing the wireframes, I noticed the nutrition pieces would provide an interesting UI challenge as they were most text-heavy.

─ HI-FI SCREENS

Final Solution

After one round of user interviews and minor iterations, I presented the following final solution.

Onboarding
‍The user is introduced to the solarfit brand with an exciting, energetic voice to get ready for their fitness journey.

Track your Nutrition
‍The user sees how many calories they have remaining so they can plan the remainder of their meals to hit their target.

My Progress
The user can track and update their long-term progress of personal goals, and celebrate successes with friendly statistics.

Marketing Site

I designed a desktop and mobile marketing site in order to show off all the great features of the app and encourage people to download it.

Desktop Version

Mobile Version

─ STYLE GUIDE

Style Guide

I created a Style Guide to capture all of the designs, branding, and patterns I created for the product to give to other stakeholders.

─ CONCLUSION

Takeaways

In addition to having a lot of fun creating this brand, I learned how to: 
• visualize information to help users make decisions
• create an effective logo and branding guidelines
• working independently and confidently to make UX/UI decisions