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.

Y – 2016

Services User research User experience Interaction design Visual design Branding consultancy Frontend development

Landing page on a mock up screen

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.

Personas

The 4 key personas identified were:

  • Specific event target user, for example a bride wishing to lose weight for her weddng 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.

Stage Research Planning Booking Waiting In the gym After the gym
Channel
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 ofa 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.

AaBbCc
AaBbCc
AaBbCc
AaBbCc
Fonts

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.

Sitemap

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