Optimum Peak Fitness - A Website Redesign
UX/UI Design | Company Website Redesign
Situation
Optimum peak fitness is a premium, professional holistic approach to sports rehabilitation, corrective exercises, nutrition, performance and wellness. It’s designed to fit customers lifestyle and optimize results.
As a visual designer with a deep interest in UX design I aimed to create a visual storyline to enhance user experience and guide users to complete and fulfill their fitness and wellness goals.
Task
During this project I worked as the UI and UX designer. My responsibilities included redesigning the entire site from start to finish. I utilized design thinking - beginning with the first stage of empathizing with the user.
OPF Previous Site - Homepage
Action
User Research
To begin the user research initiative I sat down with the business owners and some of their closest clients. I also visited the center during hours of operation and observed the clientele and if they were available and comfortable with it, asked them questions regarding the company, who they were, and why they chose OPF and how they found OPF.
Pain Points From OPF Customers
Unclear Site
Feedback from website users suggested the website flow was difficult to navigate due to the inconsistent layout and distracting flows
Bad Forms
Some users were found to have trouble navigating the form fills. Some form consultation buttons would lead back to the top of the page while others would link to nowhere. Furthermore, when a form was successfully submitted there was no confirmation.
Cluttered Design
Visually, users expressed their distaste for the site appearance. Overwhelmed with dark colors, and distracting animations.
Help Not Accessible
Through user feedback, it became evident that there is a lack of clarity surrounding the trainer process. There was no clear way to get their questions answered.
User Personas
From the above observations I began crafting two user personas. One primary and the other secondary. While crafting the two personas I kept in mind the target audiences. Users with a fair amount of money, looking for personal training or wellness.
Predicted User Flow - New Site
I created one primary user flow. This flow would represent someone who was looking for a personable connection with the trainer. The selling point here was the fact that because the gym is a smaller business and facility the personable connections would be the most important for each customer.
User Research Summary
After observations, feedback from both the customers and the owners of the company I gained insights on where the company wanted to head and the consumers goals and wants.
With this information I began to ideate design solutions - keeping the user at the front of mind during the entire process.
Competitive Feature Analysis
I started my design process by looking at the local competitions websites’. I wanted to get a feel of what this small company was up against and how each of their websites worked, what features they had, and how easy they were to navigate. Some of the insights I found from this analysis were each of these gyms were not very personable.
Most of the competitors did not engage their user or allow a connection between user and trainers.
Information Architecture
From all of these insights I started crafting OPF’s information architecture and navigation. I wanted to follow a standard flow so users would not feel confused when entering/navigating the site.
Paper Wireframes
Next, I took a pencil and paper and began the creation of the wireframes.
Wireframes & Results
After establishing the information architecture and navigation I started formatting and sketching out my paper wireframes. During this process I also took into account a bit of how I wanted the site to look - of course these things change during the process as it’s never linear.
User Journey Map - Digital Wireframes
User testing never stops. After the digital wireframes were made I wanted to get a feel of an imagined customer journey. This journey looks at how a user would find a trainer and schedule a consultation based on a specific trainer. It combines both the previous site and the simple wireframes.
Through this process I found that the steps of finding a personal trainer is more complicated than needed. I also found that the confirmation message after form submission is missing.
Before
After
Homepage Styling
Once the digital wireframes were tested and approved I began shifting my focus to a visual design.
Here are some of the different styling of the home page.
Hi-Fi Prototypes and Visual Design
After approval and brief user testing I started to create assets for the high-fidelity prototype - integrating UI design.
I wanted to keep the design simple and modern using an achromatic color scheme with some gold accents throughout the site. One of the main struggles I found during this visual process was finding complementary photography that would flow with the webpages and company.
Below are some flat artboards.
Visual Design - Before and Afters
Results
This project is still currently being added to, expanded and improved. At this time I am working on adding more pages on IV’s and Peptides.
Thank you for reading!
