Good4Earth Eco-Quiz Design Project

UIUX Design - Freelance

Professional

UIUX

Sustainability

Desktop

Responsive

Good4Earth Eco Quiz Hero Image

Sections

Try the Eco-Quiz!

Platform

Web App

My Role

Product Designer (UIUX)

Duration

March 2022 - present

Tools

Figma, Usability Hub, Interact, Shopify, Google Form

Overview

Introduction

Eco Quiz is a quick assessment to understand your current sustainability lifestyle. The quiz taker also can learn what needs to be done to be more sustainable.

Who is Good4Earth?

Good4Earth is a virtual community of earth-loving supporters dedicated to fight climate change through our app. They help people quickly measure their impact on the environment through a simple, fun eco-score and provide actionable and personalized recommendations to lessen their environmental impact.

Challenges for Good4Earth

Their vision was to create a fun, interactive quiz to gather insights on consumers, where they are in their sustainability journey, and what their motivations were.The biggest challenge was balancing the number of questions to derive scoring and recommendation information and keeping it fun and interactive. Besides this challenge, other challenges include who this would resonate with, what would be our tone, what would be our channels, and how long the quiz should be. That's where I came in, wearing a consumer and UX expert to bring all these aspects together.

Goal

The Goal of Achievements at Good4Earth

Goal 1 - Design
Goal 2 - Clear Conetents
Goal 3 - Converstion Rate - 70%
Goal 4 - Target Users

I need to develop the quiz contents (questionnaires and answers), design the graphical assets, and implement the quiz at the end of April 2022.

I need to make an easy-to-understand quiz.

The goal of the quiz's conversion rate (the entry point to the completion) is 70%.

We need to get to know who our actual target audiences are.

My Journey to Launch (Design Process)

Beta Launch - Design Process

Beta Launch v1

I helped Good4Earth to develop the quiz contents, conducted the User Interviews to understand the personas and the clarity of our quiz contents, and designed the graphical assets. I also helped implement the quiz on their website and validate our quiz process.

Beta Launch v2

After we launched the quiz, we started to understand our audiences. First, we analyzed the events (entry %, completion %, and the conversion rate from entry to completion). We also gathered feedback to understand the quiz takers’ perspectives better. From there, I helped revise the quiz contents and the amount of quiz, and I modified the graphical assets to follow the revision of quiz contents. I also conducted the Preference Test to see if our revised designs resonate with the audiences.

Ideation

I was given some documents of brainstorming sessions (questionnaire and personas) that had been already created before I came in. So I set up a couple of meetings with my client and got on the same page. Based on the documents, I organized the categories and created the quiz with the user flow in mind.

Ideation - Questionnaire Categories

Quiz User Flow

We had a lot of questions to ask, and our goal was to let the quiz takers engage until the end, get the leads, and reach the results so we could gather the data. We also wanted them to have fun while taking our quiz and a smooth flow/transition to the end.

Ideation - Quiz User Flow

User Research

UX Researcher

User Personas

This initial set of User Personas was already created beforehand. We have three primary user personas, as shown below.

Good4Earth - User Personas

The reasons of these 3

These three categories are the ones who make decisions about what type of lifestyle they should have in the household. They establish their lifestyle beliefs and habits and create shopping styles based on that.

User Interviews

After I had built the quiz and learned the user personas, I sought user interviewers to get feedback on our quiz contents. I used Google Form to make it simplify the process. We had a total of 18 questions. The input follows after the examples.

Some examples of quiz

After I had built the quiz and learned the user personas, I sought user interviewers to get feedback on our quiz contents. I used Google Form to make it simplify the process. We had a total of 18 questions. The input follows after the examples.

Test + Iterations

Iteration - Feedback

Role: UX Researcher

Positive

Constructive

Takeaways

Iteration - Improvements

Role: UX Designer

Improvements

We made some adjustments based on our feedback to make it more transparent and friendlier.

Survey

After the improvements, I sent out another survey to the same interviewers to take the revised quiz and asked for their opinion. Here are what they say:

More Revisions

We received more great positive feedback than the initial quiz. However, we still have more improvements to make. Never stop to make it better!  😄

Takeaways

Quiz Platform Research

Role: UX Researcher

Before I moved on to design, we needed to search for a good Quiz platform that fits our needs. Click the button to see my findings. 👇🏼

UI Elements

Mood Board

Role: UI Designer

I didn’t have to create the website or the quiz platform from scratch. However, I wanted to clearly understand what kind of feel the quiz takers should have while they take the quiz. I also wanted to research what type of forms the other designers are using as a graphical solution for sustainability.

Takeaways

When I researched for eco-friendly-related images, I found a LOT of illustrations. The findings gave me feelings of warmth, organic, and humanization. They inspired and gave me a direction on how I should design for Good4Earth.

Graphical Assets (Questionnaires)

Role: UI Designer

Finally, I moved on to the design of the graphical asset. Since the Interact platform accepts the images for questions and answers, I precisely wanted to design for hero image and the questions so it will assist in a clear understanding of what Good4Earth intends to ask. I also carefully selected photographic assets for answers for more clarification on answers.

Some of the examples are below:

Takeaways

I am not an eco-friendly advocate. I had no idea specific questions about what they meant towards sustainability at the beginning. However, I researched why those questions are so crucial to sustainability. And I learned a lot from the research and, of course, from Good4Earth. It was essential to understand the meaning of the questions, why they wanted to ask them, etc. Soby understanding its importance, the way of asking the questions changed (e.g., Flight questions).

Graphical Assets (Results)

Role: UI Designer

When the quiz takers are done, they receive a result (they must enter their email address first).

This is the sample of the result page. The taker gets the score with the stage where they are currently. The graphic asset tells them how far you have to become Eco-Advocate (top-level). There are three stages: Eco-Curious, Eco-Active, and Eco-Advocate. They also receive some recommendations to change their lifestyle to become more earth-friendly.

More examples of Result assets

Takeaways

Within Good4Earth, we all agreed not to make the result page too long. We want the quiz taker to learn something important through our results with our helpful tips. I was thrilled that I helped them to make this quick and meaningful.

Other Stages before Launch

Front End Developer

QA

Development, Validation and Launch Day!

To help my client to succeed in the launch, I wore many hats for this project. Front End Development and QA were a part of this project. Please check out the detail page if you are interested.

Results + More Iterations

Results from v1

For our launch, we promoted our quiz to many people through social media accounts and word of mouth. Then, two weeks later, we looked at the initial data and analyzed what was happening regarding conversion rate—our goal was 70% from the entry point to the completion. We also looked at the other data, such as the primary personas, the dropoff point, etc.

Conversion Rate

Good4Earth - Conversion Rate

What we learned from here: Key Findings

We analyzed the overview data and each question and answered how they answered and where they dropoff. Here are the key findings.

Takeaways

We had remarkable findings that gave us a direction to improve our quiz shortly. From this point, we plan to meet frequently to decide what and how to improve our quiz contents.

Iteration v2 - Feedback

We received a lot of feedback regarding our quiz. Many of them were very positive. Some are constructive. We always have learning moments through feedback. 😊

Positive

Constructive

Takeaways

Everyone has different perspectives. Some think it’s a fair amount of questions, and some think it’s too long. It might be hard to find the balance. But it is worth trying. So we try, make errors, learn, and move on with improvements.

Iteration v2 - Preference Test

We reviewed the entry point of the quiz, and I suggested creating different banners to grab more attention, so it prompts more clicks to enter the quiz.

I used UsabilityHub to conduct the Preference Test. We asked the audiences to take this test through social media and other platforms and received 44 responses. The results are below.

“We are looking for an easy-to-understand yet impactful image to prompt answering our sustainability quiz. Which one do you think connects to the participants the best?”

Takeaways

We received unexpected results (we expected the trash image banner would be the #1 choice). However, we learned that we could use a particular one on a different platform for different audiences because of their reasons.

Iteration v2 - Improvements

What did we learn from the data and feedback? Here are examples of our improvements.

Other Changes

After we learned, some questions were obvious to see specific answers, so we removed, consolidated, or replaced questions to keep the number of questions low.

Good4Earth - Quiz Improvements

Takeaways

While modifying and improving our quiz, we also learned that we could inspire and make them aware of what type of lifestyle can cause and reduce carbon footprints by asking related questions.

Launch v2

The preparation for launch is still ongoing. We are planning to launch v2 in August 2022. I will keep posted the results as soon as we gather the data.

Challenges

We received many valuable feedback and suggestions. We hope to make the changes, improve the quiz, and add more valuable, informative features to the website and content to the social media. However,we still have many things to figure out how to deliver them efficiently to convey our mission to more people.

Overall Takeaways

During this journey of creating and improving the eco-friendly consciousness quiz, I was thrilled to be a part of a team with the same passion for bringing awareness to improve our planet. We brainstorm together when we need extra brain and ideas, and we get helpful information when we find something and incorporate it into our beliefs.

I like what I have experienced with Good4Earth. They genuinely care about our project, care about each other, and care about the planet.

Even though we only reached about 60% conversion rate instead of 70%, the overall UX & UI design I contributed helped the quiz takers understand the quiz content and our mission.The feedback shows that the design was very intuitive, which was the direction I was aiming for! 😄

As for the next step, I gained a lot of positive experiences and the following skills I earned from this experience to bring to the table for the next opportunity.

  • Communication and collaboration skills to deliver the client’s needs.

  • Listening skills to understand the other perspectives.

  • Design skill to design the elements with different angels/views in mind.

Comment from CEO - Payal Shah

Payal Shah
“Yuko has been an absolute pleasure to work with. She is creative, innovative and an awesome team player. In a start-up, you appreciate people who have capability to expand their skill-set, wear multiple hats, understand and bring a vision to fruition. We found all of this in Yuko along with a great attitude. She is going to be an asset to an team/company she joins!”

Thank you for reading this far!

Try the Eco-Quiz!

Platform

Web App

My Role

Product Designer (UIUX)

Duration

March 2022 - present

Tools

Figma, Usability Hub, Interact, Shopfify, Google Form

Who is Good4Earth?

Good4Earth was founded by women of color with the goal of nurturing future generations by making our earth a better place. They have created a virtual community of earth loving consumers, green startups, and nonprofits dedicated to fighting climate change through our app. They help people easily measure their impact on the environment through a simple, fun eco-score and provide actionable and personalized recommendations to lessen their environmental impact. They give our community a way to be continuously motivated toward good behavior, and recognize their achievements as they make sustainable lifestyle changes at their own pace. Together they inspire “ Good Change. Good friends. Good4Earth.”

Challenges for Good4Earth

Their vision was to create a fun, interactive quiz to gather insights on consumers, where they are in their sustainability journey and what were their motivations. The biggest challenge was to balance out the number of questions to derive scoring, recommendation information and keeping it fun and interactive. Besides this challenge, other challenges include who would this resonate with, what would be our tone, what would be our channels, how long should the quiz be. That's where I came in wearing a consumer and UX expert to bring all these aspects together.

Goal

The Goal of Achievements at Good4Earth

Goal 1 - Design

I need to develop the quiz contents (questionnaires and answers), design the graphical assets, and implement the quiz at the end of April 2022.

Goal 2 - Clear Conetents

I need to make an easy-to-understand quiz.

Goal 3 - Converstion Rate - 70%

The goal of the conversion rate (the entry point to  the completion) of the quiz is 70%.

Goal 4 - Target Users

We need to get to know who our actual target audiences are.

My Journey to Launch

Beta Launch - Design Process

Beta Launch v1

I helped Good4Earth to develop the quiz contents, conducted the User Interviews to understand the personas and the clearity of our quiz contents, designed the graphical assests. I also helped implementing the quiz itself in their website and validate our quiz process.

Beta Launch v2

After we launched the quiz, we started to understand our audiences. We analyzed the events (entry %, completion %, the conversion rate from entry to completion). We also gathered feedback for better understanding the quiz takers’ perspectives. From there, I helped revising the quiz contents, the amount of quiz, and I modifed the graphical assets to follow the revision of quiz contents. I also conducted the Preference Test to see our revised designs resonate the audiences.

Ideation

I was given some documents of brainstorming sessions (questionnaire and personas) that had been already created before I came in. I set up a couple of meetings with my client and got on the same page.Based on the documents, I organized the categories and created the quiz with the user flow in mind.

Ideation - Questionnaire Categories

Quiz User Flow

We had a lot of questions to ask, and our goal was to let the quiz takers engage until the end, get the leads, and reach the results so we could gather the data. We also wanted them to have fun while taking our quiz and a smooth flow/transition to the end.

Ideation - Quiz User Flow

User Research

UX Researcher

User Personas

This initial set of User Personas was already created beforehand. We have 3 main user personas as shown below.

Good4Earth - User Personas

The reasons of these 3

These three categories are the ones who make decisions about what type of lifestyle they should have in the household. They establish their lifestyle beliefs and habits and create shopping styles based on that.

User Interviews

After I had built the quiz and learned the user personas, I sought user interviewers to get feedback on our quiz contents. I used Google Form to make it simplify the process. We had a total of 18 questions. The input follows after the examples.

Some examples of quiz

After I had built the quiz and learned the user personas, I sought user interviewers to get feedback on our quiz contents. I used Google Form to make it simplify the process. We had a total of 18 questions. The input follows after the examples.

Good4Earth - Examples of Initial Quiz

Feedback

UX Researcher

Positive

Constructive

Takeaways

Iteration

UX Designer

Improvements

We made some adjustments based on our feedback to make it more transparent and friendlier.

Some examples of improvements

Good4Earth - Examples of Improvements 01
Good4Earth - Examples of Improvements 02

Survey

After the improvements, I sent out another survey to the same interviewers to take the revised quiz and asked for their opinion. Here are what they say:

More Revisions

We received more great positive feedback than the initial quiz. However, we still have more improvements to make. Never stop to make it better!  😄

Takeaways

We received more great positive feedback than the initial quiz. However, we still have more improvements to make. Never stop to make it better!  😄

Quiz Platform Research

UX Researcher

Before I moved on to design itself, we needed to search and find a good Quiz platform that fits to our needs.Click the button to see my findings. 👇🏼

UI Process - Mood Board

UI Designer

Good4Earth - UI Process Mood Board image

I didn’t have to create the website or the quiz platform from scratch. However, I wanted to clearly understand what kind of feel the quiz takers should have while they take the quiz. I also wanted to research what type of forms the other designers are using as a graphical solution for sustainability.

Takeaways

When I researched for eco-friendly-related images, I found a LOT of illustrations. The findings gave me feelings of warmth, organic, and humanization. They inspired and gave me a direction on how I should design for Good4Earth.

Graphical Assets - Questionnaires

UI Designer

Finally, I moved on to the design of the graphical asset. Since the Interact platform accepts the images for questions and answers, I precisely wanted to design for hero image and the questions so it will assist in a clear understanding of what Good4Earth intends to ask. I also carefully selected photographic assets for answers for more clarification on answers.

Some of the examples are below:

Good4Earth - Examples of Graphical Assets
Good4Earth - Examples of Graphical Assets
Good4Earth - Examples of Graphical Assets

Takeaways

I am not an eco-friendly advocate. I had no idea specific questions about what they meant towards sustainability at the beginning. However, I researched why those questions are so crucial to sustainability. And I learned a lot from the research and, of course, from Good4Earth. It was essential to understand the meaning of the questions, why they wanted to ask them, etc. So by understanding the importance of it, the way of asking the questions changed (e.g. Flight questions).

Graphical Assets - Results

UI Designer

When the quiz takers are done, they receive a result (they have to enter their email address first).

This is the sample of the result page. The taker gets the score with the stage where they are currently. The graphic asset tells them how far you have to become Eco-Advocate (top-level). There are three stages: Eco-Curious, Eco-Active, and Eco-Advocate. They also receive some recommendations to change their lifestyle to become more earth-friendly.

Good4Earth - Examples of Graphical Assets - Result Page

More examples of Result assets

Good4Earth - Examples of Graphical Assets

Takeaways

Within Good4Earth, we all agreed to not making the result page too long.We want the quiz taker to learn something important through our result with our helpful tips. I was very happy that I helped them to make this quick and meaningful.

Other Stages before Launch

Front End Developer

QA

Development, Validation and Launch Day!

To help my client to succeed on the launch, I wore many hats for this projects. Front End Development and QA were a part of this project. Please check out the detail page if you are interested.

Results from v1

For our launch, we promoted our quiz to a lot of people through social media accounts and word of mouth. Then, 2 weeks later, we looked at the initial data and analyzed what was happening regarding conversion rate—our goal was 70% from the entry point to the completion and we also looked at the other data such as the main personas, the dropoff point, etc.

Conversion Rate

Good4Earth - Conversion Rate

What we learned from here: Key Findings

We analyzed the overview data and each question and answer how they answered and where they dropoff. Here are the key findings.

Takeaways

We had remarkable findings that gave us a direction to improve our quiz in the near future. From this point, we plan to meet frequently to decide what and how to improve our quiz contents.d rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Feedback

We received a lot of feedback regarding our quiz. Many of them were very positive. Some are constructive. We always have the learning moments through feedback. 😊

Positive

Constructive

Takeaways

Everyone has different perspectives. Some think it’s a fair amount of questions, some think it’s too long, for example. It might be hard to find the balance in between. But it is a worth of trying. We try, make errors, learn, and move on with improvements.

Preference Test

We reviewed the entry point of the quiz and I suggested to create different banners to grab more attentions so it prompts more clicks to enter the quiz.

I used UsabilityHub to conduct the Preference Test. We asked the audiences to take this test through different social media and other platforms and received 44 responses. The results are below.

“We are looking for an easy to understand yet impactful image to prompt answering our sustainability quiz. Which one do you think connects to the participants the best?”

Good4Earth - Preference Test

Takeaways

We received unexpected results, although we learned that we could use a particular one on a different platform for different audiences because of those reasons that they gave us.

Improvements

What did we learn from the data and feedback? Here are examples of our improvements.

Good4Earth - Quiz Improvements
Good4Earth - Quiz Improvements

Other Changes

After we learned some questions were obvious to see certain answers , so we removed, consolidated, or replaced questions to keep the number of questions low.

Good4Earth - Quiz Improvements

Takeaways

While modifying and improving our quiz, we also learned that we could inspire and make them aware of what type of lifestyle can cause and reduce carbon footprints by asking related questions.

Launch v2

The preparation for launch is still ongoing. We are planning to launch v2 in August 2022. I will keep posted the results as soon as we gather the data.

Challenges

We received many valuable feedback and suggestions. We hope to make the changes, improve the quiz, and add more valuable, informative features to the website and content to the social media. However, we still have tons of things to figure out how to deliver them efficiently so we can convey our mission to more people.

Overall Takeaways

During this journey of creating and improving the eco-friendly consciousness quiz, I was thrilled to be a part of a team with the same passion for bringing awareness to improve our planet. We brainstorm together when we need extra brain and ideas, and we get helpful information when we find something and incorporate it into our beliefs.

I like what I have experienced with Good4Earth. They genuinely care about our project, care about each other, and care about the planet.

Even though we only reached about 60% of conversion rate instead of 70%, the overall UX & UI design that I contributed helped the quiz takers understand the quiz content and our mission. The feedback shows that the design was very intuitive, which was the direction I was aiming for! 😄

As for the next step, I gained a lot of positive experiences and the following skills I earned from this experience to bring to the table for the next opportunity.

  • Communication and collaboration skills to deliver the client’s needs.

  • Listening skills to understand the other perspectives.

  • Design skill to design the elements with different angels/views in mind.

Comment from CEO - Payal Shah

Payal Shah
“Yuko has been an absolute pleasure to work with. She is creative, innovative and an awesome team player. In a start-up, you appreciate people who have capability to expand their skill-set, wear multiple hats, understand and bring a vision to fruition. We found all of this in Yuko along with a great attitude. She is going to be an asset to an team/company she joins!”

Thank you for reading this far!