Margaret Nichol Design - EcoShark.net: UX/UI Case Study

EcoShark
UX/UI Design Case Study

Shopify Ecommerce store specializing in Eco-conscious home goods and personal care items.

Challenge

Create an online store that provides an easy, convenient, informed, and affordable way to make environmentally friendly choices when purchasing household and personal care products.

Shoppers value sustainability and want to choose environmentally friendly products, but it is currently difficult for them to do so due to the following factors:

•Concerns about product effectiveness
•Poor clarity and understanding of what makes products an Eco-friendly choice
•Budget constraints
•Product overwhelm and choice paralysis

Goal

Create a website that does the legwork for its users.

Providing them with a trustworthy source of effective, environmentally friendly, and cost effective products.
While also making it quick and easy to find the products they need.

Project Duration

6 weeks: March-April 2022

My Role

UX/UI Designer

Aided client in identifying their user's needs and how to meet them by developing their brand's core values and voice in a crowded and confusing marketplace.

Methods & Deliverables

•Competitive Research
•User Survey
•User Testing
•Personas
•Site Mapping
•Content Design
•Visual Design: Icons, Typography, Photo Editing

Tools

Shopify
Adobe: Illustrator, Photoshop
Google Forms

Understanding The Problem

Competitive Research

I identified three main categories of online stores specializing in Eco-conscious consumer products. Major retailers (grocery, health specialty stores, and organic specialty stores), product manufacturers, and small online-only independent sellers.

Given EcoShark's place in the market as a small scale retailer I decided to research a major retailer and a product manufacturer as they have a higher level of traffic and set the trends in the Eco space.

Blueland

Blueland is a company that produces plastic free cleaning products & accessories for home, laundry, cleaning, & personal care (handsoap). In the form of tablets & powders that are added to water and mixed for use, and tools like reusable product containers, reusable wool dryer balls, and plastic-free, compostable sponges and cleaning cloths.

Differentiation

The company sells a product that they produce themselves. They are set apart from the competition by their attractive branding, beautiful product and packaging design, and high visibility as an Eco-conscious option for the products they sell.

Well.ca

Major online retailer (subsidiary of Rexall) that sells health, wellness, baby, and beauty products. They do not focus solely on sustainable products, but do have a subsection of “Green & Natural” Products which was the focus of my analysis.

Differentiation

Set apart from the competition by their large consumer base and scale of product offerings. They additionally have focused their marketing and offerings on the “Mommy” market.

Analyzing User Interviews

My client was in the process of conducting user interviews when I came on board. I assisted her in fine tuning her interview script and also helped her analyze the feedback her interviews garnered.

User Survey

Following the feedback from user interviews I developed a survey to determine what is most important to people when choosing the products they use in their home. I also wanted to assess the level of knowledge the average consumer has of environmentally friendly products.

User Research Insights

Participants of the survey and interviews were mostly middle class millennial women who are married with children. Many of these women carry the primary responsibility of purchasing home care goods and performing household chores in their homes.

•People care about environmental impact, and the impact of their product choices
•Cost and effectiveness are the biggest determining factors in product purchases.
•Products being vegan/cruelty free, ethically made, easy to use, & organic are features that many users prioritize.
•Participants with less Eco knowledge don't know what to look for in their products and find many retailers overwhelming or unwelcoming

It seems that removing barriers to making and accessing environmentally friendly products is the best way to serve this user base. Addressing issues around cost, proven effectiveness, lack of knowledge, giving users the information they need to make an informed purchasing decision.

What are your main considerations when purchasing household and/or personal care products?
(select all that apply)
of 67 responses

Defining The Problem

What & Why? - Problem Statement

Users need an easy, convenient, informed, and affordable way to make environmentally friendly choices when purchasing household and personal care products.

Users value sustainability and want to choose environmentally friendly products.

However, it is currently difficult for them to do so due to:
Expensive and/or ineffective products, a lack of knowledge as to what make a product Eco-friendly, and general overwhelm in an over-saturated market rife with green washing.

Who? - Personas

From the findings of our user research I defined two core personas for EcoShark.

Christine
"The Busy Mom"
36/f
Married
3 Children

Notable Quotes:
“I want to be environmentally friendly, but I just wish it wasn't so expensive!”

“Between my job and the kids, I need to just grab something and know it will work.”

Eloise
"The Eco-Conscious Mom"
32/f
Domestic Partnership
1 Child

Notable Quotes:
“I care about the environment, and I need the brands I buy from to care too.”

“I know what I'm looking for in my products, and I know what I'm looking to avoid.”

How? - User Journey

How does EcoShark meet it's user's needs?

I developed a user journey for our persona Christine to identify her shopping priorities and how EcoShark can rise to meet them.

Scenario: Minimize plastic waste in her kitchen

Christine wants to reduce the amount of plastic she's throwing away in the kitchen.
She wants to learn more about the plastic-free kitchen products available, order and receive the products she needs, try the products to test their effectiveness, and feel good about her kitchen routine.

Solving the Problem

Ideating Solutions

After identifying the pain points, and opportunities to reach our users I determined the ways that EcoShark could support it's users through it's structure, tone, and visual language.

Information Architecture

The information and products available on EcoShark needed to be organized in a way that was intuitive while also reducing overwhelm and choice paralysis.

Site Map Option 1
Chosen for site launch

Site Map Option 2
Designed for implementation after initial site growth

Content Style

Determining EcoShark's voice and tone was essential to reaching our core users.
Our goal is to be warm, friendly, and conversational. Arming them with the knowledge they need to make purchasing decisions, without feeling shamed or inferior.

Excerpts from EcoShark's content style guide. (Adapted from Mail Chimp Content Style Guide)

Voice

We are Plainspoken: We understand the world our users are living in: one muddled by hyperbolic language, green-washing, up-sells, and over-promises. We strip all that away and value clarity above all.

We are Genuine: We relate to customers’ challenges and passions and speak to them in a familiar, warm, and accessible way.

We are Translators: Only experts can make what’s difficult look easy, and it’s our job to demystify what makes a product Eco & what doesn’t.

We Demonstrate Value: Our users prioritize product efficacy, environmental impact, and cost. We must always focus our communication on these priorities before anything else.

Our Humour is Relatable: Our sense of humour is subtle, quick, and kind. We’re never inappropriate, smart but not snobbish. We prefer winking to shouting. We’re never condescending or exclusionary—we always bring our customers in on the joke.

Tone

Here are a few key elements of writing in Eco Shark’s voice.

Active Voice: Use active voice. Avoid passive voice.

Avoid Slang and Jargon: Write in plain English, simplify complex terms whenever possible.

Write Positively: Use positive language rather than negative language. Focus on how our users are making good choices with us. Avoid catastrophizing about the environment. Emphasize the things we can do, rather than drawing attention to the things we cannot change.

Never Shame: Users have many reasons for making consumer choices that are not Eco-friendly. Never make them feel guilty for their choices, make them feel empowered and capable of making better ones.

Visual Design

EcoShark needed to feel vibrant and accessible, appealing to the average busy mom.

We decided to avoid an overly trendy look, instead opting for a clean & bright visual style, while maintaining consideration for accessibility.

We were working with the Shopify theme "Dawn", which limited some of the options we had available for visual styling. Elements like buttons, and the style of most modules was set by the theme.
However we did reach out to the developers to unlock further visual customization options. For example, the ability to set the overlay colour on category header images.

Colour Guide

A pallet of vibrant blues and greens, evoking playfulness and associations to the earth.

EcoShark Blue: Main Accent Colour, Overlays, Links, Prices, Trust Badges
#1C75BC

EcoShark Green: Secondary Accent Colour and Primary Buttons
#8DC440

Light Blue: Special Backgrounds and Secondary Buttons
#C0D8E0

Dark Green: Overlays
#374D19

Soft Black: Main Text and Headline Colour
#222222

Sale Red: Sale Prices and Alerts/Warnings
#EA2848

Off White: Main Background Colour
#F9FAFC

Light Grey: Dropdown Menu Colour
#F0F0F1

Typography

Metro Nova Extra Black
Headlines
Type Sizes Determined by Shopify Theme

Questrial
All other text and body copy
Type Sizes Determined by Shopify Theme

Logos & Icons

Full Logo

Logo Circle

Logos

Logo designed prior to my joining the project.

Full Logo
Majority of use cases

Logo Circle
Used for flavicon & minor placements where visual space is at a premium

Biodegradable Trust Badge

Compostable

Reusable

Plastic Free

Zero Waste

Made in Canada

Cruelty Free

Vegan

Woman Owned Business

Trust Badges

Vector icons designed especially for EcoShark using Adobe Illustrator.

Desktop & Mobile Screens

Visit www.ecoshark.net to see the website* in action!
*site has been updated since I completed my work on it

Testing The Solution

User Testing

All testing was conducted using remote moderation over Google Meet.

The goal of the study was to assess the intuitiveness, efficiency, & error rate for users interacting with EcoShark for the first time.

Tests included 5 participants.
All participants were in their 30s. And featured a mix of genders, races, family, and marital status.

Objectives

I wanted to observe and measure if users understand the site, its value, and how to utilize it’s basic functionality.

This was assessed by having users comple tasks like:

•Creating a user account
•Adding items to their cart
•Checking out their purchase
•Signing up for EcoShark's newsletter
•Submitting a help request
•Locating different information around the site

Takeaways

• Participants often missed small details, like the multiple tabs for product descriptions

• Most participants stated that they don't usually like to sign up for newsletters

• People liked the aesthetic of the site, and found it clean, welcoming, and unpretentious

• Participants thought range of products on offer was small

• All participants felt that shipping costs were too high, and that if they were actually shopping on the site they would abandon their cart because of this

•There were some participants that wanted more variety of individual products, like fragrance or colourways

Changes Made Based on Testing

•Changes were made to pricing structures to reduce the cost of shipping. Also free shipping was added for purchases over $75(cad)

•Greater visual clarity was created (when allowed by shopify theme) in areas where there was information being missed. Such as product description tabs

•Added signup incentive for newsletter: 10% off user's next order

•Plans to add more products, and a greater variety of colourways etc after launch was already in the works

•Any technical issues identified during testing were corrected either by theme developers, or EcoShark's webmaster

Summary

Project Goal

Create a website that helps users purchase truly Eco-friendly products, and avoid green washing.

Providing them with a trustworthy source of effective, environmentally friendly, and cost effective products. While also making it quick and easy to find the products they need.

Did we meet the challenge?

EcoShark is an easy to navigate and affordable site with a wide variety of locally sourced Eco-friendly products on offer. It also features extensive educational resources which the site owner is regularly adding to.

What would I do differently?

I would want to be more involved in the initial user interviews. I also wanted to utilize a custom built theme so that we would have greater control over the look, feel, and functionality of the website.

Opportunities for EcoShark

EcoShark has so many opportunities for growth and iteration. Further expansion of it's product offerings, a custom site design, further market and user research.
EcoShark could look also look further into having house branded products developed for the site.

Thanks for viewing