UX/UI Case study — Designing a SaaS to reduce carbon footprint
For the 5th and final project at Ironhack Paris, I had the great opportunity to collaborate with the French startup Greenly in a two-week UX/UI challenge.
Greenly is a young company, created in 2019, that enables companies and individuals to measure through financial data their carbon footprint and helps to compensate and reduce it. In 2020, their solution has been rewarded as one of the best and most innovative by France Fintech.
Again, I teamed up with my amazing teammate Bianca Chong!
Let’s dive into the project!
Discovery — Research and Data
The discovery phase, as a first step, is meant to conduct market research and gather data about our users.
Greenly, a change-maker in the carbon footprint calculation
In France, companies over 500 employees have to establish a “bilan carbone” which is a yearly report that calculates their carbon footprint.
This is where Greenly comes in.
For now, the startup provides a SaaS platform for companies to calculate their carbon footprint thanks to an automated solution. The digital solution allows for those in charge of the CSR (corporate social responsibility) in companies to manage their carbon footprint by measuring, reducing and compensating it.
Greenly also shares surveys to companies’ employees in order to get to know their habits on specific topics and quizzes to make employees more aware about environmental issues.
However, employee engagement remains low and Greenly wants to tackle this issue.
The challenge
Our challenge was to create an open and collaborative platform in order to engage employees in reducing their own carbon footprint and the carbon footprint of the company.
So, how might we increase employees’ awareness and actions on carbon footprint?
As an introduction to this challenge, we scheduled with Greenly a first 3-hour-kick-off meeting to set our roles, the timing of the project and get all the details we needed to begin this UX/UI design sprint.
This meeting enabled us to get to know each other, to determine a clear path to follow and make sure that we were all aligned.
Market research
We compared Greenly’s SaaS current features with its direct competitors. In this competitors features analysis, we can see that Greenly has chosen to focus on collaboration and education for their new solution in order to innovate.
Then we have defined a market positioning map to analyse where competitors and Greenly are placed in the market according to the following axes: educational VS informational / limited collaboration VS open collaboration.
Most of the competitors are more “informational” and placed between “limited collaboration” and “open collaboration”.
Currently, Greenly has great educational content. If we integrate a collaborative feature, this will create a new niche in the market for Greenly. This is where we placed the “Ideal brand”.
Following the market research, we conducted a user research to get to know our users.
User research
We first have conducted a user survey to get quantitative data and detect trends. This survey aimed to understand our users’ habits and knowledge concerning the environment. We reached 80 people and here are the main insights we got from the survey.
The most interesting insights were the following ones. We found out that more than 94% of the respondents were either somewhat concerned or very concerned about the environment but 65% of them were making a little effort to reduce their carbon footprint.
These results showed us the power of figures. We definitely had to dig more on that topic. Why were the respondents concerned but not taking action?
The survey results gave us directions to build our interview framework. We interviewed 5 people on their habits and knowledge about the environment. The goal was to get qualitative data to identify users’s habits, needs, motivations and frustrations.
We gathered all our insights within an affinity diagram. It helped us to categorize the feedback and identify the main pain points of the users.
With my teammate Bianca, we identified that there were three main pain points :
- users did not have enough time to properly educate themselves
- current solutions were too complicated
- educational content tended to be underwhelmingly engaging
Now that we had identified the main pain points, we had to define our user and the main problem to tackle.
Definition — Users and Problems
We borrowed traits from our users and condensed them into our user persona, Julia.
Julia D. is a strategy consultant working in Paris who is concerned about the environment. She needs to integrate effortless solutions in her daily routine while being updated about the environment in an efficient way.
We mapped out what would be Julia’s typical work day to understand what sort of problematic situations she could encounter.
In this scenario, Julia’s company decides to be more green and Julia has multiple ideas to share. However, she feels frustrated by the lack of clarity and collaboration. We wonder if there is a way to encourage teamwork while educating people in an impactful way.
With our user journey map, we were able to finally define the main problem with today’s employees. Young busy professionals need to find a way to be more engaged because current solutions don’t seem impactful and are too complicated.
To find a solution to this problem, we asked ourselves three questions. How might we make content more engaging, efficiently educate others, and encourage change in our daily habits?
Next, we will go over how we came up with ideas for our solution, and testing our prototypes.
Iterations — Ideation, Testing
We first held a brainstorming workshop with one of the co-founder and two employees of Greenly who wanted to take part of it.
We conducted this workshop in several steps.
First, we asked everyone to take 10 minutes to write on post-it any ideas they could come up with according to our three “How Might We” questions.
Then, we used the Crazy 8 method to sketch out potential features. Each of us took one or two post-it and made 8 sketches. 1 minutes per sketch. This method is a way to sketch out many ideas in a short amount of time.
Finally, each of us silently dot voted on two of the sketches we found the most relevant.
We then categorized our ideas in order to prioritize features of the SaaS using the MoSCoW method. This enabled us to decide which were the must have features of our future SaaS.
Features we listed as a must became part of our minimum viable product (MVP). Our solution must make employees more engaged, educate them in an impactful way and encourage collaboration.
Our four main features will bring awareness to employees’ company’s carbon emissions, allow them to vote for and track action plans, and help them learn more about the environment. With these features, employees will create habits that will naturally become part of their daily lives.
We started to work on the user flow that would describe step by step the path that our users would follow to complete the MVP.
Our prototype has two main flows:
- a path for voting for and tracking actions in the SaaS
- a path for learning something new
We then sketched out the low-fidelity wireframes according the user flows.
After gathering our work and agreeing with the sketches, we began our testing phase.
Testing
We started with low-fidelity testing. We conducted 5 usability testings with different users.
Here are the main feedback we got:
- icons on the left navigation bar are not all understandable
- filters are not clear enough
- cards should be obviously clickable
- difference between quizz and survey is not available
- reduce page with company’s results is not clear enough
We took the comments into account to create the mid-fidelity wireframes.
Then, we conducted 5 usability testing with our mid-fi prototype.
Here are the main feedback we got:
- make sure to differentiate elements that are clickable or not
- the navigation bar at the right top is confusing, titles are not clear enough
- reduce page with company’s results should be more interactive and seems repetitive with home page
- there are too many buttons in the challenge and project windows
Overall, we discovered that complex actions needed to be broken down and explained very clearly in order to provide a smoother user flow.
All these discoveries should be taken into account to create our high-fidelity prototype. We still had a few steps to cover in order to create the user interface.
Look and feel — Developing the user interface
Visual competitive analysis
We conducted a competitive analysis of Greenly and three direct competitors by gathering the main visual elements, colours that we found on their website. All have the green color in common and show many components of their online solution since they are tech companies.
We then defined 5 brand attributes for Greenly: transparent, sustainable, inspiring, innovative, collaborative.
From these attributes, we created a moodboard.
We tested the moodboard with 10 users. 4 out 5 attributes were found by the testers, meaning that we conveyed the rights ideas!
Then, we created the style guide where we gathered all the visual elements of our solution : colour palette, typography and visuals.
Let’s move on the high-fidelity prototype!
High-Fidelity — Final prototype
Our goal is to design a solution for employees of any company using the Greenly Saas, who want to take easy and effortless actions to reduce carbon footprint, create new habits and access to engaging and impactful information.
The prototype will follow these tasks:
1 / Discover action plans
2 / Vote for a challenge and Submit a project
3 / Learn something new
👉 Discover our high-fidelity prototype and interact with it > HERE <
We then conducted desirability testing with 7 users. They found the solution attractive, easy-to use, clean, fun and motivating.
Next Steps
Here are the next steps we would like to develop:
- A historization of the actions of the users
- A responsive version
- Develop the mobile app
Key Learnings
Through this challenge, here are the main key learnings we had:
- Be detailed oriented on everything you do and think
- Stay confident in your work
- Prioritize to be focused on your main goal
Finishing this 9-week intensive bootcamp with a real UX/UI project with Greenly was fantastically enriching. It was intense but I enjoyed this project a lot, thanks to my amazing teammate Bianca, an extremely supportive teaching team (Snezana, Anna & Ayesha) and a very open-minded and enthusiastic team (Arnaud, Sinclair) at Greenly.
What a journey! This is not the end of the adventure but only the beginning of a new path in the world of UX/UI design 🚀
Thank you for reading my last case study at Ironhack Paris ☀️
