RE-
An E-commercial app for sustainable products that have educational value
Similar stuffs, but with quite a few screens are having different motions,
one problem is the file size & loading time
Overview
RE- is a fictional e-commerce app for sustainable products that I built for a self-lead UX/UI practice in early 2019. Based on the background that people are more and more interested in sustainable product. But recently I have read a few articles that makes me realise a potential problem in the app. According to Harvard Business Review in 2019: '65% said they want to buy purpose-driven brands that advocate sustainability, yet only about 26% actually do so.' Seems like people's action are not follow up with their ideas. This might leads to the sale conversion in the app is not reach the goal.
So I decided to look into the problem. Since my design skills has been improved, so apart from focus on 'how to increase the sale conversion', I will renovate the app.
Challenge
What can we do to promote sustainable products to increase the sale conversion in an e-commerce app?
My role
Product vision, user research, UI/UX design, prototyping
Tools
Figma, Illustrator, Photoshop, Framer
Deliverables
Mobile app
Design process
Waiting to be visualised
Discover
Market research
User interviews
Empathy map
Competitive analysis
Define
Persona
Feature prioritisation
Key user journey
Information architecture
Design
Low-fi wireframe
High-fi wirefraem
Design system
Interactive prototype
Visual mock-up
Testing
A/B testing
Usability testing
Refine prototype
For better understand the project in a short time, I have organised the selective content in three sections.
01 Analysis
The main causes for the 'Intention-action gap'
The one big impact of living sustainable in a personal level is your consumption habit. Based one several market reports, People are become more conscientious about what they buy. However, a 'intention-action gap' is vastly existing. According to new research from Getty Images, 92% of respondents claims environmental concerns impact their purchasing decisions but 48% of them won't commit to the idea.
According to a few market reports, the top reasons that people don't act on buying sustainable product are:
They think sustainable products cost more
They don't know how to decide wether a product is sustainable
They might have to compromise convenience
They don't know where to buy
I have conducted the user interview (click to see the user research) with 10 people regarding to these three causes, and here are a few representative comments from the user:
It's quite expensive and how I know it is better than the cheap version?
I have a vague idea of why it's better to the planet. But I never have the time to look into it and don't know where to buy.
It can be a restriction, for example,
bring a water bottle with me means I can't carry a small bag when I'm out.
Cost
more
don't
know
how
don't
know
how
don't
know
where
Inconvinence
Narrowing 'intention-action gap':
Communicate clearly why the product is good
To promote the sustainable product in an app, guide user make the purchase decision by giving information that they are interested in is a more practical method. After brainstorming what angels could we focus to solve each of the causes of 'intention-action gap', I have conducted user research to find out what topics users most interests in.
Here's the steps I took in the user research:
1. Rate the topics
Give a score to the communicate topics. 3 points are the highest, 1 point are the lowest.
2. Pick the most interested topics
Asked them 'what do you most interested among the potential angels I listed below?'
3. Collect user's ideas
Asked them open questions such as: 'Do you think these angels are what you are interested in?' 'What else information do you think can be include in each section?'
Here a demonstration of the result that most relative to this project:
Communicate
topics
The score
(Full score is 30)
Potential angles of what information to give
17
24
18
Good for
the environment
Relatively good deal
for the consumer
Well-designed
product that
solve the inconvenience
People have only see the price number but didn't count in factors such as:
• How long can a product last
• How's the daily use experience
• Buying less
Show people what's the environment challenge is this product related to.
• Keywords
Words that are familiar to people so they will understand the impact or challenge immediately
• Environmental challenge & fact
A simple message to remind the user what's the issue
People are particular interested in this info
The inconvenience can caused by people didn't discover the right product for their needs.
• A collection of the same products
Give people an overview of what products on the market
• Highlights of the unique design
Clearly shows people what design problem does this
product solve
Users's needs/expectation of a e-commerce app for sustainable product
8 out of 10 users in the user interview shows high interests of having an app specific for sustainable product with information of why a product is better for the environment.
I have collected their expectations of the app and some concerns.
(+ empathy map)
The user prefer the app to be
• An all-in-one platform for selective and trustworthy sustainable products
• A platform contains educational information
• A platform they can look up for certain product
• A platform can guide them make choice in a fairly short time
The user don't want the app to be
• An app that have too many content so
they have to spend more time to read
Competitive analysis
I have looked into most of the sustainable-related apps and websites in the market. These apps can be separated into these topics shown below. The focus of analysis are fall into these two sections.
1. UX: How they category content, navigation set-up, etc.
2. UI: App layout and how they present their content (main features, content categories, onboarding, etc ).
Sustainable lifestyle/
goal-oriented apps
Apps for checking product ingredients
Websites that sell sustainable products
I have also read a few official documents related to sustainability to gain a systematic understanding of what's the proven way to encourage people to live more sustainable, and most importantly, what information are defined as something to prove a product is sustainable. I treat them as experts' opinion as well.
02 Definition
Creating an statement
After gathering the research and data, I formed a more detailed understanding of what user's expect from such an app.
This app is a platform that introduce and sell sustainable products with supportive information to make user feel more confident to make the purchase.
The app should be
• Friendly, inspiring & smooth
• Easy to use with clean layout
• Suitable for busy young professionals
• Offer information that user's are
interested in and display in a easy-to-
digest manner
• Easy to find the product they are interested
• Easy to add to shopping chart and save for later
• Be able to check a product
supportive information in a short
amount of time
People should
Persona
Based on the market report, the majority of consumer who are more attempt to to make sustainable lifestyle choices are Millennials, female with good education and stable increasingly income.
Primary persona
Key features
Re-edit
After synthesising the research and data, I understand what information display with the product can increase the chance of purchasing. I have prioritised the contents to fit with their needs.
For an e-commerce app, the goal is 'sell more'. For busy professional, the ability to determine what to buy in a short time is key to make a purchase. Among different ways to stimulate user making purchase, I think the
Purchase : Re-edit
Categories list
Supportive info
- Primary : Good impact on the environment
- Secondary: Good value & good design
- Similar products
Search for product
Easy to find search bar
- Search a specific type of product
- Search for an environment issue
The following two features are what I'm planning to build in the future. In this project, I will only include them in the layout.
Place for review a product and new ideas about a product:
- Collect complaints to a specific product and what can be improved
- Collect ideas of what product people are looking for
- Place for small business to introduce their product or even launch a crowd-funding
More educational information & articles for specific environmental issue
Key user journey: Discover sustainable product
I have designed a golden path of discover sustainable product for the persona character Serena, and ideally how would she feels like when react with the app. I have also showcased what design details would lead Serena to achieve the desired emotion.
Information architecture
Combining the key feature and key user journey, I have added the additional alternate path for the 'search' feature, and other supporting threads. (IA need to be improved)
03 Design
Brand attributes
Friendly, inspiring & bold
Feature: display product with supportive information
This feature is the core feature of promoting sustainable product, so I start the app design with this feature first. The layout should be clean and the information should be display in a way that the user can find the part they are interested at the first sight.
The interface will need:
• Product picture
• Product overview (brand name, product name & price)
• Product basic information (short description)
• Keywords help use understand the challenge & impact immediately
• Primary supportive information (environmental challenge & impact)
• Secondary supportive information (Value for the money)
• Secondary supportive information (design-related content)
• Comments of people who owns the product
• Where can you buy
• Save button