RSF
Richmond Sports and Fitness (RSF) is a family-owned and operated fitness facility. RSF is more than just a gym; it is a community that promotes health, wellness, and fitness for individuals of all ages and fitness levels.
Role: Research, UI/UX
Timeline: Apr 13, 2023 - Apr 30, 2023
The Problems
The website currently lacks an online signup feature.
The UI could benefit from an update.
The information architecture (IA) could be improved.
The website consists of a single page, limiting its elements and components.
Research Goals & Objectives
To ameliorate RSF's current responsive website, I needed to identify and understand user needs and expectations to determine the key features required to design and redesign. Additionally, I evaluated the existing site's structure and information architecture to use as a reference for creating my version. To ensure a positive user experience, I also created user and task flows for usability testing of RSF's new responsive website.
Scope + Focus
My primary focus was on redesigning RSF’s responsive website. RSF’s current website is outdated and I’ve found potential in improving the site’s: Information Architecture, Overall Structure, User Interface, and it’s Features.
Competitive Analysis
During my research, I discovered that RSF's competitors offered a comprehensive online membership signup process, from finding a facility to signing up for a membership. By analyzing our competitors' homepages, I identified key design elements such as amenities, personal training, a membership introduction section, and other services.
Sitemap
After wrapping up the card sortings, I utilized the data we gathered and developed this sitemap. With the help of our participants, I was able to clarify the architecture and expectations of our potential users.
Task Flows
Using the sitemap as a guide, I developed two task flows to identify the necessary steps for users to complete their tasks. This also helped me identify and prioritize the screens that needed to be designed. With this information, I was able to iterate and improve the website's usability, while also making sense of the flows and their connections.
Membership Signup
Fitness Quiz
Low-Fidelity Wireframes
I started off with sketching and exploring different structures for the key screens. To make things easier, I designed specific screens for 2 flows I wanted to later turn into a higher fidelity.
Component Library
High-Fidelity Wireframes
After slightly updating the brand and style, I took the wireframes another step further and converted them to high-fidelity wireframes. After many reiterations, I ended up with 2 flows and a total of 12 mobile and desktop screens.
Usability Testing
To improve the user experience, I conducted usability tests with 5 participants via video conference and in person. It was necessary to identify areas in need of improvement, areas that may be causing confusion or difficulties for users, and navigation paths that can be made more efficient. Additionally, we evaluated the difficulties users face when trying to sign up for a membership.
Each participant was asked to complete 2 short restricted tasks.
Sign up for a 1-Year Prepay membership
Complete the Fitness Quiz
Design Revisions
The "About" CTA on the homepage hero section was changed after discovering that users were not interested in it. I replaced it with a "Join Now" CTA, based on feedback from users who stated that they were visiting our site to sign up for a membership and would prefer a "Sign Up" CTA instead.
The "Free Pass" banner was replaced with a "Fitness Quiz" banner. Following feedback from users who were confused by the presence of two "Free Pass" banners - one in the middle of the page and one in the footer - I decided to make the change. The fitness quiz allows users to identify their goals and needs as well as find free workout routines, recommended trainers, and free resources to ensure they find ease in starting their fitness journey. Additionally, I took the suggestion to add a CTA inviting users to sign up for a membership.
The "Location and Hours" section was updated based on a recommendation from a participant. The changes included adding an image of the map and downsizing the font sizes to create space. The participant suggested combining two of my design concepts, and I found it to be more visually appealing and an effective way to enhance the user experience.
A few changes were made to the membership section on the Memberships page based on feedback from users. In response to feedback about confusion over the "View Prepay Plans" and "View Monthly Plans" CTAs, we replaced them with a switch to indicate which page is currently selected. Additionally, a participant suggested using a component similar to what is used on Overwatch's Heroes page to sort their hero types. In addition, I made revisions to the body paragraph to clarify the contrasts between prepay and monthly memberships, while ensuring that it is concise.
