Earthier UX
Project Overview
Earthier is a young, independent grassroots company with a vision to create one of the first certified organic range of vitamins and minerals developed solely from real foods.
I was tasked with designing 3 proposal pages – the Homepage, the Storefront page and the Product page.
​
Understanding the Business Objectives
​
The clients primary objective was for the American consumer to feel connected to the brand and to know that its warm, friendly, natural and has values and integrity in its products.
​
Page Objectives
Home page
The home page was aimed at featuring images and snippets of text which convey the company's brand values. It also had to feature some products which the User can click on and buy directly on the product page. Another important feature for the client was having a contact form at the bottom to allow the User send inquiries or messages easily.
Store front page
The Store front page was aimed at allowing the User to be able to perform the following primary tasks : browse and view a variety of products.
Product page
The Product page was aimed at allowing the User to read detailed descriptions of the product, view high resolution images of the product, view similar products and read product reviews from verified buyers.
User Interview
​
The questions were centered around the following :-
​
-
Real food supplements
-
Ordering supplements online
-
Information about supplement benefits
-
A brands' ethical background
-
Product range
​
Developing A User Persona
Affinity Mapping
This stage of the project was crucial in identifying recurring issues and patterns.
​
Defining the Problem
User wants to provide the healthiest food diet for the family but doesn't always have time to prepare healthy options from scratch.
​
​
Solving the Problem
​
Real food supplements + Online shopping = Website + Healthy lifestyle delivered at door step
By integrating real food supplements with the ease of shopping online via a website, Users can simply purchase them from an ethical provider and have them delivered at their door step hence helping them to save time.
​
​
Research on Real Food Supplements and Websites
​
I found out that companies selling real food supplements are quite rare but I came across a good one called Ora. I used their website as a reference to inform my designs.
​
​
Developing the User Flow
Low Fidelity Wireframes
After developing the User flow, I sketched low fidelity wireframes of the 3 pages. This stage helped me to strategize the information architecture and visual elements to consider.
​
High Fidelity Wireframes + User Testing
The next step was to create high fidelity wireframes using Photoshop. Initially the color scheme of the CTA buttons was orange but upon User testing and feedback I changed them to a luminous green which stood out more against the fold and resonated with the organic nature of the brand.
​
I also made the Home page more vibrant and colorful upon User feedback.
​
User Case Example
The following are tasks a User should be able to perform on this particular section of the page.
The User should be able to:
-
Navigate the entire site by using the navigation bar.
-
Log in or Sign up into an account by clicking the CTA button at the end of the navigation bar.
-
View the list of items that they intend to buy by clicking the bag icon.
-
Visit the store front by clicking the shop products CTA button.
-
Contact customer support by clicking the chat icon or using the contact details at the very top right of the page.
