Inês Duvergé
Building an eco-reviews platform from the ground up

Prototype

An end-to-end design side-project I've been working on to try and make a difference in our planet through tech. We're creating a web platform that enables consumers to give feedback to brands about their sustainability efforts and much more.
Role
Sole designer responsible for end-to-end product & brand design
Timeline
Ongoing from
Jun 2020
Type
UX/UI, design system,
branding
Cover image showing final design

The start of something new

It all started with an idea from a friend of mine that reached out to me since she knew I’d be keen in helping with her sustainability mission.

The team was initially composed by 2 junior developers, 1 manager/CEO, a marketing manager (later on) and myself as the sole designer, all working remotely from different corners of the world.

They reached out to me with a very rough product idea and were looking for a design partner as invested as they were. My role would be to help shape the strategy of the product itself as well as deliver its design end to end.

What problem are we trying to solve?

Concerns over climate change have risen significantly and fortunatly more and more people are trying to become more sustainable on their day to day. One big shift we are witnessing is how consumers are being more mindful of the choice of brands and services they use.

However, we also noticed it is not easy nor quick to find reliable information about a company's environmental efforts nor to share our input with brands we love to encourage them to change.
Multiple screenshots of eco-reviews published online in personal accounts or forums

Problem 1

Spread out information 💻

  • How can I be educated about a company's environmental impact?
  • Could there be a single place where companies disclose that information?
  • Could there be a single place where consumers share their feedback about a company's sustainability efforts?

Problem 2

Trust 🤝

  • How can I trust a website's statement, a marketing campaign, or an influencer that promotes an eco-brand?

Problem 3

Individual reach 📣

  • How can I, as a single individual, contribute to the active change of big corporations and brands?
  • How can I motivate brands that I like to make a change?
Can we create a platform where consumers and companies meet to share information about their sustainability efforts?

The proposal - giving voice to consumers

After we analysed our competitors' research and user interviews where we looked at how people are currently finding more sustainable brands we realised our solution could have many ways of solving this problem.

However, we needed to start somewhere to create a realistic MVP that was possible to build in our spare time.
Wheel diagram that shows the solution proposed from writing a review to getting an eco-reward
Bringing consumers to our platform is our main priority so enabling reviews became our point of focus. Our plan was then to build a whole different set of products around the review system.

Building the brand foundations

One of the first things I did when I joined was setting up a mini-workshop call with the team which, aside from being a great ice-breaker, allowed us to start understanding the direction we would like to take the brand.

We defined the mission, purpose, and values of Greenpick independently of what the product would be specifically. They became the north star of what we should look at when making product decisions.
4 brand values: Honest, Optimistic, Change-maker, Fair
Brand personality

Making it tangible

From there I've built the Greenpick brand identity that encompasses the aforementioned values. Some of the touchpoints can be found below in a very brief summary developed to enable all team members to produce consistent outputs (PDF’s, presentations, socials,...)

Note: The symbol was designed by Sofia Charola before I joined. It was adapted in color to fit the new branding (with permission).
Soe images taken from the brand guidelines including touchpoints, logo application, color

Testing the eco-reviews concept

Before we started designing the actual solution we decided to test the eco-reviews idea through a simple WhatsApp group with 30 volunteers. During 2 weeks they could post ‘eco-reviews’ on any product or service they used. 



Afterwards we created a survey and interviewed the volunteers. This gave us a good picture of the challenges faced which lead to various ideas of possible design solutions.

Numeric summary of the whatsapp test: 30 participants, 14 days, 91 reviewsWhatsapp messages with eco-reviews from the group testers

Some of the insights we've learned

- Images were shared often

- People frequently engaged with eachother after a review to share a similar experience or to suggest a solution
- There were cases where the review wasn’t ‘good nor bad’ but more of a question
- Some people felt shy about sharing a review about a specific product. They’d like it to be anonymous;
We actually ended up rewarding our most avid testers with an “eco-reward” by planting a tree with our own hands on their behalf and provide them with a certificate.
Tree being planted by the team and the complementary certificates

Different user types, different user stories

Throughout the interviews and surveys we started identifying different potential user types and their needs. We spent some time as a team researching and defining them before entering the design phase.
Screenshot of one of our video calls discussing the sustainable brand index 2020
One of our team calls going through different reports on sustainability behaviour
This research led us to create the user stories seen below, that helped define our main focus for the project.
User stories formatted as 'As a user...I want to...so that I can...'

The ideation phase

Using my trusty pen and paper, the next step was making sense of the flow on a user-to-screen level. Most of the user stories were accounted for and I tried to explore some different ideas based on them.
Hand drawn sketch of architecture
Hand drawn wireframes of consumer side main flow
Hand drawn wireframes of company side main flow
left arrow
Right arrow

Prioritizing a Minimal Viable Product (MVP)

We obviously wanted to cover all the user stories and all the features but realistically we needed to get something out to test first. Plus we are a small team with mostly developers working on the side of their main job. 



We decided to focus on the core of the platform: enabling a user to write a review and a company to read/respond to it. A more complex search with categories became something to explore in a very near future.
Graph describing the priorities for the consumer - write reviews, read reviews; and company - respond to reviews and sustainability profile

Creating the flows and initial prototypes

This helped us find missing states and create a closer representation of the MVP.

An initial prototype was developed and tested with our group testers where the main takeaway was that the review flow was still not simple enough. A lot of iteration went into the review flow and will be shown later in this case study.

Wireframes of main flow on consumer side
Wireframes of main flow on Company side
left arrow
Right arrow

Translating the Brand into UI design

Making the reusable building blocks of our platform was since day one a priority to make development and design faster. 



When creating the design components it was important to perpetuate the brand aesthetic in a way that also respected fundamental UX/UI bases.
Components summary
Some of the components created to fasten the design and dev process

Testing and iterating on the review system

We’ve been constantly testing the prototypes throughout the different stages of fidelity with friends and some volunteers we met through our Instagram account.



Something we have been heavily focusing on is the the actual review system since it’s one of the key features of the platform. Therefore, it suffered several iterations to get to where we are now.



We started with a 3 score system with the assumption that it would make it simple for most non ‘eco savy’ users to evaluate an initiative on ‘bad, average, great’.

But here’s what we’ve observed:
Three smiles review system and main issues found with users

Upgrading it to a 5 option review system

As explained in the image above, from our user interviews we understood that the 3 option review system wasn’t working, so we began studying other solutions.

Five smiles review system

1. Expanding the smiles range

👎
Expressions were hard to distinguish. They need to be in context next to each other to be understood.
👎
Difficult to read when used in smaller sizes
👎
Relies too much on color making it not accessible
Five stars review system

2. The standard 5 stars

💚
Users are very familiar with it since it's used as an universal review system
👎
Associated with reviewing quality overall. It doesn't instantly communicate eco-reviews
Five leaf review system

3. Adapting to our needs

💚
Leaf skeuomorphism. Easier to understand the review is about sustainability (or at least it challenges the thought before reviewing)
💚
Associated with our brand and logo
👎
Less familiar
After testing again we decided to go forward with the third option. We will, however, continue to improve our review system as we get more feedback since it’s crucial to the sucess of the platform.
Hover interaction on leaf system

Simplifying categories

Our goal is always to make reviews as accurate as possible. However it quickly became clear that having too many sub-categories was creating friction to our users as they were too specific and took too long to understand.
We had to remind ourselves that the ultimate goal is to make eco-reviews accessible to all. So a balance between simplicity and specificity needs to exist.
We decided to scrap completly the sub-categories and focus on the 4 overall categories by making them clearer.
Note: The choice of categories itself was based on my colleague’s research in sustainability KPIs around the world that applied to all company types (in the future we want to have different categories depending on the company type)
The five leaves review system

Preparing to launch

At the time of writing this article, our 2 software engineer friends are finishing the first version on their free time. We’re actively working together to be able to realistically launch it to our users.



We want to keep iterating as well as adding new features that add more accuracy on the company side.



The initial launch will include the following features:



Searching. and analysing a company's impact

Agreggating all information about a company’s sustainability efforts in a simple, comprabale way was crucial. In the future we’d like to further develop categories to find new brands.

Writing an eco-review

The goal was to have a balance between ease-of-use and accuracy. Independently of how ‘eco-savy’ someone is, we wanted it to be possible to always give feedback. We made it so that reviewing categories isn’t mandatory, but it also means that they’ll be ranked as a less relevant result.

Receiving eco-rewards on the way

To incentivise users to write more eco-reviews we reward them with a little sustainable present – a tree planted on their behalf. This flow was designed to give a delightful moment to the user through an animation.

Creating a company profile

A step by step form that gives companies the opportunity to personalise their profile and display information about their sustainability efforts. It was important to give freedom at this stage but still guide them through examples of what they can include.

Responding to reviews through the dashboard

Ou goal was always to open a dialogue between costumers and companies to clarify any misconceptions and help each other achieve a greener future. We’ve avoided reinventing the wheel and attempted to make the experience as straightforward as possible.

Homepage

Interactive desktop prototype

The results until now

Even-though we've recently decided to pause the project, I can happily share some of the achievements with this project:
Dot
Secured support from Startup Voucher Portugal that helped support some of our costs.

Dot
A platform that gathered +50 brands on it's first few months, that made a small impact in the sustainability space 🍃
Dot
Used my extra free time during the pandemic to work on a project that forced me to be more creative and get out of my comfort zone.

Key takeaways

It has been a truly enriching experience building a product from scratch in my spare time during the pandemic. From working remotely with a newly formed team, to using Figma for the first time for the whole project.



However, the key challenge really was aggressive prioritisation. From the selection of features itself (product strategy) to designing them efficiently by reusing components and page layouts. Compromises had to be made along the way which in the end was a great exercise in of itself.

Things to improve

Below I highlight a few aspects I'd like to improve in the near future:

– Adding categories to search (eg. Fashion) to improve discoverability of alternative brands

– The ability to flag spammers or fake reviews  

– More specific sustainability filters depending on typology (eg. Vegan)

– Be more mindful of accessibility while designing and implementing

Massive thank you to the Greenpick team for all the late wednesday sessions together: Beatriz Ferrer, Joaquim Ferrer, Rita Santos.

Previous

Arrow left

Next