Precision Nutrition Homepage + Navigation
Precision Nutrition Website Design
Precision Nutrition is the largest private nutrition, coaching, and education company in the world. They were founded in 2005 with the foal of helping people discover the joys of living a fit, healthy lifestyle. Precision Nutrition provides educational courses that allow customers to become a PN certified nutritionist, and also provide coaching sessions for consumers, along with many other services. Precision Nutrition saw mass amounts of growth during the COVID-19 lockdowns, but saw that growth slip in the post-pandemic environment. With those conditions in mind, the PN team were seeking consumer friendly redesigns to their homepage, coaches overview page, and the creation of a brand new clients overview page that would allow users to better understand their offerings. They also wanted potential customers to easily be able find, and differentiate between these two sides of their business model (educating coaches, and coaching clients).
Wireframes + Navigation
Wire frames were created with minimal usage of color to provide the client with layout and module options, and to provide examples of a large form that would allow user to learn more about Precision Nutrition's coaching/client offerings. Navigation layouts were also provided and shown visually on the wireframes. Below is the navigation that the client selected. This is a sticky hamburger style navigation, that once opened allows a user to click whether they want to view the clients or the coaches services.
Homepage Design
The homepage utilizes Precision Nutrition's color scheme in a bright contemporary manner. The hexagon is pulled out of their logo and is used as a repeated design element to reinforce their branding. Masked out videos are used along with social proof to provide an engaging experience. Lower on the page PN's services are listed out alongside photos with graphics popping out that describe the service. This helps differentiate each card. A balance was struck between using a light blue background alongside white backgrounds.