← Back to projects

Johnson Family Fitness brand and web refresh

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.

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

4 key personas were identified.

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

Touchpoints

Print

Research: Advertisements within the gym or local newspapers

Planning: -

Booking: -

Waiting: -

In the gym: Personal training contract and waiver
OPPORTUNITY: When signing up for sessions the user can be presented this so it saves time during the sessions

After the gym: -

Desktop

Research: Browsing personal trainers within their local area

Planning: Indepth research of plans and costs

Booking: 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

Waiting: Updates sent with recipes, fitness updates whilst the user waits for their session

In the gym: -

After the gym: Record workout and any measurements toward goal
OPPORTUNITY: Goal tracking and graphs to show progress

Tablet

Research: Browsing personal trainers within their local area, likely on the sofa at home

Planning: Indepth research of plans and costs

Booking: 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

Waiting: Updates sent with recipes, fitness updates whilst the user waits for their session

In the gym: -

After the gym: Record workout and any measurements toward goal
OPPORTUNITY: Goal tracking and graphs to show progress

Phone

Research: Using their mobile device to quickly search for personal trainers within their local area during commute

Planning: -

Booking: -

Waiting: Updates sent with recipes, fitness updates whilst the user waits for their session

In the gym: Access their personalised fitness plan to follow whilst in the gym

After the gym: Record workout and any measurements toward goal
OPPORTUNITY: Goal tracking and graphs to show progress

Wearable

Research: -

Planning: -

Booking: -

Waiting: -

In the gym: OPPORTUNITY: Link to site which allows fitness plan to be sent to wearable whilst user is working out

After the gym: -

Physical

Research: -

Planning: -

Booking: -

Waiting: -

In the gym: User has session with personal trainer

After the gym: -

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.

Wireframes

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.

Desktop

Mobile

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.

Desktop

Mobile

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.