GoodMart is an app which allows the conscientious shopper to make responsible online shopping choices.
CASE STUDY DETAILS
INDUSTRY: ECOMMERCE
MY ROLE: UX RESEARCH & DESIGN, UI DESIGN
DURATION: 10 WEEKS
TYPE: ACADEMIC
TEAM: SOLO
DELIVERABLES:
• Prototype
• Design System
• Marketing Websites
TOOLS:
PEN & PAPER
Figma
Adobe Photoshop
Firefly ai
Procreate
Chat GPT
Google Forms
Google Sheets
Google Docs
PROCCESS: DOUBLE DIAMOND
This is a visual representation of the Double Diamond design process, which served as the framework for this project and the steps I will be elaborating on below.
SUMMARY
PROBLEM
Younger users are dissatisfied with big ecommerce companies due to a misalignment of values.
SOLUTION
GoodMart: an app that allows users to quickly and easily shop for products which align with their values.
FILTERS
• filter by attributes like: recycled, fair labour, vegan, etc
• filter by distance to support local
INFORMATION
• understand where the product is from, how it was made, who made it & more
IMPACT EXPLAINED
• information on what impact different options have
PROBLEM STATEMENT
Younger consumers have become less satisfied with major ecommerce companies, reflecting a growing divergence in values.
WHY DID I CHOOSE THIS PROBLEM?
The other day, I was out in down-town Toronto. I remembered I needed to buy a grip. Looking around at all the shops, I had a feeling one of them would have what I needed. I tried a few shops, no luck. I looked on google maps for which store would have a grip, but that didn’t help. I didn’t have the time or patience to walk around to all the shops in my area and figure out which one actually sold it! I wished there were some way I could still buy from my area, and to avoid using a big ecommerce website...
THE PROBLEM WITH BIG ECOMMERCE

Read LA Times article here

Read The Washington Post article here

Read Wired article here

Read more on my process of selecting a problem space topic.

STARTING POINT

I began with ideas that would be “Desirable” before considering Viability and Feasibility.

Considerations:
• Is this something that is best solved with technology?
• Would this help people in their daily lives?
• To avoid bias & preconceptions, is this topic new to you?

RESEARCH & DISCOVERY
To verify that this is in-fact an issue and to gain a general understanding of why, I conducted secondary research by reading articles, survey results and studies.
SECONDARY RESEARCH

43% of Gen Z & 37% of Millennials feel guilty for shopping with Amazon.

Source

Ecommerce sales in Canada are ↓8% compared to a year ago.
Source
40% of U.S. shoppers would like to reduce the amount of shopping they do with big ecomm companies. That is 132,760,000 people in the USA alone.
Source

Further secondary research into the problem.

WHO: Gen Z & Millennials (Ages 20-35)
WHERE: North America
WHAT: User dissatisfaction with ecommerce
WHY:
US consumers were asked “To what extent would a company’s environmental, social and governance actions influence your behaviour to purchase a product or service from the company?” The answers were:
39% Social factors
35% Governance factors
26% Environmental factors
Source
PRIMARY RESEARCH
In order to understand the user's perspective & experience, as well as  to check my own preconceived notions, I conducted primary research (interviews).

Explore the preparations I made for the interviews.

HYPOTHESIS
I believe Gen Z & Millenials avoid using big ecomm because it has a negative social effect. I will know I’m right when I see at least 5/6 interviewees confirm they avoid using big ecomm in hopes of shopping more socially responsibly.
ASSUMPTIONS
Key motivation: perceived or actual negative effect on society. People more frequently search for responsible product in order to avoid using big ecomm sites for shopping. Deterrents to responsible shopping: lack of tools for convenient and easy online access to local shops.
RESEARCH OBJECTIVES
Identify the pain points & motivations behind the ‘unease’. Learn what the motivations are behind responsible online shopping. Identify the pain points in this process. Understand general attitudes and behaviours about online responsible shopping. Identify common behaviours in conscientious shoppers.
INITIAL HMWQ
“How might we help younger consumers purchase products quickly and easily online, without feeling guilty about it’s impact on the environment and local shops?”
PARTICIPANT Criteria
A form
was sent out in order to capture the corrrect interview participants.
Between ages 20-35
Uses big ecomm sites (eg. amazon, taobao, alibaba)
Indicates at least 3/5 on survey scale of “feels concerned about shopping with large ecomm because of social, ethical, sustainable or other concerns”
INTERVIEW SCRIPT
You can read the full interview script here.
Conducting Interviews
6 Interviewees were selected, all were recorded with the Voice Memo app, and transcribed using firefly.ai.
Name: SIMRAN
Age: 25
score: 3/5
Name: JACK
Age: 31
score: 5/5
Name: VIVIAN
Age: 32
score: 4/5
Name: ALEXIE
Age: 29
score: 4/5
Name: VICTORIA
Age: 25
score: 3/5
Name: ADAM
Age: 30
score: 4/5
Synthesis

Read about my process synthesizing the interviews.

Synthesizing the interviews
Below are examples of each; a pain-point is problem or frustration that users experiences, a motivation is a driving factor behind a user's actions or opinions, and a behaviour is the actual actions or interactions a user takes.
Pain point
hard to find info, has to look at product photos on amazon to see if something is tested on animals, or missing chemicals etc,
motivation
prefers local because your purchase would have a nicer impact on their life, would be less likely to go unnoticed just feels better for everyone
behaviour
shops in person more often
Common points are then grouped together into themes. Some of the key themes that formed include: concern for the environment, local community & economy, and worker treatment or company ethics. The primary theme that emerged was Transparent Access.
Interviews key theme
TRANSPARENT ACCESS
• clear & easy to find information
• access to information reflecting user values
• what products & sellers are there?
• what are all the details about the product & sellers?
transparent access explained
Despite the existence of appealing responsible products, people still opt for big ecomm platforms, even though the experience often leaves them dissatisfied.

The reason behind this choice is the sheerconvenience offered by big ecomm platforms.  They provide quick searchability, a wide range of options, online tools, varying price points and quick delivery when needed.  However, dissatisfaction arises due to the lack of transparency and responsibility exhibited by these big ecommerce companies.

If we can address this issue and find a solution that offers transparent access to responsible products and sellers, it will lead to increased satisfaction among consumers.

With the key theme identified, I was able to refine my "How Might We" question.
INTERVIEW KEY POINTS
Monopoly & difficulty accessing alternatives leads to continued use of big ecommerce
Difficulty in finding accessible responsible products
Visible actions & Transparency lead to trust
Wants MORE info about back end (sourcing, manufacturing, practises, labour, delivery, carbon footprint)
Refined hmwq
How might we provide conscientious North American shoppers ages 20-35 with transparent access to responsible shopping in order to enable them to shop with confidence?
Definition
PERSONA
Brandon moore
32 | Engaged | Toronto Film Prop Master
I really care about the world, so I want to shop in a responsible way, but it’s so difficult! It takes too long to find something that checks all the boxes, so I usually just end up with big ecom which makes me feel uneasy.
BIO
Brandon works for a production company based downtown Toronto.  He loves to make things with his hands, and crafts small metalwork objects as a hobby in his spare time.  A product’s make and quality is something he values.  Like most of his friends, he tries to be a conscientious consumer, however because of his work, and busy lifestyle he frequently resorts to big e-com sites to fulfill his material needs.  He always feels bad about this because large ecom always seems to give him a feeling of a “smoke screen” and lack of transparency.  He would love to shop more environmentally and socially responsible, however finds it difficult to access these companies and products.  Due to a lack of time and money, he resorts to a more accessible option: big e-com.
pain points
• struggles to find accessible alternatives to big e-com
• struggles finding information regarding responsibility when shopping online
• difficulty locating responsible shops that have what he needs
• struggles to access information regarding responsibility on big ecomm sites
• struggles with interface of smaller brands on mobile
behaviours
• spends free time on social media
• shops with big e-com out of ease of accessibility
• feels guilty shopping with big e-com
• avoids spending too long searching for products online
• shops through targeted ads sometimes
• believes big e-com monopolies are responsible for his shopping difficulties
goals
• wants to buy responsible products
• wants to search and locate product’s responsibility info easily
• wants to know where his products are coming from, and how they get to him
• wants to support companies that are ethical
motivations
• wants to take responsibility for his impact on the world
• cares about the environment
• cares about social causes and humanity as a whole
• wants things to be easy
Experience map
What experience is Brandon currently having, given his behaviours, motivations, goals and pain-points?
Opportunity Focus
The search stage is most relevant to my problem statement: "Allow Brandon to search for products in a more accessible & transparent way."
ideation
user stories & epics
The above experience map reflects Brandon's current journey. Now, when envisioning the potential of an app offering Transparent Access, what are the actions and desired outcomes the persona and identified users experience?
User 1: CONSIENTIOUS SHOPPER
The main user & focus is a Conscientious Shopper, like Brandon.
User 2: RESPONSIBLE SELLER
The secondary user was revealed during the creation of user stories, however they are not the focus of this design.

Find out about my process developing multiple user stories & epics here.

USER 1: Conscientious Shopper
Epic #1: Purchase Responsibly
As a Conscientious Shopper I want to...
...so that...
read about how companies treat their employees
I can make my purchase with the knowledge of how it’s getting to me
see what the ingredients of a product are without having to zoom into the product photos
I can easily make informed decisions about what I'm purchasing
view all responsibility information regarding a product while purchasing, without having to look elsewhere
I can purchase responsibly
see the carbon impact of different shipping options
I can choose a good balance between delivery time, and impact when making a purchase
see if a product's creation is part of a charity or social initiative
I can purchase from companies making a positive difference
Epic #2: Search & Discovery
As a Conscientious Shopper I want to...
...so that...
view multiple options for 1 responsible product
I can buy the one that has the best deal for me
easily see estimated shipping time for different products
I can choose one that will get to me in the time frame I need it by
see recommendations based on my past purchases/searches
I can discover new products and brands that I will like
see the carbon impact of different shipping options
I can support locally without having to walk around to ever store in order to find the one thing I need
filter products by eco-friendly, fair trade, cruelty-free etc.
I can choose easily a product that lines up with my values
see most popular responsible products
I can quickly discover and trust products that others have enjoyed
find many responsible companies in one place
I can spread my spending out
search for products or brands that are local to me
I can support the local economy
search a platform where everything is responsibly made
I can focus on ratings, price, ect, knowing whatever I choose will be responsible
search for what responsible brands and shops are in my area
I can support my local community
Epic #3: easy access to product/company info
As a Conscientious Shopper I want to...
...so that...
see a carbon impact estimate for a product
I can be aware of how much impact different products have
see reviews from buyers for responsible products
I can choose the responsible product that seems the best quality
see symbols/logos alongside a product
I can quickly and easily distinguish ethical or sustainable features
see if a product comes from a certified supply chain
I feel like I know where a product is coming from
view where a product physically originates from
I can choose to support locally, rather than buy things from far away
view products with recognized eco-labels and other certifications
I can easily identify products that adhere to specific ethical standards
easily see what materials a product is made of
I can have a full understanding of the product
USER 2: RESPONSIBLE seller
Although they were not the focus of this project’s research and discovery, a secondary user role has been revealed during the development of user stories.  Responsible sellers/companies selling locally, and online would benefit from the primary user’s stories.
Epic #1: Gain more customers
Epic #2: Strengthen their business
KEY EPIC: Purchase Responsibly
Using the above key Epic and stories, I was able to identify the task the user is trying to accomplish as well as the requisite subtasks needed in order to complete that task.
TASK
Searching for & seeing information on items to make a purchase
SubTASK
search > browse > select > read > add to cart > purchase
TASK FLOW DIAGRAM
The above subtasks are used to create the main task flow diagram where the user "Conscientious Shopper" is purchasing an iPad Case.
The task flow of purchasing a product already exists in many formats; however, Brandon is seeking Transparent Access, which means that each step of the buying process must naturally include features that prioritize transparency.
UI & Common Mental Models Inspiration
In order to ensure a smooth flow for the user, research was conducted into the most commonly used e-com applications to discover the layout and structure of elements. Visual research for user interface inspiration was conducted as well.
What is Brandon used to seeing when shopping from his phone?
Sketching
Exploratory Sketches for each step of the task flow.
Home
Search Results
Filters
Product screen
Checkout
Icon - Elements Webflow Library - BRIX Templates
Icon - Elements Webflow Library - BRIX Templates
After ideating multiple options for each screen, I selected the best as solution sketches to become wireframes.
Prototypes & Testing
Prototype 1
Turning solution sketches into Lo-Fi wireframes.
Home
Search Results
Filters
Product screen
Cart
Checkout
Icon - Elements Webflow Library - BRIX Templates
Icon - Elements Webflow Library - BRIX Templates
Usability testing
Planning
Usability testing was conducted with the aim to gather feedback and insights from real users, enabling me to create a more user-centered and effective experience by identifying and addressing usability issues.

Read about my process developing a usability testing plan here.

Initial Scenario
What
Imagine that you are a conscientious shopper. You use big ecommerce companies but feel bad about it afterwards because your understanding of how it affects the world around you.  You’re looking for an app where you can responsibly and conveniently shop for what you need. Right now, you’re looking for a new ipad case.
Why
This helps the test user get into the right frame of mind for when they first look at the app.
Tasks & Scenarios
What
Rather than asking the test user to complete a task such as “search for ipad case”, the tasks were instead phrased as scenarios that the test user would be able to empathize with eg. “Imagine you’ve opened this app because you need a new ipad case, what’s the first thing you would do?”
Why
We want to see how users interact with the app naturally, so we avoid telling them exactly what to do and how to do it.
These are the test plan tasks, and the scenarios they wre presented as to the test users.
Task 1: search for ipad case
Scenario 1: Imagine you’ve opened this app because you need a new ipad case, what’s the first thing you would do?
Task 2: filter
Scenario 2: Now that you’ve searched, you want to narrow down the options you’re being shown.  How would you do that?
Task 3: search for ipad case
Scenario 3: Imagine you’ve opened this app because you need a new ipad case, what’s the first thing you would do?
Task 4: select item
Scenario 4: You like the look of the second product on the results page.  What would you do now?
Task 5: add to cart
Scenario 5: Great, you like the look of this and want to buy it.  What would you do?
Task 6: go to cart
Scenario 6: Ok, that’s all you want to buy today so you want to proceed to buying this product.  How would you go about doing that?
Task 7: select regular shipping & proceed to checkout
Scenario 7: You don’t mind waiting for normal delivery because you’re in no rush, and you see that the app has indicated fast shipping has a larger impact.  How would you select your delivery method, and continue to the next step?
Task 8: select payment and place order
Scenario 8: You want to use your visa to pay, and you’re happy to proceed.  What would you do?
Test Plan
The test plan includes foundation questions, task & thought-vocalization questions and closing questions. Read the full usability test plan for prototype 1 here.
PARTICIPANT Criteria
A form was sent out in order to capture the correct interview participants.
Between ages 20-35
Uses big ecomm sites (eg. amazon, taobao, alibaba)
Indicates at least 3/5 on survey scale of “feels concerned about shopping with large ecomm because of social, ethical, sustainable or other concerns”
Name: SAMREEN
Age: 25
Shop online: yes
Name: SEAN
Age: 27
Shop Online: yes
Name: VIVIAN
Age: 32
Shop Online: yes
Name: TRIMAN
Age: 24
Shop Online: yes
Name: RALUCA
Age: 34
Shop Online: yes
usability testing, Prototype 1: Results
Quantitative feedback: The outcomes of each user test are compiled to provide a clear overview on which steps in the app's task flow require revision.
Prototype 1 had a 92% usability success rate.
design prioritization matrix
Qualitative feedback: Throughout the user testing, users are ask to speak their mind and opinions on each page and section of the app.  This provides useful qualitative feedback that can also have an effect the app's usability. This information is prioritized by effort to fix, and value to user. View all test results here. Read executive summary & test results overview here.
Prototype 2
The feedback from usability testing for prototype 1 is implemented to create prototype 2.
Home
Search Results
Filters
Product screen
Cart
Checkout
Icon - Elements Webflow Library - BRIX Templates
Icon - Elements Webflow Library - BRIX Templates

This process was repeated: read about User Testing for Prototype 2 here.

Usability testing for prototype 2: Plan
Tasks & Scenarios
Objectives, Tasks & Scenarios remain the same as V1 except for:
• A new page has been added before the home page.  The first task is now to get to the home page from this page
Task 1: get to home page
Scenario 1: You would like to shop, what would you do here?
• To avoid the task becoming a memory game, the filter requirements have been shortened from 3 to 2 filters
Task 4: select recycled & fair labour
Scenario 4: You want something that ismade of recycled plastic, and uses fair labour.  What would you do?
Test Plan
The test plan includes foundation questions, task & thought-vocalization questions and closing questions. Read the full usability test plan for prototype 2 here.
PARTICIPANT Criteria
Between ages 20-35
Shops online
Has not seen the app
Name: SUPH
Age: 28
Shop online: yes
Name: LUCY
Age: 27
Shop Online: yes
Name: EMMA
Age: 24
Shop Online: yes
Name: VINCE
Age: 24
Shop Online: yes
Name: ADAM
Age: 30
Shop Online: yes
usability testing, Prototype 2: Results
Quantitative feedback: The outcomes of each user test are compiled to provide a clear overview on which steps in the app's task flow require revision.
Prototype 2 had a 97% usability success rate.
design prioritization matrix
Qualitative feedback: Throughout the user testing, users are ask to speak their mind and opinions on each page and section of the app.  This provides useful qualitative feedback that can also have an effect the app's usability. This information is prioritized by effort to fix, and value to user. View all test results here. Read executive summary & test results overview for proto 2 here.
Prototype 3
The feedback from usability testing for prototype 2 is implemented to create prototype 3.
Home
Search & filter
Product screen & cart
Checkout
Icon - Elements Webflow Library - BRIX Templates
Icon - Elements Webflow Library - BRIX Templates
Branding & Design System
Read about Market Research & Identity Development here.
market research

I briefly conducted research into common brand interpretations of responsible shopping, as well as alterative interpretations.

Common interpretation
• sombre
• Toned-down
• serious
• minimalist
• heavy use of greens & beiges
Common Branding
Alternative interpretation
• Bright
• Bold
• Friendly
• Colourful
• fun
• Personality
Alternative Branding

Identity Development

I selected the alternative interpretation as I wanted the app to feel more approachable and down-to-earth.

Identity in Simple Terms

More approachable  than high brow
More fun  than serious
More colourful  than dull
More communal  than commercial
More familiar  than clinical
More happy  than neutral
More modern  than classic
More warm  than cold
More young  than old
More playful  than serious
More transparent  than mysterious
More open  than closed
More varied  than limited

Key Words & Concepts

• conscientious
• Colourful
• ethical
• Friendly
• responsible
• integrity
• clear
• open
• sustainable
• familiar
• easy
• trustworthy
• fun
• local
• community
• transparent
Mood board
I created a visual representation of the mood and identity I wanted the app to have.

Find out about my process developing a wordmark and logo here.

wordmark development
App name ideation
Typeface inspiration
Typeface options
Combining relevant iconography & possible brand names
Typeface Brand name selected by survey
Selected icon & typeface
Selected typeface
Logo development
primary brand colour
For the primary brand colours, I selected blue for its associated values. Initially I selected a darker blue, which I then amended to a brighter blue.
BLUE
trustworthy
integrity
conscientious
open
clear
transparent
responsible
Feels serious, somewhat clinical and too similar to facebook.
More fun, vivacious, young, happy, friendly.
Colours applied to GoodMart wordmark
Colour injection & ui refinement
Typography
Colours & accessibility
Atomic design system
Solution
App features
Filters that meet your values
After the user searches for a product, they are able to filter and sort by 'good' attributes. This enables them to find the products that align with their values.
All the Details
Information on product certifications, packaging,  origins and more, are all visible from the product page. This allows the user to feel confident when adding to cart.
Understanding Impact
At the shipping stage, the user is able to see how each option will impact staff, packaging, and an estimated carbon output.
Experience the app
Try the prototype yourself: use the arrow buttons on your keyboard to navigate.
Watch the run-through
Watch a 4 minute video of me walking through the GoodMart app.
Looking ahead
Marketing Website
For the 'launch' of GoodMart, I chose a marketing website design (following A/B testing) that effectively communicatesthe app's advantages, functionalities, and features to potential users. This design was crafted for both mobile anddesktop platforms.
Potential Impact
In an ideal scenario, this app utilizes technology to bridge the values of conscientious shoppers with their material needs. It empowers individuals to shop with the same convenience and speed they are accustomed to while instilling confidence in their purchases through the app's clarity and transparency. Raising the standard for other ecommerce companies, while providing consumers the knowledge that convenience does not need to mean compromising on your values.  Looking forward, this app has the potential to function as a supportive network for smaller shop owners and ethical or sustainable brands. By harnessing the strength of collective numbers, it can provide them with the influence and resources that might otherwise be beyond their reach.
wordmark development

Expand to read more

Close file

App name ideation
Typeface inspiration
Typeface options
Combining relevant iconography & possible brand names
Typeface Brand name selected by survey
Selected icon & typeface
Selected typeface
Logo development