PRIMAL STRENGTH PLAN | WEBSITE
Project
Primal Strength Plan
Role
UX/UI Designer
Date
January 2020 - February 2020
Website
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.
