This project was to design and build a new website for a sole trader personal training business, Empower Health and Fitness (www.empowerhealthandfitness.co). It also involved a brand update.

Skills used:

Wireframing

Web design

UX Design

HTML/CSS/Javascript

Tools used:

Pen and Paper

Sketch

Flexbox

The brand brief for this project was "strong but not masculine", as the client is a strength training coach that specialises in training women. Other stipulations were no dark brand colours and to not be intimidating. I wanted to combine this with large, striking imagery. The header font and box motif that I used throughout the website gives the site and brand the "strong" element, and the body font and brand colours (magenta and mint) soften that a bit to satisfy the "not masculine" element. Overall I think I was successful in meeting this brief.

The biggest UX challenge I had while designing this website was on the Packages page, which features comparison tables with price and discount information. As tables are not responsive elements, the challenge was how best to display all of this information on mobile. The solution I came up with uses a dropdown for the user to select the pay period they want to view so they can compare the costs of upfront and weekly payments.

One of the tables on the Packages page on desktop:

The solution I came up with for mobile so that users could still compare upfront and weekly payments:

Another challenge I came across was how best to show the testimonials. Having all the testimonials on one page with the "Before", "After", and quote for each testimonial was a requirement.

Using snippets from their quotes to give an overview and highlight points that are important to the client, and a "Read more" and "Read less" that expands smoothly to reveal the detail was the solution I chose.