Johnson's Family Fitness Website UX designer, Branding Consultant & Frontend developer

Header image
Landing page on a mock up screen


In trying to grow his business the client, Michael Johnson of Johnson's Family Fitness, wished to reach out to new clients who would be looking for a better quality of service. He required a brand and website which sold his virtues, philosophies and knowledge.

Starting out

The project started by conducting user research and analysis of his exiting web analytics and client base, teaming it up with the target audience he wished to branch into. Through this a range of personas were developed for the 4 specific user types discovered.

Bride to be Marathon trainer Businessman Cover model

From these I was able to develop firstly a set of branding guidelines (PDF 1.7MB) including a logo for the business, followed by a sitemap featuring a shallow navigational structure.

Branding guidelines

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


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

Home page wireframe Contact page wireframe Product page wireframe Members area page wireframe

High fidelity prototype

Once these designs were approved I moved on to the creation of high fidelity prototypes using the branding which again can be fully downloaded in a large PDF document (37.2MB).

Home page visual design Packages page visual design Product page visual design Members area page visual design


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.