- Web UIUX
Type:
UIUX & Developement
Timline:
Aug - Dec 2021
Tools:
Figma & Wordpress
My role:
User research
Interview
Wireframing
UIUX Design
Wordpress Development
Overview
I was being appointed to assist my client to revamp & transform their existing static website to a fully dynamic & functionable website that able to improve the lead conversion & user experience.
Problem Statement
To revamp a private fitness trainers website to improve lead conversion & user experience.
UX Audit - Existing Website
I have conducted a UX audit on the existing website which I found the following findings:
- Complex Navigation
- Unclear call to action
- Dark/ dull theme
- Unorganised web architecture fitness trainers website to improve lead conversion & user experience.
User Persona
I conducted an interview session with the client to further understand the users/customers’ persona & characteristics.
- Age between 25-50 y.o
- Works in top management positions
- Hectic schedule, no time for fitness
- Looking for a private personal trainer to guide & train consistently
- Was injured in the past, looking for a fitness solution.
After the interview, the following are the ideal user profile and user story that I used as the main reference to revamp the website:
“Being a manging director with hetic traveling schedule, I was diagnosed with pre-diabetes, high blood pressure and high cholesterol. I’ve been … just surviving with the pills.”
As a medical specialist, aka Doctor, Dr. Kas knows the necessity of staying active and healthy is crucial to building a positive impression on her patients as well as serving as a role model to them.
The most special day was coming to bride-to-be Yingmin.
Just like the other girls, she wanted to make sure she'll look her best during her WEDDING day.
The Goal
After the process of user interviewing & website audit, I have concluded with the following goal to achieve by the end of the project design & development:
- Users are able to submit enquiries fast and easily.
- Users are able to browse all couches easily
- Users are able to navigate the website easily & convenient
My Solution
In order to achieve the goal, I have concluded with some features that must be included in the website:
- Simplify the menu navigation.
- Light theme
- Multistep Enquiry form
- Obvious & clear call-to-action
Information Architecture
Firstly, I started by drafting the information architecture of the overall website structure.
User Flow
Then, I have created a user flow that will be used is as a fundamental guide during the design process.
Lo-fi Wireframing
Once I have a full picture of how and what is the ultimate goal that the users will need to be achieved when browsing the website, I then design a low-fidelity wireframe as a structure of the website.
Hi-fi UI Design & Prototyping
After presenting the wireframe to the clients, they are very happy with the new user flow and wireframe of the website. Then I proceed to convert the wireframe into completely high-fidelity prototyping before developing the website in WordPress.
Clear navigation is crucial for the user to browse the entire website without frustration and confusion. So I decided to create a minimalist header.
- To create a clear navigation
- To include a simple and obvious CTA button.
- To make the objective clearer to the user the moment they browse the website.
After discussing with the client, I decided to deploy the Multistep Enquiry Form which would enhance the user experience in submitting the form without exiting the website.
- This would enhance the user interactive engagement on the website
Besides that, the user will be redirected to a Thank You Page upon completing the form submission.
- This would create a strong sense of affirmation to the user that they have successfully completed the form submission.
- This page is purposely created for the client so that they would be able to track their conversion rate more accurately using Google Analytics & Facebook pixel.
The goal of this website is to book a personal trainers to the customer's doorsteps, so it is very important to design a trainer profile listing page for the customer to browse and see who and how's is the trainer looks and experiences before they decided to make a booking.
The success story is very crucial as proof of work to the customer that the training services that the company provided are really effective and worth trying. This would enhance the confidence and create a strong motivation for the customer to make a booking right away!
Conclusion & Lesson learned
In conclusion, I feel my accomplishment in helping the client to revamp their entire website and turn it into a lead-converting website. If I was given more time and budget for the projects, I would probably further explore the following possibilities:
- To build a mobile app design.
- To explore more feature designs.
- To turns it into a Web Application design as well.