DG Athlete

Designing a mobile and desktop website for an online fitness training and performance company. 

Project Type

Client Project

The Team

Myself

My Role

User Research

Wireframing

Brand Design

Graphic Design

Prototyping

Usability Testing

Tools

Figma

Duration

4 months (2023)

Overview

How can we create a professional looking fitness website that converts more leads into customers through layout and design?

Overview

How can we create a professional looking fitness website that converts more leads into customers through layout and design?

DG Athlete is a fitness website that specializes in personal training and offers multiple programs based on the client’s needs whether it is body building or weight loss.

There was also a desire for potential website expansion that incorporated clothing to sell to consumers. With these things in mind, the overall goal was to combine these products in a structure that satisfied customers.

The Problem

The previous DG athlete website was not converting well and there was a strong need for an update so that customers could more easily navigate the website.

The Solution

I reordered the entire website structure and added multiple forms of media to create a welcoming and unique atmosphere. I also redesigned the fitness programs page to better inform customers about what they are purchasing.

User Interviews

I interviewed four frequent gym-goers to see what they prioritize when choosing a gym program.

User Interviews

I interviewed four frequent gym-goers to see what they prioritize when choosing a gym program.

There are numerous options and ways to access different fitness programs. My goal is to narrow down the key factors that gym-goers consider when selecting a program.

Objectives for 1:1 Interviews

  • Understand how people prefer to find a new workout program.
  • Determine potential hold-ups when it comes to purchasing a training plan.
  • Find out what motivates people to know that the information they are purchasing is viable.
  • Learn what users would recommend for the existing website.

Findings & Analysis

Overall, gym-goers desired a clean website that lays out clear details of what they are getting out of a training program after purchase.

Findings & Analysis

Overall, gym-goers desired a clean website that lays out clear details of what they are getting out of a training program after purchase.

Affinity Map

I organized each major insight on a sticky note, grouping them by similarity and topic. The following themes emerged:

  • The original website was not user friendly and difficult to navigate
  • There was not enough focus on the product and the website’s overall direction seemed not to be on the correct subject matter
  • Within the program section, there was a need for clear indicators on things like necessary equipment, duration of exercises, and the difficulty level of the program
  • The users desired a way to tell if the program aligned with their fitness goals overall
 

“There is not enough focus on the product, there’s too many steps in between the initial opening phase and the actual purchase.”

– Participant 2

“I’m not sure what’s within the program and if it fits with my fitness goals”

– Participant 3

Persona

I created a persona to reflect the main objectives and concerns that were found during the interview process.

Competitor Analysis

I compiled a list of fitness websites that were similar to DG Athlete and compared the most important features to decide what to include in the final MVP. 

Feature Prioritization

After organizing the components, I built on the popular features identified in the competitor analysis. I also considered insights from user interviews to brainstorm additional features and structural changes that could enhance the user experience.

Ideation & Design

I then formulated how the app would function overall and planned out the general flow.

Ideation & Design

I then formulated how the app would function overall and planned out the general flow.

User Flows

The primary objective when creating the website flow was to direct the user directly to the correct program page that matched their fitness needs. The original user flow was too complicated and another goal was to streamline the process to allow the user to purchase the product quicker.

Wireframes

Here are the initial wireframes of the website layout. A primary focus was to make sure the user had as few steps from opening to purchase as possible. Also, I wanted to add graphics throughout the website to enhance the users experience while navigating the website.

Low-Fidelity Screens

Based on the previous research and insights, I designed these screens to ensure a seamless user flow and to present information as clearly and prominently as possible.

Branding

I developed a brand identity to represent innovative fitness solutions.

Branding

I developed a brand identity to represent innovative fitness solutions.

I wanted to create a modern web page that speaks to the everyday gym goer. I achieved this by limiting the color palette while ensuring the selected colors created a vibrant atmosphere. The owner also desired to expand into the athleisure clothing industry. So, I made sure the font and color palette were adaptable across the different industries. 

High-Fidelity Prototype

The high-fidelity wireframes were created building on the previous designs.

High-Fidelity Prototype

The high-fidelity wireframes were created building on the previous designs.

Based on the feature prioritization list and the low-fidelity screens, the high-fidelity prototype was made. 

There was an emphasis on creating dynamic graphics balanced with a structured layout that was easy to navigate.

Home

On the home page, I wanted to add in bold messaging that aligned with the brand identity. I also structured the page to easily access any of the available programs using images as a way to catch the users attention and help them navigate where they wanted to go. 

Programs

The programs section was intended to provide a selection of programs for the user and illustrate what the website had to offer. There was an overall desire to streamline the original page and minimize the messaging to its simplest form.

Individual Program

The individual program page had a couple of objectives. the first and most important was to describe exactly what the user was getting when purchasing. Second, there was attention to detail in incorporating other elements of the site here to create a cohesive narrative. The Third was to help drive the user to purchase with large and vibrant indicators.

Graphic Design

I created multiple graphics from scratch for the site.​

Graphic Design

I created multiple graphics from scratch for the site.

The graphics were created to add dynamic and vibrant colors to the site while also maintaining the overall site branding. The company was not working with a large budget so these images were created with a mixture of commercial use and royalty-free assets.

Usability Test

I tested the users ability to navigate DG Athlete.

Usability Test

I tested the users ability to navigate DG Athlete.

The four users who were testing the website found that the navigation was more streamlined and easier to use than the previous iteration. Also, they found that the added visual components were a good addition to the overall experience.

Next Steps

There are more plans for the future of DG Athlete

Next Steps

There are more plans for the future of DG Athlete

The next steps for DG athlete are to build out the section for the apparel and further refine the purchasing process for users. Also, there is a need to expand the program portion so that users have a broader selection.