Johnson's Family Fitness

Engaging new markets with a brand reposition.

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.

Personas

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.
Feature matrix

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
Print 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.

Logo development

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.

Power red
Passion orange
Dusty blue
Pure white
Cool grey
Soft black
Fonts

Information architecture

Sitemap

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.