In trying to grow his business the client wished to reach out to new a new target audience who would be looking for a better quality of service. He required a brand and website which sold his virtues, philosophies and knowledge.
User research
The project started by conducting user research and analysis of his dropoff web analytics and client base, teaming it up with the target audience he wished to branch into.
Research into the audience began with interviewing and using questionnaires with both his current clients and those to whom he was offering free taster sessions. This enabled me to grasp insights into the current and potential user groups. I gathered the feedback from these and it helped to develop 4 key personas, a feature matrix, key touchpoint maps merged with proposed user journey maps.
4 key personas
- Specific event target user, for example a bride wishing to lose weight for her wedding day.
- Continued event user, for example someone training for multiple marathons or sporting events.
- High end occasional usage user, such as a high profile business person who occasionally needs the personal trainer to travel to them.
- Continued specialised training user, for example a fitness model who needs occasional tune ups before photoshoots.
From the feature matrix the main theme was that users desired a web solution which allowed them to access a multitude of fitness related information, both general and personalised. From this I started to plan the main user journey and define the touchpoints and omni-channel experience.
Research  |
Planning |
Booking  |
Waiting  |
In the gym  |
After the gym |
|
|---|---|---|---|---|---|---|
| Advertisements within the gym or local newspapers | - | - | - | Personal training contract and waiver OPPORTUNITY: When signing up for sessions the user can be presented this so it saves time during the sessions | - | |
| Desktop | Browsing personal trainers within their local area | Indepth research of plans and costs | Purchase suitable plan and select date which to attend OPPORTUNITY: Online calendar to help users select which date and automatically update the personal trainers own calendar | Updates sent with recipes, fitness updates whilst the user waits for their session | - | Record workout and any measurements toward goal OPPORTUNITY: Goal tracking and graphs to show progress |
| Tablet | Browsing personal trainers within their local area, likely on the sofa at home | Indepth research of plans and costs | Purchase suitable plan and select date which to attend OPPORTUNITY: Online calendar to help users select which date and automatically update the personal trainers own calendar | Updates sent with recipes, fitness updates whilst the user waits for their session | - | Record workout and any measurements toward goal OPPORTUNITY: Goal tracking and graphs to show progress |
| Phone | Using their mobile device to quickly search for personal trainers within their local area during commute | - | - | Updates sent with recipes, fitness updates whilst the user waits for their session | Access their personalised fitness plan to follow whilst in the gym | Record workout and any measurements toward goal OPPORTUNITY: Goal tracking and graphs to show progress |
| Wearable | - | - | - | - | OPPORTUNITY: Link to site which allows fitness plan to be sent to wearable whilst user is working out | - |
| Physical | - | - | - | - | User has session with personal trainer | - |
Branding
Based on the clients ethos and target market I developed a logo based on the initials of his brand – JFF – and a fitness theme, in this case turning the Fs into ab-like designs.
The brand colours were chosen to provide a sense of energy and impact, therefore bright red and orange gradients were chosen and offset against a darker, dusty blue. To run alongside these colours I chose the font Montserrat in a range of weights, a modern sans serif font that has strong and sharp shapes which help elaborate the brand ethos.
Information architecture
Based on the touchpoint chart and the proposed user journeys, paired with the feature matrix; a sitemap was developed. It was decided to move the members area functionality to phase 2 development when further functionality could be defined.
The sitemap left room for further development in the members area including feedback, nutrition plans and workout guides. Possible further areas to expand within would be member statistics analysis and visual display i.e, weight loss.
Prototypes
Wireframes were produced based on the sitemap and user requirements. Some interesting design choices was the implementation of a natural language contact form. This added a personal/friendly emotional link to a normally quite static process. The idea throughout the site was to utilise images in a descriptive way whilst still maintaining accessibility and a responsive design. I've included wireframes of a few key screens below but if you are interested in viewing the pages relating to the sitemap feel free to download the PDF of wireframes (3MB).
Switch wireframes below
User testing
User testing was carried out using mobile device prototypes and a clickable desktop prototype. It tested the common user journeys looking for pain points and any other issues. I prefer to test looking for the unhappy path as I believe it yields more useful results.
From the results the majority of users found the site design easy to use and had no issues with navigation or finding the information they needed. I also delved into further research regarding the members area and the information the user required there; the results were inconclusive as different users wanted different features. It was therefore decided that a more indepth study would be required for this section and and the potential of a customisable dashboard view may be the solution.
Visual design
Once these designs were approved I moved on to the creation of high fidelity prototypes using the branding, the low fidelity prototypes and photography - mostly stock at this stage - to present the final feel to the client. This document can be fully downloaded in a large PDF file (37.2MB).
Switch visual designs below
Closing
The website had intended to be built by myself on a platform of Wordpress, however, the client after a major life event decided to go in a different business direction.
However, this is not all bad news as the project allowed for exploration and development of a full start to finish branding and development project.