Good Mood Method

Responsive Web Design & Branding

Client Project: Good Mood Method

Duration: 125 hours over 2 weeks

Project Brief

Good Mood Method is an independently run personal trainer & wellness company that provides fully customized fitness programs. Founded in 2020 and based in Toronto, owner Gilad Miller built his business through word of mouth and on Instagram. Now relocating to Vancouver, Gilad is completely starting over.

Given the current pandemic, Good Mood Method workouts are administered both in person and virtually. With​ so many approaches to movement, Good Mood Method helps to show that there’s no reason for anyone to ever feel stuck or lost in their journey to wellness. They focus on movement that optimizes the rest of the day: making working out accessible, effective, and life changing for individuals of all levels to help them achieve their namesake good mood.

Currently, Good Mood Method is using a third party website to book services (see below). The website itself has minimal information and does not have a cohesive vision or share what Good Mood Method is really all about.

Goals & Objectives

As the UX Designer I was tasked with:

• Defining and developing new, coherent branding, that aligns with its intended customer experience

• Designing a responsive website that increases interaction and engagement: more user sign-ups for initial consultations, an increase in followers on their Instagram page, and boost merchandise sales

• Creating a consultation booking experience that is intuitive for users and helps translate to more sales

• Developing a site that can seamlessly grow with Gilad and his new company

Research

Main Goals

• Identify users’ motivations to book a personal trainer

• Identify users’ expectations when booking a personal trainer

• Understand the reasoning behind users' decisions when selecting a specific personal trainer

• Define why users would choose a personal trainer versus self-training or group classes

Methodologies

Competitor Analysis

Evaluate both direct and indirect competition of Good Mood Method to assess features and offerings 

User Interviews

One on one questioning to gain insight and understanding of the user’s experience working with a personal trainer: decisions, pains, frustrations, goals, and motivations

Surveys

Reach a wider audience to gather insight and understanding of general health and wellness habits, as well as likes/dislikes of fitness instruction

Key Research Findings

User Goals

• Want to see results (while the definition of results varied from participant to participant, results included seeing physical changes such as building muscle and losing weight, as well as more emotional and mental changes— feeling better, feeling energized, etc.)

• Learn the proper skills and techniques to be able to apply in their personal lives (alignment, posture, workout techniques, breathing exercises, meditation, etc.)

• Be with a trainer that genuinely cares about their wellness and fitness goals, not just there for the money

• Achieve wellness in mental health & mood

Notable Findings

• 92% of survey participants work out for their mental health

• 89% of survey participants work out for a better mood

• 60% of survey participants work out for aesthetic reasons

Price was the number one reason why my survey participants reported not working with a trainer. 100% of my interview participants possessed the same fear — that working with a personal trainer would not always equate to the cost financially. However, if they felt they were getting a great workout and learning new things, they could justify the expense. After a little digging, it became clear that the definition of a “good workout” varied from person to person.

Challenges

The main challenge I encountered during the research phase was due in part to the pandemic and the time constraints of this project— my pool of interview participants was somewhat limited. While all of my interview participants had worked with a personal trainer at some point in their lives, only one individual was currently working with one. This raised a concern of accuracy for me, especially needing to recall emotions, frustrations, etc. It is worth noting though, that of the individuals I interviewed, I managed to find a very diverse set of participants. Additionally, my survey results were gathered from a larger pool (65 responses), which I feel helped to balance this out. Since the current clientele of Good Mood Method varies (in regards to exercise/athletic experience and ability, age, location, and motivation for using a personal trainer), I would have loved to been able to do further research and focus on more specific demographic requirements.

Additional Research

After conducting the initial round of research, I went back to continue looking at competitors— particularly at specific brands or trainers mentioned during the surveys or interviews. This provided extra insight that would later help to define the important features for the site.

Define

User Persona

I synthesized the information gathered during my research by developing Good Mood Method’s ideal user: Angela “Angie” Gannon.

Characteristics like age, gender, location, and occupation were determined by averaging the responses in my interviews and surveys. 

There were many similarities among my interview participants, particularly in regards to their motivations, goals, fears, and frustrations. This reinforced what personality and feelings Angie would possess.

My participants also provided detailed information about their workout experience. This included apps, websites, names of their trainers, accounts they follow on social media, etc. This information helped shape Angie’s favorite brands and tell a story that best represented her.

Project Goals

After summarizing and organizing the responses from my surveys and interviews, as well as referring back to the needs of my stakeholder, I was able to compile this information and show the main goals of the users and the client. I noted any shared goals, which would later help me when determining priority features for the site.

Product Roadmap

With a clearer definition of the goals (which was backed by research), I developed a road map to establish the product features for Good Mood Method’s site. I prioritized this list based on need, urgency, and time required to develop.

Site Map

Taking all of this information into account, I created a site map to establish the structure, relationship, and hierarchy between content throughout the design.

Later, as I began working on the lo-fi wireframes, I realized that some pages in the site map did not need to exist as it’s own entity and could function as a pop out modal. Alternatively, some elements of the site needed to be living on their own and not nested under another page. As I continued to move through the design process, additional alterations were made to the structure (majority of these changes were based off of information obtained during the usability testing).

Sketch Ideations

I developed multiple sketches of possible layouts for my client’s site using my research, site map, and product roadmap as a reference. My priority was to highlight the most important information based on the research findings, and focus on incorporating the most necessary features to accomplish the project goals.

Task Flow

I created a linear flow to show how a user would book a consultation through the site as well as purchase merchandise. As those were the most complicated tasks that the user would likely encounter, I wanted to highlight what steps would need to be taken to achieve the proper results.

Similarly to the site map, changes were made from this version— most notably the removal of the “Consultation Form”. Omitting this optional step was an effort to streamline the process and curb potential drop off of users.

User Flow

Taking these tasks into consideration as well as using the site map for reference, I made a comprehensive flow with potential decisions a user would face as they landed on the site and how they related to one another.

Product Requirements

Referring back to the user flow and task flow, I made a list of product requirements (necessary pages/modals as well as detailed elements and overarching goals) that would permit users to successfully complete the main tasks.

Tasks included:

• User arrives to homepage and wants to book a consultation with the trainer

• User arrives to homepage and wants to purchase merchandise

• User arrives to the homepage and wants to learn more 

Design

Lo-Fidelity Wireframes

Continuing my research of the fitness and wellness industry provided added inspiration to my initial sketches and helped fine tune the layout of the site. By placing an emphasis on my key research findings, I was able to confidently solidify and prioritize what information was required for the site. While the nature of the site and the services offered were not overly complicated, I still focused on presenting the information in a way that was easily digestible. Keeping all of this in mind, I created the lo-fi wireframes that would act as my foundation.

Responsive Wireframes

From here, I worked on creating responsive wireframes for tablet and mobile

Branding

Establishing the components of the Good Mood Method brand was a major piece of this project. Taking a consultative approach, I worked closely with the client as we discussed his expectations and vision for the branding of the company and how he wanted Good Mood Method to be perceived.

Mood Board & Style Tile

To gain inspiration, I made a visual mood board with imagery that effectively portrayed the tone desired by the company. From here, I developed a Style Tile to establish the typography, color palette, and iconography that would be used throughout the site. The client also provided the imagery that would be included, which functioned as a reference to ensure the color palette looked visually appealing.

The client was really drawn to italicized fonts and wanted to incorporate that in the design. I brought up the potential accessibility issues associated with italics. In order to resolve this, I steered him towards limiting the use of italics. Instead of the entire site, we focused on punchy, bold headings paired with a sans serif to be used throughout.

Responsive UI

Taking the initial wireframes and applying Style Tile elements, I developed the first iteration of hi-fidelity wireframes, including responsive pages.

Working through the designs, and in an effort to ensure a visually cohesive site, I made changes to the original wireframes. Most notably, I used full-bleed hero images across the main pages, included more CTAs to aid in accomplishing main business goals, and minor adjustments to decorative elements were made so that they were consistent throughout. In an effort to emphasize the booking consultations feature, I removed it from being nested under “Contact”. Instead, it was placed on the main navigation as its own button.

Test

Prototype

I developed a prototype using Figma. In an effort to create the most realistic experience for testing, I created additional screens as well as an overlays (for modals) to be paired alongside my existing desktop hi-fidelity frames.

Check out the prototype that was used, here

Usability Testing

Working virtually with 3 participants, I conducted usability testing on my mid-fidelity prototype. I focused on having the participants complete 4 major tasks. I documented how the users navigated the pages, if they were successful in completing the aforementioned assignments, as well as any emotions they noted. This testing later proved to be very helpful as it provided direction for changes that needed to be made.

Affinity Map

After compiling the results collected from the usability testing, I created an affinity map. By doing so, I was able to identify opportunities to improve the site based on participants’ frustrations, concerns and suggestions.

Key Takeaways:

• All of my participants left the session with a strong understanding of what Good Mood Method offers, but helped to point out any details that they felt were missing

• 67% of the participants brought up the logo without being prompted. All 3 participants felt strongly about the logo as well as the colors used throughout the site— that their use and design fulfilled the company’s intended tone

• The testing gave clarity surrounding the main navigation; some of my participants entirely missed the consultation page and went directly to the contact page instead

Priority Revisions 

Based on the findings from my usability testing, several immediate changes were made to the design. These modifications were prioritized based on the time allotted as well as the positive impact they could make to help achieve the client’s goals. Beyond these changes, I would look to continue to test and iterate to gain more insight on the users’ experience.

 Immediate Changes

• Provided more context on the homepage subheading about the main offerings of the clients

• Nested the Book a Consultation Page under “Contact” on main navigation

• Reorganized main navigation

• Added use of brand color

• Adjusted checkout process to include subtotal before placing the order

• Introduced hero font size on homepage to help company name stand out

• Provided clarification for details on FAQ page

Future Changes

• Develop Booking Portal so current Good Mood Method clients can book their workouts directly in the site, instead of using a 3rd party application

• Create pricing plan page to provide transparency and clarification around options

• Consolidate About Pages (Trainer, Method, Testimonials and FAQs) to fewer individual pages