Grillz&Granola Web Design
Background
Grillz&Granola is a MWBE certified, NYC-based fitness company that curates and creates community-based experiences powered by women of color, starting with their signature fitness class, TrapAerobics. They cater to the confident underdogs and women with curves that you don't see in magazines or mainstream fitness studios.
The Opportunity
Our team was tasked with finding a solution in regards to how customers are able to purchase Grillz&Granola's virtual TrapAerobics On-Demand class offering.
Through initial stakeholder meetings, we realized this could be addressed in a research-backed, comprehensive site redesign that better aligns their goals to highlight wellness initiatives and to become the most socially impactful fitness company.
Timeline
3 Weeks | September 2020
Team
Demi Johnson | Brianna Naolu | Eric Cho
My Role
Project Manager | User Research | Stakeholder Point of Contact
The Process
DISCOVER
Competitive Analysis
Contextual Analysis
Founder/User Interviews
Surveys
Focus Group
Affinity Mapping
DEFINE
Persona
User Journey Maps
Problem Statement
Solution Statement
Card Sorting
DESIGN
Design Studio
Sketching
Mid-Fidelity Prototype
Hi-Fidelity Prototype
Usability Testing
DELIVER
Present to Stakeholders
Recommendations
Project Goals
Discover
Kicking off Research
We first ran a competitive feature analysis of 6 fitness companies with online offerings to understand how they tackle the online space.
Key Insights:
Most competitors have clear online scheduling for classes - calendars, visuals, etc.
Most competitors have User Account creation to help users manage their schedule and payment options
Most competitors do not highlight or feature mental health initiatives, a huge opportunity for Grillz&Granola
Examining the Existing Site
We wanted to return to the existing Grillz&Granola site and dive deeper into what is currently working and what could be improved.
We ran usability tests of the site with users, guiding them through a series of tasks to gain their general impressions of the site. We also examined how easy it was to locate On-Demand class recordings as well as information on wellness/mental health offerings.
Key Insights:
Users were getting a strong sense of core business values
Users were not getting a strong sense of mental health offerings or glossed over them, resulting in them being completely unaware that that was a goal of the business
Users had general confusion around the overall layout and navigation, especially when it came to purchasing classes and locating the On Demand experience
Learning About Our Users
We still weren’t ready to jump into design without speaking directly to users to get a sense of their needs, goals, and frustrations when it comes to their fitness journeys and online fitness experiences.
Our survey and interviews gave us a general sense of what fitness and wellness enthusiasts from all backgrounds are looking for in online fitness experiences. Our focus group was with actual Grillz&Granola members- this gave us a direct look into what makes the brand special and what their users are seeking in a unique online experience.
“I like when classes are aware of people coming from different spaces, different bodies, and different capabilities AND are honest about that. They offer modifications. They allow people to come and show up as they are. No cookie-cutter mould, it doesn’t feel forced.”
- Jess, one of our interviewees
Define
Meet Alicia!
From here, we generated a persona, a fictional representation of the target user that could act as our guiding light during the ideation and design process.
Alicia needs an easier way to sign up for fitness and wellness classes because healthy practices are hard to maintain and they want to connect with a community that will support and hold them accountable
Problem
• make it easier for Alicia to purchase classes?
• raise Alicia’s awareness of accessible mental health offerings and resources?
• amplify Grillz&Granola as the most socially impactful fitness company across the site?
How might we…
We will create an accessible, well-organized, and streamlined site that encompasses the company's social impact mission and initiatives to build up/promote the community.
Solution
Design
A Restructuring
Through research and with Alicia in mind, it was clear that the existing global navigation could be further clarified.
We ran a card sort to determine how users naturally expected offerings to be organized across the site. We then generated a revised sitemap to guide how we approached page layouts and organization in our design studio.
AFTER: The Proposed Grillz&Granola Global Navigation
BEFORE: The Existing Grillz&Granola Global Navigation
From Sketches to Features
After the establishment of a new global navigation, our team launched into design. We began with design studios to get our ideas on paper before transitioning into the creation of mid-fidelity and high-fidelity prototypes that we tested with users.
Mid-fidelity wireframes
From usability testing between iterations, we received the following feedback:
Continue to simplify class sign-up flow, this was a continuous pain point for users
Push to find balance between fitness and mental health offerings, the site still energetically leads more towards intense
A calendar on the homepage needs to include ALL events, not just fitness
Enlarge the hero image on the home screen to pull users in
De-clutter personal account page, users were unsure of what was even being shown on this page
Post Testing - Let’s look at some features!
1. An Optimized Home Page
We introduced a streamlined homepage with an enlarged hero image to grab the user’s attention. We also added an overview of the class and wellness offerings schedule for quick access.
2. Clear Scheduling
We introduced a comprehensive calendar for TrapAerobics class schedule viewing, inspired by existing fitness scheduling system MindBody, eliminating the need for excessive scrolling and confusion around how to sign up for classes.
3. Mental Health Initiatives
We’ve dedicated a tab within the global navigation to wellness offerings, including but not limited to mental health offerings like Group Therapy. As Grillz&Granola aims to expand from just fitness offerings, this placement will clarify their intentions to users. Scheduling formatting for these offerings has remained consistent across the site.
4. My Account & the On-Demand Experience
We suggested the addition of a personal account page for users where they can keep track of their class history, payment plans, and class packages.
This page also introduces our solution for the On-Demand experience. Say goodbye to secret youtube playlists, the experience has been integrated directly into the site. If purchased, users can access any On-Demand classes directly through their account.
Deliver
Next Steps
Continuing to build upon wellness and social impact initiatives
Further defining the On-Demand experience- is My Account the best placement?
Delineating between virtual & in-person class offerings
Reflection
Working with the Grillz&Granola team was a fantastic experience. We managed to hit our established project goals and presented a solution that exceeded expectations. We ultimately shared what I would call a “future-oriented solution”. Due to technological constraints, much of what we suggested could not be implemented in the immediate. We were still happy to provide the team with a research-backed plan for growth down the line.
I’m proud for having challenged myself to take the lead on project management as well as maintaining consistent communication with our client throughout the duration of the project. The structure and communication that was established at the beginning of this project really allowed our team to soar. We all learned how much more effectively a team can work when clear objectives and communication preferences are set.
“ Your work has inspired and ignited us to keep going!”
— Chavonne Hodges, founder of Grillz&Granola