Grillz&Granola
UX Design | Implement User On-Boarding Process
Click for the prototype.
Design System
Overview.
Grillz&Granola is a MWBE certified, NYC-based fitness company that creates community-based experiences powered by women of color. They are pivoting to online classes and virtual group therapy sessions due to COVID-19.
The Problem.
The user needs a way to sign up for fitness and wellness offerings because healthy practices are hard to maintain and they want to connect with a community that will support them, especially during a pandemic. The current class sign-up flow is clunky and confusing. Users are unaware of G&G’s mental health offerings and their community events.
How might we design a seamless way for users to sign up for fitness and wellness classes?
How might we promote the Grillz&Granola brand to be memorable not only as fitness, but also as a mental health resource to support their mission of becoming a socially impactful company?
The Solution.
Streamline class sign-ups by creating a new user flow that allows users to create a G&G account to easily purchase fitness and wellness offerings.
Originally we thought that would be our only task. However, G&G was also looking to be memorable as a mental health resource for women of color.
We reorganized the site to highlight group therapy sessions, community events and mental health resources within a new Wellness page in the site.
Results.
• Decreased time to sign up for a class by 85%
• Decreased number of steps to take a virtual class by 60%
• Increased awareness of mental health offerings
My Role.
UX Designer: Research, Interviews, Analyses, Wire Frames, Information Architecture, Prototyping, Usability Test
Visual Designer
My Team.
Project Manager
UX Designer
Tools.
Figma
Google Analytics
Adobe Illustrator
Adobe Fresco for iPad
Whimsical - Remote Collaboration Tool
Project Goals.
• Streamline class sign up for live and on-demand classes
• Highlight mental health offerings
• Build up the community
Research.
Through a focus group with existing G&G users, 2 surveys with over 30 responses and 4 interviews, a theme began to emerge of how deeply the pandemic affected people’s mental and physical health.
We found that people are:
• Looking for ways to connect with a supportive fitness community
• Struggling to make fitness and self-care a priority, but they are aware of the benefits
• Wanting the process of finding fitness classes online to be clear and simple
We found common user pain points from 4 usability tests of the current site:
• People did not immediately understand how to sign up for a class
• People had trouble accessing the classes they purchased
• Mental health offerings were looked past by many users, or they did not find them at all
• Class participants were looking for more ways to connect with other members of the G&G community
Persona.
Alicia was created based on the data we gathered from the interviews and focus group.
Scenario: Alicia has been feeling pretty low and disconnected from her community since the pandemic hit. She is looking for a way to feel grounded, connect with like-minded women and exercise in order to lift her spirits during these tough times.
Journey Map.
To further identify the pain points, I created a journey map to show how the current user flow is making Alicia feel.
This map was presented to the stakeholder to show where the user was getting frustrated and the specific pain points in the process that we would later fix.
Opportunities.
This journey map helped my team and I identify key opportunities:
• Offering a preview of the class so people have a better sense of what to expect in class.
• Simplify and streamline the process of purchasing a class - limit scrolling, offer calendar visual towards the top, make account creation very clear
• Clearly show upcoming community events (virtual and in-person) where people can continue to connect.
• Rework the information architecture of the site so that users can easily find mental health resources, community events and fitness classes
Design Studio.
My three teammates and I quickly sketched up the first thing that came to mind for each screen after synthesizing our data. We looked at the pain points and at close competitors to start generating ideas for screens. We then compared what each of us came up with, combined some of our favorite elements and started iterating.
Account.
We saw many of the competitors successfully use account creation to streamline class sign up and house users’ personal class schedule. This would be a completely new feature for G&G and would help their community easily access and view their virtual classes.
Home.
We wanted to add a daily class schedule to the home page so that when users land on their site, they can sign up for a class without having to search through the pages. G&G’s mission is placed at the top so users know who they are and what they stand for.
Schedule.
The schedule was a new feature. We started out thinking about implementing a filter menu so that users can filter by class type, instructor and date. This schedule continued to evolve through our iterative process.
MindBody software is commonly used in the fitness and wellness industry to schedule, handle payment and gather information on who the gym/studio members are. We looked at competitors who embedded the MindBody schedule onto their site and began altering our design to fit the familiar format.
Low Fidelity.
We combined the elements of our sketches that we thought addressed the needs of the user best to create a Low Fidelity prototype and conduct usability testing.
Account.
We added a Weekly Tracker as a gamification feature to keep users motivated to continue their fitness/wellness journey - a common problem for people that are working out from home. If they take 5 classes in one week, they get one for free.
We added a place where users can see how many classes they have purchased, recommended classes to take in the future and G&G’s Instagram feed to foster a sense of community.
Home.
The homepage immerses the user into who G&G is, what they stand for and how to participate that day.
Upcoming Community Events was added to the homepage to show that they are offering opportunities to build relationships with like-minded people to foster a sense of community.
Schedule.
The first pass at the class schedule page included a breakdown of the class and an easily scannable schedule that displays 2 weeks of classes at a time and is congruent with MindBody software that the business plans to implement in the future.
Usability Testing.
Findings from 9 usability tests:
• Replace text with visuals wherever possible
• The site feels like an intense, fast paced fitness brand - added visual elements could contribute to a softer feel to reflect the wellness component
• ALL wellness and fitness offerings should appear on one daily schedule on the homepage to limit excessive scrolling
• Add testimonials
• Instagram feed on Account Page feels impersonal
• Unclear whether classes on the Account page are upcoming or previous classes
• Format of the Account page would not jive with developers (we tested our lo-fi with a developer and worked with them to understand how to reformat the page)
Data Informed Design.
From here we began iterating on our Lo-Fi based on the feedback we got from testing. That feedback combined with a competitive analysis and qualitative data gathered from talking with current and future users informed each of our design decisions.
The following shows some of the final High Fidelity screens with corresponding reasoning for each key element:
Home Page.
Global Navigation.
Classes Page.
New Group Therapy Page.
Usability Testing.
Findings from 4 usability tests:
• Users liked the immersive, large hero image on the homepage because it gives a small preview of what their classes are like.
• Class sign-up feels easy and straightforward
• Further cohesion between wellness and fitness offerings through aesthetic changes
• Weekly progress (aka the Trapmeter) made users feel motivated
“Thank you so much for working with us! It has been an absolutely wonderful experience. Your work has inspired and ignited us to keep going!“
— Chavonne, Founder