Responsive E-commerce Website

Duration: 3 months (10 June – 7 September 2023)


Colour Palette

Image Style


Jannas Fitness is a web responsive e-commerce website that is focused on creating a friendly environment for customers to enquire about fitness plans and meal plans. The main aim for this website is having a functional booking form where customers can book their gym sessions hassle-free.


There are several similar gym apps and personal trainers, such as Virgin Active, Planet Fitness and Donna’s Fitness. These gyms are focused on getting as many clients through the doors as possible. Jannas Fitness is focused on a one-on-one personal training experience.


It is necessary to present the product to the user as much as possible on an e-commerce website. However, it should neither be full of annoying elements nor too many product options on one page.


I believe less is more elegant. I choose to create white space between the items so that the user can focus only on the objects.


This website is for users looking to better their lives by eating healthier and exercising. The website is for people who are looking for a one-on-one guided gym experience.

Key Features

The website allows users to book gym slots, without having to join as a member and without any contracts binding the clients for months or years.
The main feature of the website is the booking system, it is easy to use.

Brand Guidelines

  • Guiding Principles
  • Logo
  • Colour Palette
  • Image Style
  • Pain Points – User Research
  • User Flow Diagram
  • Wireframes
  • Prototypes
  • Responsive Design

Guiding Principles

Pain Points – user research

After conducting user research, I was able to determine the following pain points:

User Flow Diagram


High Fidelity Wireframes of the online booking form created in Figma


Prototype of the online booking form created in Figma

Please feel free to interact with the High-fidelity prototype Below.

Enlarge the screen by clicking on the 2 arrows in the top right of the screen below.

Responsive design

After my UX/UI journey on this project, I continued by building the website for the client using WordPress. The live website can be viewed at
Jannas Fitness is a South African based company, specializing in one-on-one personal trainer gym sessions with clients. The company allows clients to book for gym sessions without contracts binding clients to a time period. The company also offers personalized workout plans and meal plans for clients that need some extra guidance when starting their fitness journey.

Other Projects – jannas fitness

I am still in the process of helping Jannas Fitness create a brand that is recognizable and top quality. Some of the other projects we have been working on includes creating posters and adverts for both Instagram, Google and print distribution.

Signage Design for Jannas Fitness:

I look forward to assisting this growing client in the future with many other projects.

Share your love

Leave a Reply

Your email address will not be published. Required fields are marked *