A sustainable product recommendation app

Similar stuffs, but with quite a few screens are having different motions,


one problem is the file size & loading time


People are more and more interested in sustainable product. There's a growth in sustainability-marketed product. But 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 idea.


In this project, I want to understand what are causing the gaps, and design a solution to promote the sustainable product.

My role

Product vision, user research, UI/UX design, prototyping 


Figma, Illustrator, Photoshop, Framer


Mobile app


What can we do to promote sustainable product to increase the chance of people make better decision on consumption?

Design process

Waiting to be visualised


Background research

User interviews

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

'Intention-action gap' of sustainable products

is widely existing


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.

The main causes 

According to a few market reports, the top three reasons that people don't act on buying sustainable product are:

       They think sustainable products cost more
       They don't know how to decide
       They might have to compromise convenience

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?

For the same price I can get two cheaper ones.

Maybe next time I will get the more sustainable one.

I have a vague idea of why it's better to the planet. But I never have the time to look into it.

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, the good way is to give information of what the consumers want to know. After collecting ideas from marketing reports, online articles, and brainstorming (click to see the process), I have listed the potential angels for the topics that can promote a products. 


Based on that I have also conducted user research in these steps:

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

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 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 place for purchasingsustainable product

• A platform have educational value

• A platform they can look up for certain product

• An app that cost a little time to find things they want

• A place they can communicates

• An app that is fair and trustworthy


The user don't want the app to be


• An app that have too many information so

  they have to spend more time to look into it.

• An app makes you feel the only right way 

  to do is to buy these products


Competitive analysis 

I have looked into most of the sustainable-related app 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


website/blog that

recommend 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.

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 sustainable product with supportive information to help users gain a better understanding and encourage them make conscientious consumption choices.

The app should be

• Friendly, inspiring & fun 

• 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 where to search product

• Be able to check a product 

  supportive information in a short

  amount of time 

• feel encouraged

• Form a better consumption habit

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.


Primary persona

Key features

After synthesising the research and data, there were several topics that stood out. I prioritised based on the impact and user's main needs. These are the topics that will be include in this project.

Purchase :

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


Start with categories list​ 

Big topic ➜ small items

Small items ➜ big topic

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


This feature