Hart's Gymnastics Redesign
This is a website redesign concept for our client Hart’s Gymnastics - a kid’s gymnastic center. Our team included five team members, who collaborated on and took an active role in each step of the UX cycle. Scroll down to the very bottom for the final result.
Two major problems that the current website has are a dated look (with the top image not opening) and lower than desired usability, as users have a hard time finding the information they need.
Upon meeting with the client, we have identified two company goals that we would eventually try and reach through our redesign:
• Decrease the amount of time required to process class payments by 10%
• Reduce call volume and front desk inquiries about class information, registration, and payments by 20%
• Elevate the brand by demonstrating the family atmosphere provided at Hart’s gymnasium
• Highlight inspiring athlete stories/achievements to provide new and existing members’ with potential role models
On that same day, we headed to Hart’s Gymnastic Center and approached parents who were sitting and waiting for their children at the gym. We conducted contextual inquiry, during which parents shared what and how they completed gym logistical things. We also asked them to participate in a survey and complete a few tasks on the existing website. During the usability sessions, we gathered qualitative (user quotes and reactions) and quantitative data (click paths, time to complete tasks, completion failure/success). We also conducted comparative analysis of other gyms in the Seattle area, to see how they were presenting themselves on the web. Here’s what we found:
Two gyms allow parents to sign-up for classes on their website
Gyms with competitive teams showcase their recruitable athletes
Monthly payments can be time consuming due to in person wait times and limited front desk operation hours
Users want to have more clarity about classes, such as detailed class description, pricing, availability, and instructor credentials
4 out of 5 parents surveyed used a laptop/desktop computer to access Hart’s website
Participants share a strong negative opinion about having to download the class schedule to their computer
“I don't like having to do that - download that. I like having it right on the website, it would make it easier.” -P1
Currently, the location and driving directions are located in three different places on the website.
“Was hard to find – it was various places where it could have been. But contact should have driving directions." -P1
Based on our user research and communication with the client, we have developed two primary personas to guide our redesign. Click on each image to expand.
NEXT: Card sorting & Information Architecture
We completed a card-sorting activity with 5 potential website users (we used the OptimalSort tool) to gain insight into how our users might group website items into categories. This led us to the re-organization of the website content according with the information architecture map (see below) we created as a result of the card sort.
Sketching & First Prototype
We individually sketched several pages of the website that were key to top user tasks and then met to consolidate our first low-fi prototype.
Usability testing of the prototype
To evaluate the prototype and any issues it may have had, we conducted 5 usability study sessions, where we asked participants to perform top tasks, to cover all the pages in the prototype. Here’s what we found as a result:
● 4 out of 5 participants expected to see free trial under registration/class info
● 3 out of 5 participants researching a birthday party assumed the guest limit was 9 and no more guests could be added
● 2 out of 5 participants looking for how to prepare for class wondered if they could access this information only through their account
Choosing colors for our redesign, since brand colors and red and black, which seemed limiting
Solution: Let the branding goals define our approach and inform our design principles
Bridging the gap between stakeholder and end user goals
The branding goal of staying small and maintain face-to-face client connection differed from the business goal of reducing the call volume, paperwork, and payments in the office to increase user independence
Solution: In our design, we provided calls to action to establish communication with the business while maintaining more user independence with the ability to schedule and pay for classes online
Based on the personas we created and the company branding goals, we came up with 5 design principles for our final hi-fi design:
Here are a few screenshots from our final prototype and the clickable version we designed in Axure.