Green
A native app & responsive website that help people find eco-friendly alternative to everyday products.
Embedded Files
My role
UX Designer from conception to delivery
Responsibilities
UX Research, Usability Testing, Wireframing, Prototyping, IA, UX Writing
Project duration
November 2021
Open Figma prototype: App Mobile Tablet Desktop
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:
- The barcode scanning icon (and function) was removed and the profile icon was moved up from the bottom navigation bar in its place
- An explanatory text was added on top of the category tiles
- 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.
More projects:
Viniant
DIY Hub
Your Way
Google Sites
Report abuse