TIFFANY TAM

Website

CrossFit Volition

 
CFV+BANNER2.jpg
 

ROLE: UX DESIGNER CLIENT: Crossfit volition DURATION: 6 MONTHS

The Opportunity

CrossFit Volition uses their website to increase brand presence, as well as a place for new members and existing members to find information about their business. I was hired to redesign the website to increase usability and increase conversion rates. CrossFit can be intimidating to start and the website should help ease some of those concerns by making all necessary information easily accessible.

The Problem

The client was having usability issues with their existing website. New members reported having trouble contacting staff and existing members reported that they no longer use the website for information because it is too difficult to navigate. As a result, staff members have resorted to using their Facebook page to update members about events and changes to schedule.

The Solution

A redesign of their website with a focus on contact page and membership information page. Recommendations were made based on results from qualitative and quantitative usability tests. 

 
1_ABC.jpg

Research

Observations

Three hours of observations were conducted at CrossFit Volition to gather information about the types of users that would be using the website.

Interviews

Interviews with three users were conducted following observations. The interviews helped build empathy and helped me better understand the business. These interviews also revealed that the current website has some major usability issues such as legibility of text. 

Competitive Analysis

A competitive analysis was conducted using both direct and indirect competitors. By conducting a competitive analysis, I am able to establish competitive advantage for CrossFit Volition while also presenting areas and opportunities for improvement.

 
comp-analysis.png

 

1_abcd.jpg

Usability Testing

 

Card Sort

A card sort was conducted to help with the build of the information architecture of the new website. Cards used in the card sort included features on the CrossFit Volition website, as well as feature from direct and indirect competitors. Users were asked to rank cards based on whether they were very important, somewhat important or not important at all.

card-sort-graph-01.png
 

Quantitative Usability Testing

A quantitative usability test was conducted on the existing website to help locate where users are having issues. Using data collected from the card sort, users went through a series of five tasks and their ability to do so was assessed. The data shows that there are definitely some usability issues with the existing website, such as the locating the Drop-In policy (7% success rate).

quantitative-graph-03.png
 

Qualitative Usability Testing

A qualitative usability test was conducted to help better understand what users are thinking when executing a series of tasks. The reason for the qualitative test is to further discover pain points and areas of improvements. Qualitative tests help triangulate the data collected from the two previous tests. During this test, I discovered that although users were able to successfully accomplish tasks, many of the users were confused by terminology used on the website.

Untitled-4-02.jpg

 

1_A.jpg

Design

 

Project Scope

Using information collected from the research conducted and usability testing, it was clear that Schedule, Price of Membership, Hours of Operation, and Contact Information are the some of the most important features for users. With that in mind, I focused my design on making sure that those features are heavily featured and easily accessible. 

Brainstorm

To fully explore different versions of the redesign, I first created the new information architecture based on the data collected from the usability tests. Then user-flows were developed with the scenario of a first time user in mind. 

Sketches & Wireframes

Sketches and wireframes were created as an initial proposal for the client. Usability testing was conducted with five users before proceeding to high-fidelity prototypes.

sketch-02.png

High-Fidelity Prototypes

 
CFV 1.png
 

Updated colors and layout to improve usability

The old version of the website had multiple usability issues including hard to read text and difficulty locating important information such as pricing and scheduling. The new website has a restructured navigation based on data collected from the card sort test. Updated background colors make text more legible thus reducing information overload for users.

 
OLD_NEW.png

MVP

Pricing, Schedule and Drop-Ins were amongst the top rated cards during the card sort test. New pages were designed with additions to the navigation bar for easy access. Updates to structure and design also make it easy for staff to update the webpage when changes need to be made.