top of page
affinity mapping

Eco Warrior Shopper App
Concept Study

Mobile app welcome back screen

 Eco Warrior Shopper 

Role              GA Student - UX Researcher - UX / UI Designer

Sector          UK Retail Women's Clothing

Challenge    Why aren't women buying more eco / green clothing ?

Timeframe   10 weeks

GA-general-assembly-logo
Image of eco website
logo

Intro Consumers + Retailers

​

During the pandemic UK consumers had 3 mindset shifts.

  1. Realising they had too many clothes

  2. Wanting to donate excess clothing to charity

  3. Wanting to buy in a sustainable / environmentally friendlier way

​

​

UX Process

The double diamond informed my process of thinking 

Discover - Interview Users + Stakeholders

Define - How Might We?

Develop - Ideas + Solutions

Deliver - Ideate + Test

Double diamond methodology diagram
AFFINITY MAP

Discovering user insights

Using open ended questions 5 women 26 - 40 yrs were interviewed.

Affinity mapping in miro helped identify recurrent themes and user insights.

miro logo

User insights behaviours + views

  • Shopped regularly with only 4 - 5 retailers

  • Time poor loved convenience. 

  • Eco Aware

  • Confused by the eco jargon for clothing

  • Felt guilty and had been avoiding

Mobile app icon
icon clock
icon user confused
icon user annoyed
icon eco home
quote speech bubble
quote speech bubble
quote speech bubble
quote speech bubble
quote speech bubble
quote speech bubble

Personas Pains + Gains

I was produced 2 persona's to capture insights.

persona image 1

Frustrations

Lack of clarity with green clothing

Ethical clothing is more expensive

Feels she could do more

Lack of trust with retailers

​

Amy  37 Bristol

P/T HR Manager

Home owner

Married Young Family

Joint Income 70k

Needs and Goals

Convenient way to compare green clothing with her regular retailers

Wants to buy clothing that is less harmful because she will feel less guilt and shopping will be a happier experience

persona image 2

Cassie 29  London 

Junior Manager

Rents room

Single

35k income

Frustrations

Budget stops her making green clothing choices

Wants visibility of affordable options

Needs to know her precious money is being spent on quality clothing.

​

Needs and Goals

Simple online method to compare green clothing at the retailers she shops 

Wants to make a considered informed decision that her purchases offer her the quality and values she desires.

Competitors 

mobile screen of app
mobile screen
bullet points
mobile screen of new look retailer

 

Findings

  • Limited choice with green retailers / pricey.

  • Confusing use of jargon across industry

  • High Street greener options hard to find 

  • Cant compare credentials across retailers

​

 

higg index logo

Industry Stakeholders

Garment Industry insights

  • Multiple different processes in manufacturing clothing

  • Inconsistent measures across the industry

  • The Higg Index to establish consistent green measures in 8 years time.

​

​

​​

​

Defining the issue

icon solution

​

It's too complex

​

icon user selecting
icon guilty woman

Can't compare retailers

​

How Might We make shopping for environmentally conscious clothing easier and simpler ?

​

Users feel guilt and avoid

Defining - user journey with a storyboard

STORYBOARD of user journey
STORYBOARD of user journey
STORYBOARD of user journey

The prompts for buying greener clothing needed to be part of the process

Users behaviour 

"if it's not in front of me I don't go looking for it "

Solutions + Ideas

traffic light index used on food packaging

Traffic light indicators - food sector

​

screenshot mobile screen

Little birdie App-

redirects to retailer 

of check boxes

Next shopping app for

UI and filter / search 

screenshot of selector on app

Thread website clothing shopper profile

Develop - Lofi wireframes

first sketches

Feature Prioritization

  • Simple eco indicator 

  • Customise shopper profile 

  • Search Item

  • Size/ colour filter

  • Compare choices

  • Retailer credentials

  • Green tracker

pre registered user login page sketches

Develop - wireframe + test

first iterations mobile screens
Mobile screens

Learning to use Figma and UI kits

​

​

figma logo

User Journey Task Test + Results

  • Set up profile

  • Shop items

  • Buy greenest item

Insights

  • Rapid redesign needed

Develop - rapid redesign + test 

User Journey Task Test +Results

  • Set up profile

  • Shop items

  • Buy greenest item

  • Review retail rating

 

Insights

  • Remove text under eco indicators

mobile screens

Develop - UI + Material Style Guide

sign up mobile screen
welcome back mobile screen
go to checkout mobile screen

​

Insights

  • UI is a specialist skill 

  • Green colour / leaf icon - intuitive for users​

  • Large leaf icon - gave users visual reminder about task

UI library
wireflows

Develop - Miro wireflows

Miro - allowed instant feedback and collaboration with others.

​

miro logo

Develop - Maze user test

Maze - remote testing of tasks with the figma prototype

heat map

User Tasks Tested + Results

  1. Sign up

  2. Shopper Profile

  3. Filter size / colour 

  4. Add green indicators

  5. Select item - review retailer ratings

  6. Checkout

heat map

Insights

  • Tests need to be in smaller task chunks

  • Rapid learning curve with animation and transitions

Maze-logo

Develop - Hifi Wireframe Figma Prototype App 

A concept study was a great opportunity to learn software and build a prototype

A Collaborative input shaped the solution

Testing and refining the app gave an opportunity to learn about user task setting

​

greener retailers mobile screens
green spend tracker screen
create profile stores screen
retail comparison screen
womens leggings screen
bottom of page