UX project for a personal trainer
Boltspeedfitness.com
Bolt Speed Fitness is the website of personal trainer Ricardo Smith.
Initial discussion with the client
I had an initial discussion with Ricardo to find out what he wants, and what he thinks the current issues with his site are.
Current issues:
1. He knows there’s too much content
2. He knows some of the pages are unfinished
3. He knows the site looks a bit like the puregym website
Information architecture
A quick analysis of the current site map. There are eight main pages all accessible from the main menu. (Home, About, Services, Testimonials, Our KEI’s, BSF Solutions, Shop, Contact). There is also some blog pages only accessible via the footer menu. A membership page can be found via a ‘Join Us’ button on a few of the pages.
Content analysis
Home: Large banner image. Clip art style images. Generic sales text. Paragraph about 4–4–2.
About: Text about Ricardo. Clip art style images. Tick box lists.
Services: Info about 4–4–2. Animated text. Bolt boxes. Corporate packages.
Our KEI’s: 10 different types of workout.
BSF solutions: Nutrition, info/packages/prices.
Contact: Form.
Shop: Empty page.
Membership: Empty page.
Testimonials: Placeholder text.
Blog posts: Placeholder text.
Current website…
User interviews
Confirmed some of the issues identified by Ricardo and highlighted some new things.
Confusing acronyms (BSF, KEI).
Look and feel, slow moving advertisement banner, logo is hard to read, colours inconsistent.
Very text heavy.
Corporate feel, not very personal, isn’t obvious it is a site about an individual.
Aside from these sepcific issues users struggled to find where they needed to go to book a personal training session and said they would likely have given up before getting to the contact page.
User journey
The user journey below was created from the user research and clearly shows that users quickly become unhappy when using the site because of how difficult it is to book a session.
Competitor research
I looked at 7 competitors, all are personal trainers in London. I picked out some common features across the sites and created a matrix, shown below…
Analysis of the competitors’ features allows wireframes to be created and a first paper prototype to be tested
Main issues aiming to overcome during prototyping:
Decluttered website: reduce amount of text/content, design consistency on all pages, remove anything confusing like acronyms.
Provide a clear call to action, understanding that users are coming to the site to potentially book a fitness, means this should be prominent in the design.
Paper prototype
I decided to use a three column layout to structure the site, and kept the content focussed on core pages — removing content that the current site has based on the results from user research. I also looked at three pages of th webiste for this project, the home page, a service page and the about page.
A quick test showed this layout was very familiar and the six services direct from the home page were easily navigated. Design is too basic at this stage to idnetify what this website is for so I am moving onto digital prototyping…
Low Fidelity Digital Prototype
Adding the logo meant users testing were able to identify that this was a fitness website, however it is still not clear what kind of fitness product is on offer.
It wasn’t immediatly obvious where these services are on offer, users asked questions like: “is it an in person service?”, “ is it in London?”, “ is it something I can do online?”
Users expected to see more contact information straight away, the sign up form is good, but what if the user had a query and simply wanted to see email/phone contact information without having to go into the contact page.
Some useful points were identified during low fidelity testing, enough to make some changes to the design moving into mid fidelity…
Mid Fidelity Digital Prototype
To make it clear that this is a website for a person trainer I will insert an intro section at the top with a brief intro, with the aim to tell users what and where. I will also add more prominent contact information.
The mid fidelity prototype was generally well recieved, testing picked up a few of points:
Overall users felt it had a corporate look and feel, not much character or indiviuality. This leads onto another issue raised, which is “why should I use Ricardo?”.
Users also felt the word “Services” was a bit generic (in the menu). I would agree and at this point I need to go back and look at the competitors to see what other options could be considered.
High Fidelity Digital Prototype
Going to high fidelity will give me the chance to hopefully make it feel more personal to Ricardo. A style guide does not exist but I will mimic the look and feel of the current site.
To address the personability issues and the why someone should use Ricardo I will look to incorporate social media as well as testimonials.
Next steps…
The next steps for this project would be to further develop the UI, for this project I used the current styling, but as an intial suggestion the design could focus on the colours of the Jamaican flag. I also recieved some user feedback about the logo and I think this has potential for a redesign.
To make the site more engaging the services pages and testimonial page need to have their content developed more. Lots of scope here to develop some marketing content, including things like new photos and possibly video.
Following this, a next step would be to test the additions and to iteratively improve.
Finally it would be worthwhile to UX the ‘request more info’ form to ensure that this is easy to use as it is the main CTO on a number of the pages.
For more projects please see my portfolio: www.simontitcombe.com
