YOU x YMCA Home Dashboard
Eric Saber
Product Designer
YOU x YMCA
An all-in-one health solution in your pocket. By the YMCA.
About the Project
Role: UI/UX Designer, Brand Identity
Overview: Create the visual design for a mobile app that reimagines how people engage with the YMCA
Deliverables: Style Explorations, App Design Mockups, Mobile Prototype, Branding and Logo Design, Marketing Site, Style Guide
Tools: Sketch, InVision, Photoshop, Google Workspace
Project length: 6 weeks
The Challenge
Fitness has changed
Founded in 1844, many of today's fitness trends can be traced back to the pioneering programs of the YMCA. But just like the world around it has changed, so too must the Y.
It is no longer the case that you can sell a membership and expect members to keep coming back—membership requires the active cultivation of community with value-added experiences.
Recognizing that it's no longer enough to simply be a passive destination, the YMCA wanted to answer a simple question:
How can we increase member engagement and meet users where they are?
The answer: Reimagine the value of the YMCA, as an all-in-one, complete health solution.
Over the course of 6 weeks, my design partner and I set out to design an app that engaged members by offering them the guidance they need to achieve their health and wellness goals, wherever they may be. The resulting app, YOU x YMCA, offers members health plan recommendations from expert coaches, nutrition tracking, custom individual workouts, and one-tap bookings for on-site workout classes.
YOU x YMCA is designed to be a digital fitness destination for all, a member passport to the Y, and a call to members: to play more often, to set goals, to try something new every day, and to grow into a healthier version of yourself.
Some of the original wireframes handed off to us by the previous UX team.
The Approach
Erin, The Overworked Educator
Time to get moving
Prior to beginning the design process, we needed to understand two key components: who our target audience was and what competition was out there already. The project brief tasked us with creating the visual design for the app, but it also required us to utilize the user research conducted by a prior UX team in order to produce our high-fidelity designs.
After combing through the previous team's wireframes and research, we learned more about our target user, via the user persona they created: Erin, the overworked educator.
Erin is a millennial educator with limited time, who needs expert health advice, is looking for flexible workouts, and desires accountability and discoverability.
Whenever we got stuck in the design process, we always were able to turn back to Erin and ask ourselves whether we were adequately meeting her needs.
Looking at the Space
In the digital fitness world, there's more competition than ever before. How does one stand out?
The YMCA's strong heritage, supportive community, and planned feature set for the app were a great start as far as uniquely positioning it as a great alternative to digital-native competitors. But it's still critical to fully understand what already exists out there. When we began assessing the competition, we wanted to examine how we could differentiate the app not only from a visual perspective, but also discover any gaps that other apps had in terms of what they offer.
We selected and analyzed both direct and indirect competitors to gather as much insight as possible into the aesthetic and branding choices they made. Additionally, we evaluated the overall user experience and feature-set, so when it came time to design our own solution, we were well-informed about how the app could stand out from these more established players in the market.
Key screens from the competition.
Upon evaluating the competitive landscape we created an affinity diagram. We uncovered the following strengths, weaknesses, and opportunities:
Strengths
Visually, there didn't seem to be one common color scheme or recurring motif (unlike in many other industries), but the apps that felt most useful and personable were the ones that used color combinations which felt complementary. Most apps had clear and easy-to-understand CTAs, and most also had a nice balance between imagery and white space. Nearly every app, despite aesthetics, was very intuitive and easy-to-use with little onboarding required. From a feature standpoint, video figured prominently into half the apps evaluated, which bodes well for the direction of YOU, with its tailored individual video workouts.
Weaknesses
Not every app used color in a balanced way. Runkeeper was the exception, but most apps seemed to be either too sparse or too overwhelming with their brand colors. Additionally, visual hierarchy of app elements was only so-so. As for experiences that cross over into the real world, only Planet Fitness offers physical locations where you can attend in-person classes.
Opportunities
There is an opportunity to leverage the sense of community and brand-awareness that the Y has, which could be a differentiator. Additionally, the Y's dedicated, approachable coaching from real-life experts could be a big draw compared to some of the more elite or potentially daunting fitness apps out there, such as Nike Training Club.
From a UX perspective, most of the apps had a singular focus, with either meal logging or fitness, but not both. Many apps required users to connect to other apps to get the whole solution, and while this is not necessarily a weakness (depending on the user), it's certainly an opportunity for YOU, given it's aim to be an all-in-one package.
Lastly, a big opportunity exists in target demographic. Many of the apps seem to be geared more toward a male-centered experience, so there’s an opportunity to give the app's vibe a more neutral-to-female-centric experience.
The Concepts
Into the (retro) future
With our research in the rear view mirror, my design partner got to work on designing four divergent style tile concepts to bring to stakeholders. Our designs were influenced by the information we gathered from assessing the competition, but also by adhering to our key user persona's attributes.
Each style tile goes in one of two directions: calm and inviting, or energetic and dynamic. We thought this might motivate our user in different ways, either by being approachable, clean and friendly, or by drawing her in with slightly more dynamic visual components.
Concept A - Airy Holistic
The Airy Holistic concept warms you to the core with its nature-inspired palette of red-oranges, brown and green. Natural textures (produce, Capiz, stone, rattan, etc.) lends to the holistic design aesthetic, sustainability, and spirituality. Rounded and soft sans serif typefaces provide a casual, kind, supportive, and community-focused tone. The imagery will be full of daylight (golden hour, sunsets, etc.), joyful expressions, families, and nature -- all things intrinsic to a high quality of life.
Concept B - Clear Day
The YMCA's new app helps you climb past your fitness goals. This concept is all about focus on becoming the best version of yourself in a straightforward manner. This style is clean, direct, and minimal in terms of visual noise. Negative space is used intelligently, to focus on the goals for the day. Clear and clean sans serif typography is implemented to be legible with no frills. It's time to clear your head, get moving, and find calm in simplicity.
Concept C - Club Workout
The YMCA wants to put you in the driver's seat of your health. This concept is about feeling the afterglow of a good workout. Exercise and improving your health should be fun, like dancing to your favorite songs in a club. Hints of neon and warm gradients against a dark backdrop add to the kinetic, active vibe of getting fit on your own terms. Clear, but slightly quirky typefaces inject the app with a little personality. The YMCA is ready for you to come and have fun, at home, or in person.
Concept D - Retro Futurism
Retro Futurism combines a cool set of grays and blues with smooth, metallic surfaces to suggest self-reflection and geometric shapes to invite the user to use their imagination to play. We’re gathering both young and old back to the YMCA with its retro charm and old-school values, mixed with a hint of a futuristic aesthetic. Using sans serif typefaces provides users with distraction free instructions that help them focus on their workout routines. The imagery will have industrial surfaces and textures as a backdrop. Instructional videos will define body shapes and outlines from various angles, teaching proper form.
This concept was chosen by the stakeholders to design and implement.
The Evolution
Developing the Visuals
With the Retro Futurism concept selected by our stakeholders, my design partner and I began the design process by actively collaborating on a few key screens of the app before going all in. Below are a few samples of the initial concepts we developed together, including a Home Screen concept (left), Navigation overlay (center), and Workout Video playlist (right).
Back to the Future
While we were mainly tasked with creating the visual design, brand identity, and marketing materials for the app, we were also permitted a degree of flexibility in expanding upon the functionality from the wireframes, particularly if it meant improving the overall user experience.
To that end, one of the main areas where we actively collaborated was in the development of the Home Screen as seen above (and below). The prior UX team had not developed a "true" Home Screen, so we decided we needed a space for the user to land upon the app launching, that could serve as a dashboard.
Our goal was to present the main actions users could take in very clear and actionable ways, but a key stakeholder gave us feedback that our first iteration of the Home Screen (above, left) could use a little work in terms of its clarity of function. It was suggested that we eliminate the FAB (Floating Action Button) because it caused some confusion as to where the user's primary action should be taken.
Below are the next iterations of the Home Screen which we worked on alone, together. My partner developed the first two styles (left) and I developed the grid style dashboard with photos (right).
Iterating Alone, Together
After working on these different versions of the Home Screen, and getting additional feedback from our stakeholders, the grid-style home screen was selected as the clearest and most aesthetically pleasing version, so we proceeded in that direction.
At this stage in the process, we took a step back to look at the original wireframes and assess how many screens we needed to design, which ended up being over 80! Given the accelerated timeframe for the project and the large number of screens needed (in addition to other assets), it was necessary us to be judicious with our time.
We decided to divvy up the design of different areas of the app's functionality. Since we now had a clear idea of our app's visual language, and because we were sticking strictly to Google's Material Design guidelines, we were able to design in parallel, with confidence that the app would have a consistent look and feel across screens no matter who worked on any section.
It was at this point, that I took on the design of these areas within the app: onboarding, nutrition tracking, account settings, as well as the personalized expert chat functions. Onboarding in particular was a key area to streamline, so users are able to easily get tailored recommendations and advice from a real coach in the "Coach Chat" section.
My partner worked on the creation of the workout video, classes, and goals screens.
Below is a sample gallery of some of the key screens that I specifically designed:
Final Iteration
After coming back together to consolidate our work, we ended up creating a fully functional prototype for user testing and feedback. Below are a few more key screens that showcase the final iteration of the app:
Responsive Marketing Site
In addition to designing and constructing a complete high-fidelity prototype with my partner, I designed a branded mobile responsive marketing website landing page, which showcases the app's capabilities and services, and instructs users how and where to download YOU x YMCA.
Scrollable mockups can seen to the left and below.
User Testing and Methodology
My partner and I conducted a round of desirability and usability testing for our final iteration of the YOU x YMCA app. This was conducted with a few users who, like Erin, wanted to maintain a healthy lifestyle. We selected users who also had familiarity with fitness apps, in order to validate whether or not our solution was serving its purpose. For this round of testing, we used a mix of quantitative and qualitative methods, and we primarily solicited feedback on the user experience through the completion of a series of tasks.
We asked users to rate each task on a scale of 1 to 5 in terms of difficulty or ease (with 5 being very easy). We gave users different fictional scenarios as part of "a day in the life" of a busy, health-conscious person, and then asked them how they might go about performing the action. For example, we might say to the user, "Now that you’ve completed a workout, you’re looking forward to booking a class in-person. Try booking a Zumba class." We also asked users to rate how engaged they felt using the application overall.
Lastly, participants were instructed to “think aloud” and share their thoughts throughout the test. After the app was presented in its entirety, participants went through a debrief to ascertain general visual desirability feedback and to gather their overall thoughts on the experience and visual presentation.
Results and Key Takeaways
The overall experience of using YOU x YMCA was perceived as being mostly easy-to-use, and well-designed. However, we did learn that there was some difficulty for users in understanding how to make edits to their goals in the Goals section, and in some cases users mentioned that skipping exercises had room for improvement.
Participants found the initial onboarding experience to be clear and concise and they found the main home dashboard, navigation, and labeling to be intuitive and easy-to-understand at first glance as well. The majority of task ratings were ranked either 4 or 5 in terms of ease-of-use.
The few task ratings that fell below those numbers were centered around functionality that could be modified and iterated upon fairly easily in a future version.
Participants said they found the aesthetics (and the overall experience of the app) to be pleasant, and that they would use the app themselves as well as recommend it to others. This left us confident that with slight tweaks, YOU x YMCA (with its all-in-one interface to manage users' fitness and nutrition goals) could be an excellent addition to a crowded marketplace.
Lessons and Future Recommendations
YOU x YMCA taught me a very important lesson: how to collaborate with another designer. Before this project, I had limited experience working as part of a design team to deliver a final product, and it was both fun and challenging to work towards finding a common and unified visual language and style with another designer. I also learned how to truly design for the user and not get too attached to my own personal vision.
That said, if we were given more time, I would like to rework and improve upon the user flow within the Goals section, which seemed to trip up a couple users we spoke with. I also would iterate upon the functionality within a workout playlist, (such as the ability to skip an exercise), as that was also a point of confusion with one user.
As far as the future of this project, in addition to creating the core app, the branding, and responsive marketing site, we developed a style guide for future caretakers of the app, to fully understand and utilize the assets we developed.
At the end of the day, working on YOU x YMCA ended up being just like a good workout: incredibly challenging and difficult at times to push through, but ultimately very rewarding and fulfilling.