Green

A native app & responsive website that help people find eco-friendly alternative to everyday products.


My role

UX Designer from conception to delivery


Responsibilities

UX Research, Usability Testing, Wireframing, Prototyping, IA, UX Writing


Project duration

November 2021


CHALLENGE

The prompt for this Google UX Design Certificate project was creating an app and responsive website digital product for social good.

SOLUTION

Providing consumers a handy tool to quickly find more sustainable alternatives to the products they use everyday and keep track of them in order to facilitate environmental conscious purchasing decisions.



FOUNDATIONAL RESEARCH

Pollution and climate change are one of the biggest problems of our time. The use of unsustainable everyday products contributes to both. Consumers are increasingly interested in eco-friendly products, which can also be a source of personal satisfaction (greenconsumption effect), but may find it difficult to identify them or need incentives to bridge the intention-action gap. In this context, a digital tool helping people identify green alternatives to the household and personal care items they commonly use can be beneficial in terms of environmental and social good.



USER INTERVIEWS & SURVEY

In order to understand people's needs in relation to my project focus area, I started off by conducting 8 interviews and administering an online survey about eco-friendly products to gather both qualitative and quantitative data. I recruited people from all age groups to be able to gauge the project’s potential relevance to them. As I was to design in different formats, in addition to the users’ needs and expectations, I investigated which medium each participant was most likely to use.

KEY INSIGHTS
The vast majority
cared about the environment / was worried about climate change and was generally willing to use more sustainable products. However, many participants reported being overwhelmed by the task of educating themselves online due to lack of time or low technology experience. The need to rely on newsletters or browser bookmarks to keep track of read blog articles and Internet resources also emerged as a pain point.
Younger respondents tended to use a wide variety of devices, whereas participants over 60 were more likely to use their smartphones only.


Key results

Are sustainable products something you (would) generally buy?

  • 82% Yes

  • 10% Don't know

  • 8% No

How do you choose an eco-friendly product? [multiple choice]

  • 65% Search engine

  • 60% Word of mouth / recommendations

  • 47% Personal judgement

  • 37% Online ads

  • 19% Specialized brick and mortar store

  • 19% Specialized blogs

  • 5% (Specialized) magazines

Age distribution

Device used (age >60)

Device used (age <60)



Pain points
find information

Participants struggled to efficiently find information about sustainable products.

One obstacle was collecting information that was reliable, unbiased and consistent. Participants found much of the information available to be sponsored/commercial and wished for a more neutral point of view. They also missed more supporting facts for the proposed products.

Another obstacle was that information was scattered across a huge number of different sources (blogs, specialized websites, newspaper articles, etc.), which made it time-consuming to access and compare.

keep track of information

Due to the sheer amount of sources and resources, most participants could not come up with an efficient way to save, store or easily retrieve the information they found. This often resulted in them having to rely on their own memory or forgetting what they read.

TECHNOLOGICAL LITERACY

Participants with a low technology affinity or experience, especially older ones, felt overwhelmed by the need to browse the Internet to find information, which requires being familiar with a wide variety of formats and conventions.



PERSONAS

Next, I created 2 main user personas whose pain points and characteristics reflected the main user groups I identified in my research. Throughout the design process, I constantly adjusted these personas and their problem statements based on the insights from testing.


Sarah is a busy professional who needs a quick way to find and buy sustainable products because she has limited time.

Adamo is a senior citizen who needs an easy way to find sustainable product alternatives through a smartphone because he cares about future generations



COMPETITIVE AUDIT

I couldn't identify any direct competitors to Green. Indirect competitors included:

  • specialized webshops

  • sustainability blogs, podcasts and publications providing advice on eco-friendly products

  • apps allowing users to check the sustainability level of a product, usually through barcode or label scanning

  • apps tracking a person's carbon footprint and offering advice on how to reduce it

KEY INSIGHTS
Blog, podcast and print content was limited in scope, mostly focusing on one product category only. That means one has to read many articles across multiple sources to cover all the products commonly used in everyday life. Digital content was scattered over different websites and audio streaming services, making it difficult to track (the users I interviewed either used browser bookmarks or didn't save the content at all for future reference). These issues also applied to webshops. My previous user research had also revealed that people tend to be wary of the promotional nature of content (i.e. articles that are more or less disguised advertising for a specific brand). Product scanning cannot be used exploratively, but could be useful. Sustainable lifestyle apps encompassed a wide range of activities (i.e. transportation, food, etc.) and exceeded the scope of the Green project as a quick tool with the specific purpose of finding product alternatives.


Indirect competitors: a blog article about eco-friendly products and Giki, an app with barcode scanning


HOW MIGHT WE

Based on the insights and pain points from my previous research, I formulated an overarching How Might We question to guide me further in the design process.

How might we allow people with varying tech skills to quickly find eco-friendly product alternatives in any situation?



CRAZY EIGHTS

In order to quickly produce a wide range of creative ideas, I used the 8-minute Crazy Eights ideation technique.

After review, I retained the idea of including guides for specific sets of products (e.g. products used in the kitchen, bathroom, etc.) and enabling users to scan a product barcode to find an eco-friendly alternative. Both were intended as an addition to the main userflow of the product, i.e. searching for a product and receiving a list of more sustainable alternatives.


Crazy Eights sketches



WIREFRAMES

In my low-fidelity digital wireframes I tried to achieve a minimalist, clear user interface with a clear focus on the main action and useful contextual information to make them as user-friendly as possible. The main functions featured in the wireframes were:


Search
Input field, vocal search, selectable categories and subcategories

Scan
Product barcode scanner

Ideas
Sustainability articles and guides

Favorites
Users can keep track of products by adding them to their Favorites

Account
Sign up/in, account and app settings


Early low-fidelity wireframes



USABILITY STUDY

I then created a low-fidelity prototype to be able to conduct the first usability study, which I carried out as a think-aloud study with predefined tasks and follow-up questions. The 5 participants were aged between 25 and 66. In assessing the results, I focused mainly on task completion rate, time on task and use of navigation vs search, and of course made notes of the participants' verbal and non-verbal reactions as well as any comments.

KEY INSIGHTS
The main findings uncovered by the usability study and addressed with the high-fidelity mockups were:

  • Barcode search - In most cases people don't have access to the barcodes of the products they are currently using

  • Local shops - People want to see local shops where they can buy the eco-friendly products shown by the app

  • Settings - People had difficulty locating the app settings

  • Navigation vs Search - Most people resorted to the search bar for quick access to what they were looking for. However, participants with lower tech proficiency (e.g. older users) tended to tap their way through the category tiles to find products. My general approach in the final prototype was to design for less skilled users, making the product as easy as possible and possibly achieving a sort of curb-cut effect.


Affinity diagram based on usability study notes


Among the design changes I applied:

  1. The barcode scanning icon (and function) was removed and the profile icon was moved up from the bottom navigation bar in its place
  2. An explanatory text was added on top of the category tiles
  3. A settings icon was added to the bottom bar

Additional design changes included adding a map to allow users to locate nearby local shops.

The map doesn't fill up the screen to avoid conflict between scrolling the map and scrolling the page.

Following some user comments, I found out that buying local is considered eco-friendlier than buying online (a note about this was included in the “Buy online” tab)



USER INTERFACE DESIGN

In order to achieve a minimalist design, I used a monochromatic color palette for the navigation and main content. Element/subelement sets (e.g. categories / subcategories; article preview card / article page; etc.) were color-coded through a separate multichromatic pastel palette.
A light green shade was used as an obvious reference to nature. The white background conveyed a sense of pureness and cleanliness in keeping with the product's subject matter. Subtle leaf-shaped shades were added to add movement in title sections and cards.
On the typography side, I chose Poppins, a clean geometric typeface, for headings and the more neutral and legible Open Sans for body text.


In the logo, the G is enclosed in a leaf shape as a hint to sustainability and nature

Monochromatic color palette showing accessible color combinations
Complementary data visualization palette
Large and small-size card
Buttons
Input field
Navigation icons
Category icons

Light and dark theme


ACCESSIBILITY

In order to cater to users of all ages and abilities, I applied the following accessibility considerations to my design:

Clear labels for interactive elements that can be read by screen readers.

Clear focus of the screens on the primary task or action for the user.

Accessible color contrast (WCAG 2.0 level AA).

Empty space around text to accommodate larger text size settings.



RESPONSIVE WEB DESIGN

After the app, I started designing the site map for the complementary responsive website. Based on the previous insights that users were most likely to access the website from a smartphone, I adopted a mobile-first approach. All the main features of the app are presented on the website homepage, although the main focus remain on the search, which is the action users most often used first. The use case slightly shifted from searching for a product to exploring information and inspiration about sustainable products.


Only the pages marked in red were fully developed and included in the prototypes

As the project is intended for social good purposes, no commercial goals were considered in the user flow. Users can use the app or website freely and are not encouraged to create an account, for example, unless they select a function that requires one (e.g. permanently add an item to their favorites or suggest a new product).

The ability to suggest a new product allows users to actively contribute to the improvement of the product database and fosters a sense of community.



Prototyping

Next, I created wireframes and prototypes for the different screen sizes (phone, tablet, desktop), leveraging the design system I had created for the app to ensure consistency.


The product presentation page in 3 sizes


Iterations

The website high-fidelity prototype was also submitted to users for a usability test that generated some more iterations and improvements.



(FINAL) PROTOTYPEs

Click on the images to open the (final) Figma prototypes for the different screen sizes.



GOING FORWARD

Going forward, it would be very interesting to fully develop the product, including the parts left out of the MVP and test them.

Also, in a real world context, a system should be defined to make sure the product recommendations are unbiased and accurate. As a project for social good like Green should be ideally free to use, this could for example be achieved by encouraging users' contributions and having them reviewed by internal experts before publication.



WHAT I lEARNED

The main thing I learned with this project was the peculiarity of working with older adults. During the interviews and usability tests I realized how intimidated by technology and anxious to live up to the perceived expectations they can be. Therefore, it is even more important to make sure they feel at ease and not judged, in order to gain authentic insights into their needs.
It was also very rewarding to be able to provide people with a UX design that allows them to do something they wanted but couldn't do due to a lack of suitable tools.



🙏Thank you for your attention!
Feel free to contact me if you have any questions.


More projects:

Viniant

DIY Hub

Your Way