Personal Training Website

Web Design
Screenshot of the responsive website on different devices
Project type
Web Design
Project year
2020

Introduction

Melek Abay is a London based personal trainer and posture therapist.

The problem

I identified a number of issues with the current website: it lacked direction, was bulked down with outdated content and wasn't device friendly. How might we increase the website’s appeal and visitor engagement?

Gaining insights from performing SWOT analysis on competitors, benchmarking standard UX/UI patterns and interviewing within my network, a solution began to emerge.

The solution

Create high-value pages by:
• Building trust and value between the brand and user
• Conveying the correct tone of the brand
• Prioritizing content across breakpoints with responsive design
• Supporting the authenticity and professionalism of the content
• Incorporating aspects of emotional design

Image of user journey, website sketches and SWOT analysis for the website redesign
Images collected for a mood board for the website redesign
Mobile screenshots of the website redesign
Mobile and tablet screenshots of the website redesign
No items found.

Outcomes

I worked on crafting a brand experience that translates to return visits, using design patterns centred around consistency, social proof and authority.


Redesigned elements:
The colour palette - updated to match the rebranded logos.
Visual hierarchy - use of images are often better understood than text, increase brand proximity and provide balance, contrast and weight to a page.
Responsive viewports. Following the concept of progressive advancement, I went with a mobile-first strategy, aiming to create a better experience for users and to    accommodate the fact that more users access websites on smartphones. This helped identify and prioritise the most important aspects and elements on the page.
Text hierarchy and styling. To keep the page visually interesting and support the visual hierarchy.
• Utilising icons and bullet points so the content is easier to scan and is more digestible.
Persuasion design techniques can be seen in the Before and After photos (aligning with mimetic desire theory), asking users to show small commitments such as    signing up for the newsletter and social proofing.

Testing

As a personal project, I did not test the redesign rigourously. The designs were reviewed along the process by Melek, who provided me with general feedback, but it would benefit from external testing and validation of the choices made (as well as discovering areas for improvement). Should I have the opportunity to test with an external user, I would conduct a usability and five seconds test.

Reflections

Were the problems solved? Yes, and no. I believe the redesign is well on its way to reaching the final stages. I would have liked to have included more in-depth questions in the survey to gain a deeper understanding of a user.

Overall, it was a good experience delving deeper into web design and I came away understanding that web design and marketing integrate heavily with each other at different stages, and understanding key principles of each discipline is always a good thing.

Other projects