Primal 7
Primal 7, an e-commerce website based out of Austin, Texas selling home fitness products for the physically challenged individuals. Our goal was to redesign the entire website where my task was designing the landing page. Our final deliverables were a desktop wireframes, a mobile phone wireframes, a prototype and a developer handoff file.
Problem
Visitors are experiencing uncertainty regarding Primal 7's product offerings, as they find it challenging to discern whether they are purchasing a tangible product or a workout program
Solution
Improve information flow for users to quickly understand the product offering and enable them to make well informed product purchases.
Goals
Provide concise information
New target customers
Increase purchase transactions
Start with stakeholders
We inteviewed Primal 7 stakeholders, they consist of a CEO, a trainer, a physical therapist, a nutritionist and a content strategist. Each played a critical role at primal 7, this was a great opportunity for us to understand areas of improvements from their point of view.
A great takeaway from the interviews was Heidi’s comment. She did not know it was an exercise system when she first viewed Primal 7’s homepage. This was a concern that needed further investigation.
"I don't immediately know that it's an exercise system."
- Heidi
Deeper dive
We needed to validate what Heidi stated. So we enlisted 75 people to go through a usability test with the website.
The results, users were unsure about their product offering. Information overload and unclear messaging of the images were consistent themes that surfaced. This laid the groundwork in understanding our user’s expectations and short comings.
Landing page takeways:
Not sure what they are selling
Too much information on home page
Dark image not sure what the person is doing
A customer's journey
There were struggles to understand the information on the landing page and further confusion as they were tasked with making a purchase that is correct for them.
I took on the task of redesigning the landing page, and the biggest takeaways are the user’s needs have to be met while they are at the landing page otherwise they will lose interest.
Design goals
To get our understanding of the user’s task flow, we needed to create a user flow diagram to chart out their task and decision making process.
Goals:
Increase awareness of the fitness product
Present easy access to site navigation
Enable users to quickly find the right product for them
Scope:
Redesign landing page
Reduce and optimize information
Deliver a responsive site
General housekeeping
Through a site audit. The site could exist with half of the content and links taken out. There were too many links in different submenu headings that became a confusing maze.
One of the main issue customers was having to see the “Professionals” heading in the landing page. This often question the user about their own skill level and created confusion once in the professional landing page. With the agreement of our client, I suggested to remove all pages under the heading of “Professionals”.
Another issue I wanted to address was the extra menu headings such as all areas with a red box are either removed or consolidated with another subheading for navigation efficiency.
How our users envisioned it
We wanted to layout a flow path that optimizes their visit. The flow path allowed for a clear direction to design the new site.
Our ideal user would go through the landing page to read about Primal 7, take the quiz to get recommendations on a product fitting their needs.
Lastly, our definition of success to have our target audience make a purchase.
Exploration
I worked out a few ideas on how the landing page could look and also how to incorporate user testimonials within the landing page.
The client pushed that having testimonials would make the landing page more convincing. More importantly I wanted to convey that the user will need to see the actual products within the first seconds other wise confusion would set in.
Being able to sketch out the initial thoughts really helped me to quickly try ideas and revise to something else after we have our reviews as a team.
Lo-fidelity wireframes
The most notable result was the landing page was too long, 4 of the 5 users felt that there were too much information included on the page.
Hi-fidelity prototype
Landing page with an image of a person working out is more likely the type of demographics that orders the products. The overall colors for the website were changed to lighten up the overall brand of the company.
In conjunction with the site redesign, the Primal 7 logo was rebranded by a visual designer. The logo along with color grouping, and visual assets were created for the rebranding of the site. This helped with overall look and feel of the site.
Solution Overview
Increased awareness
To bring attention to viewers that they are looking at a retail product site. I made changes to the main image on the landing page. I wanted to show the user is working out at the comfort of their home rather than a dark room that looks like a dungeon. I also want to show more images of the product itself as the viewer scrolls further down the page.
Improve site navigation
We found there were two rows of menu heading on the webpage, and also in the landing page there were two options to view the product. The user gets confused when clicking on the “Professionals” page. To solve this, I removed the professionals page and improved the top row menu headings.
Find the right product
Many users questioned whether this product is right for them as they view the landing page. During the usability testing, I noticed that users like to read reviews. As a solution for the landing, I placed the testimonials closer to the beginning of the page. This would allow users to instantly find out this product is for them.
Validate with rework in mind
We recruited 5 users to run through the redesigned website. We observed the the time it takes the user to complete each task. The results were good, 3 out of 5 users were able to understand what the website was about.
When tasked with purchasing a product for the shop, 4 out of 5 were able to complete the task without any confusion.
Overall, the results pointed in the right direction.
Next steps
• Iterate, test, and repeat.
• Focus on one section at a time to improve the flow of information.
• Get alignment with CEO's expectations.
Reflections
A big take away from all this is that rebranding the entire website is a big risk which also equates to a big reward. The reality is that the website will never be done correctly the first time, but merely a platform to test and improve over time.
The client understood this before we proceeded to redesign the site for him. The first results were led with decreased in sales in the first month. Naturally, iterations were needed to evolve the website to better suit the needs of the customer.
The current iteration is looking more in line with our recommendation. It conveys the product as the main component to the workouts. The overall results are starting to bear fruit. There were a dramatic decrease in unopened box returns. Using images of our demographic users in the landing page helped reduced questions if the product is right for them. With the improved efficiency of the information, more visitors are coming to the site purchasing the product with confidence.
The website can viewed here: Primal 7