Ask me anything event website designs in a tiled format
Ask me anything event website designs in a tiled format

Precision Nutrition Web 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).

CLIENT

Precision Nutrition

DELIVERABLES

  • Home Page (Desktop and Mobile)

  • Coaches Overview Page (Desktop and Mobile)

  • Clients Overview Page (Desktop and Mobile)

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).

CLIENT

Precision Nutrition

DELIVERABLES

  • Home Page (Desktop and Mobile)

  • Coaches Overview Page (Desktop and Mobile)

  • Clients Overview Page (Desktop and Mobile)

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).

CLIENT

Precision Nutrition

DELIVERABLES

  • Home Page (Desktop and Mobile)

  • Coaches Overview Page (Desktop and Mobile)

  • Clients Overview Page (Desktop and Mobile)

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).

CLIENT

Precision Nutrition

DELIVERABLES

  • Home Page (Desktop and Mobile)

  • Coaches Overview Page (Desktop and Mobile)

  • Clients Overview Page (Desktop and Mobile)

original Site Design Flaws + Goals

The original Precision Nutrition site prior to the redesign was outdated, and in need of a refresh. The layouts were simple, and lacked visual engagement. They utilized drop shadows that were harsh to the eye, and they minimally used their color palette. At times they used long blocks of copy that weren't quickly skimmable for users. On top of this, images were presented in an outdated way, and the website navigation wasn't sticky, which would cause a potential customer to get lost on the site. In the redesign goals were set to provide more engaging layouts, a sticky navigation, stronger use of color, and to present images in a more modern way.

Precision Nutrition website design wireframes
Precision Nutrition website design wireframes
Precision Nutrition website design wireframes

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.

Precision Nutrition website design wireframes
Precision Nutrition website design wireframes
Precision Nutrition website design wireframes
Precision Nutrition website navigation design
Precision Nutrition website navigation design
Precision Nutrition website navigation design

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.

Precision Nutrition homepage website design mobile and desktop
Precision Nutrition homepage website design mobile and desktop
Precision Nutrition homepage website design mobile and desktop

Coaches And Clients Pages

The coaches and clients overview pages are summaries of their service offerings, and allow potential customers to travel to further informational pages. These follow the same template to allow for consistency between the pages.

Precision Nutrition coaches page design desktop and mobile
Precision Nutrition coaches page design desktop and mobile
Precision Nutrition coaches page design desktop and mobile
Precision Nutrition client page design desktop and mobile
Precision Nutrition client page design desktop and mobile
Precision Nutrition client page design desktop and mobile
Precision Nutrition mobile web designs. Gridded phone mockups
Precision Nutrition mobile web designs. Gridded phone mockups
Precision Nutrition mobile web designs. Gridded phone mockups