PRIMAL STRENGTH PLAN | WEBSITE

Project

Primal Strength Plan

Role

UX/UI Designer

Date

January 2020 - February 2020

Website

www.primalstrengthplan.com

Programs

Squarespace, Photoshop, Sketch

Description

Website design for an online training program. The main goal was to get users to the sign up page and educate them on the program.

User Experience

INFORMATION ARCHITECTURE & WIREFRAMING

 

The client had purchased a year memebership on Squarespace so when I took this job I already had a platform to work from with it's own capabilities and constraints.

Goals & Needs

In the first meeting the main goals of the client where discussed.

The clients goals:

- 1 landing page with all information necessary to understand what the program is about.

- Make it clear what the 4 main building blocks of this program are.

- Offer a free workout as part of a marketing funnel.

- The clients initial goal was to have a one page website with all information and a shop where products could be bought.

Solutions

Based on the need that it has to be clear from the start what this program is about I decided to start with a short description of the program that explains it in a nutshell. This is immidiately followed by the 4 building blocks and is supported by images that correlate with the exercises that can be associated with each block. This gives the user visual associative aids next to written text.

Looking at the capabilities of Squarespace I used large image strips in between the text blocks to show improve readability and this gave a good opportunity to focus the user on the call to actions for the marketing funnel as well as giving an easy que as to where to buy the program or download the free workout.

Lastly when arranging information in the sitemap it became apparent that there was too much text to include all on the home page. This is when I proposed to add a contact and about page where users who want more backstory could get more information. These secondary pages would lend themselves to more dense text fields that wouldn't interfere with the flow of the homepage.

WEBSITE DESIGN

CREATING THE LOOK

 

The goal of this website was to have a clean and minimalistic look. The images provided where well shot but had busy backgrounds. My solution for this was stripping the images down to just the model and by doing this putting focus on the athlete, thus making it clear from arriving on the landing page that this is a fitness training program.

 

The design criteria where:

- Minimal/clean look

- Black and white as primary colors

- The homepage needs all information neccesary for the user to know what this program is about.

To show off the new program the user first scrolls past a short explanation of the 4 cornerstones of the program. Later down the page follows the actual program, where colors are used to summarize the program in short and a call to action to learn more about it.