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


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.


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 


Figma, Illustrator, Photoshop, Framer


Mobile app

Design process

Waiting to be visualised


Market research

User interviews

Empathy map

Competitive analysis



Feature prioritisation

Key user journey

Information architecture


Low-fi wireframe

High-fi wirefraem

Design system

Interactive prototype

Visual mock-up


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.













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:



The score

(Full score is 30)

Potential angles of what information to give




Good for
the environment
Relatively good deal
for the consumer
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 

Screenshot 2020-10-06 at 14.53.04.png
Screenshot 2020-10-06 at 14.53.28.png
Screenshot 2020-10-06 at 14.53.15.png

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.

Screenshot 2020-09-30 at 11.25.06.png
sustainable-lifestyle-2050 project.jpg

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



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



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.

Key user journey.jpg

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)

Customer Journey Map.jpg

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