TARGET USER
Clients who want the best in health and human performance
ROLE
User Research, Branding, Visual Design, and UI Design
Design from scratch a responsive website with careful consideration for the role that it will play in the overall personal training journey.
Develop coherent branding that aligns with the company’s current and/or desired clientele and customer experience.
The website’s initial portal and setup process have been designed to reduce cognitive load. while the homepage features an easy to reference navigation bar and intuitive main dashboard.
The branding consists of a Montserrat font which provides easy readability at smaller sizes and symetrical proportions. The background color pallete was kept to a series of grays in order to provide contrast and focus the users attention.
Optimal Fitness LLC (OFL) is a personal training company that has been building their business by word of mouth and training individuals out of rented spaces. The owners are now looking at taking the next step with their company by building out their brand and creating a responsive website as the go-to platform for their offerings. In order to help them achieve these goals I first had to understand the marketplace, the branding opportunities, elements of a top personal training platform, and what mattered to users.
To understand the marketplace, the products/services and competitors of OFL, secondary research was conducted. Once the foundation was laid down, I then went to interviews in order to gain a deeper perspective of what mattered to OFL’s current and potential users. I aimed to learn what services and products were important, how did they go about accessing OFL’s services currently, what motivated them, and the overal experience that users were looking for.
Using the information gleaned from the secondary research and the user interviews I created a main persona for a soon-to-be mom in her early 30’s. She had the characteristics of someone who was physically active, had familiarity with numerous workout brands and had the necessary income to be an OFL member.
The empathy map of the athletic housewife shows further insights into her daily life and motivations. In order for OFL’s website to be applicable to her it would have to track her numbers (workout/eating/etc.), show her workout schedule, provide other health advice, and generally simplify the process of staying healthy. A soon-to-be mother has a lot going on in her life, so having a site that is reputable and can cut through the noise is imperitive.
At this point in the process it was time to start to synthesize the information from the research phase. The key insights combined with the empathy that I gained from the interviews would now lead the way to help define the key features. These features would become the basis to designing the logo and the overall website. Below is a high level overview of the larger takeaways from the discovery process.
Once I honed in on the key research and interview insights, I created a site map to visualize the framework that would define how people see, navigate and experience the Optimal Fitness website. It took me awhile to decide how to navigate the initial landing page due to the “gated” access that this website would require.
Once I understood the overall hierarchy, I set out to create the initial flow that a user would take to purchase a training plan. I considered not only the new user’s journey, but also the experienced user who would want to get to their main dashboard as quickly as possible. I also imagined a scenario where the website would recognize a user and remain signed in in order to reduce friction when using the site.
I was able to complete a lot of research on this project due to the ability to the speak to both potential users and stakeholders. It felt like there were numerous directions I could take with the actual design. One of the main design challenges I came upon was deciding on the navigation. I had started out by placing it at the top, and then gravitated towards a “box-style” format that would sit in the middle of the page before settling on a left-oriented navigation bar. During the design process I ran different scenarios by the various users to gather their preferences.
Below are some rough sketches that were completed during the initial stage of the design process. The focus on these was about optimal user flow and using a navigation strategy that would provide the necessary information along the ideal path.
After the rough sketches, I began to play with wireframes for the website. I went through several iterations when I was starting to figure out the feel for the site. There was an emphasis placed on large visuals to hold the users interest coupled with high functionality. Below are a few of the higher fidelity wire frames that would eventually become the backbone of the finished OFL website.
User testing was completed multiple times throughout the design process. Since I felt stuck at the beginning of the design phase, I ended up completing a lot more testing during the initial phases of design to determine the right direction in which to take the project. One of the areas that users honed in on was the box-style navigation which worked ok for the mobile device, but felt clunky on the larger website. This site was also very forms heavy due to the amount of information that OFL requries of its users. I iterated numerous times on the forms to provide minimum cognitive load and ease of flow for users.
Delivering this project was a satisfying experience for me. After hours of research, creating different flows and design I was able to provide a viable solution to my first real world client. Below is the final UI kit and high fidelity mockups that I created.
The color pallete for this website was one that mostly used different grays as a backdrop for the pictures and information that’s provided. The red was used as the main accent to direct attention to various call to actions and different states (selection, error, etc.) while the blue was used to highlight a hyperlink. Monserrat was selected as the type for the logo because of it’s symmetry as well as the notion that the S’s have a feeling of movement.
In my limited design career, the OFL website turned out to be one of the most challenging projects I've worked on while also being one of the most fulfilling. The research and building the structure of the site went smoothly, but visual design proved to be difficult. As mentioned earlier I tried multiple paths before coming up with a viable solution.
The fact that this was the first time I worked with an actual client was exciting. I know from experience that client work can be difficult, but I was able to reduce some of the strain by letting them know that the final design decisions would be mine due to project time constraints. In exchange, I offered to make my final design a starting point for future discussions with Optimal Fitness. Fortunately, the stakeholders at the company have been interested enough in my ideas that there are now ongoing talks to build an app based on my initial designs.
