EcoLearn — A Responsive Web Design with an Approach to Eco-sustainability
Executive Summary
In this report, we approached the problem space of city-dwellers that were trying to be environmentally conscious, but didn’t feel like they were doing enough and wanted to learn more about how to do so. We anticipated that they would have very specific city-struggles, such as lack of access to composting and recycling bins. We created a survey and screened for potential candidates.
We interviewed 4 users that considered themselves to be moderately informed, and 1 user that considered himself very informed. When we synthesized the data from our user interviews using an affinity map, we noticed that many of our users expressed frustration at a lack of transparency regarding sustainability labeling and proper recycling, and felt guilty knowing that they often prioritize their own convenience and affordability. From this data, we created the persona of Cora, as well as a visual representation of a typical day in her life, to more easily empathize with her journey to become more environmentally conscious.
From here, we ideated and came up with a site called EcoLearn. Its primary functions are to provide reliable information for readers to quickly read to become informed, as well as gamified quizzes to challenge and grow the user’s knowledge on specific topics. EcoLearn was designed to provide information, positive reinforcement, as well as some consistency by way of setting weekly goals in a user’s personal account.
In order to create a minimum viable product (MVP), we used a MoSCoW map to determine which features were the most necessary, and a prioritization matrix to determine which features would add the most value to our site for the least amount of effort.
After prototyping EcoLearn, we tested the mobile website on 5 different users to see how they would interact with the app. We asked our users to test the information page, the signup process, the quiz pages, and the menu options. From our user testing data, the most important insight was that the users were not always clear what would happen when they signed up for an account. From this knowledge, we inferred that we need to make the purpose of our website clearer at a first glance. Other changes were also considered for the high-fidelity prototype.
When these changes were made, we created a high-fidelity mockup and tested them again on five different users. For the most part, the users tested well and seemed to show a slight improvement, or none at all, over the original design. We hope that this demonstrates that the design is generally fairly intuitive.. A high fidelity desktop prototype was also created in accordance with a few suggestions and insights from the second round of user testing.
In the future, we would love to implement a social feature to foster a sense of community amongst more Coras, so that they can feel supported along the journey to becoming more environmentally conscious.
Scope of Work
- User Research
- Redefined Problem Statement
- Insights to Features
- Mid-Fi Design & Testing
- High-Fi Design & Testing
- Prototype
- Moving Forward
User Research
Goal
To understand users’ goals and pain points when interacting with the environment, and when making environmentally-driven choices
Methodology:
Used a screener survey to find and interview 5 qualified users and conduct user interview on them.
Hypothesis and Assumptions
People living in the city are struggling to make environmentally friendly choices, but they want to do more.
- There are physical barriers preventing people from making eco-friendly choices.
- It is difficult to compost in the city.
- We assume it’s not convenient to do things like find recycling bins and shop sustainably.
Initial Problem Statement
People that are currently living in the city face many obstacles in their desire to live an eco-friendly life. How might we remove those obstacles?
Idea Users
People who work and live in the city, concerned about the environment, but non-expert, interested in learning more.
Quote
“It’s really elaborate recycling going on [in California]. I really just stood there with a tray of trash. I didn’t know where to go!”
“I used to assume that if something’s plastic, I can just put it in a plastic recycling bin, but what do the numbers on the plastic recycle icons mean?”
“I usually go with whatever choice isn’t too inconvenient. ”
Affinity Mapping
- Users prioritize convenience over some environmental choices
- Users believe there is always more to learn about eco-conscious choices
- Users’ eco-friendly choices are facilitated by their settings
- Users feel guilty when they do not make eco-friendly choices
- Users are worried about the future of the environment
- Users find it easier to make eco-friendly choices when their communities are supportive
- Aggressive activism does not convert users
- Users hope to influence others by setting a good example
- Users have taken action to become more environmentally conscious
Persona
Goal: Learning to recycle properly
Needs: Easy access to reliable information
Frustration: Feels guilty when she chooses convenience
Journey Map
Feature Prioritization Matrix
MoSCoW Map
Design Studio
Mid-Fi Wireframes and Annotations
Task 1: Have the user find information about recycling
User begins by tapping “Get information”.
When the user taps “Recycling” from the Information dashboard, the page scrolls down to the section on recycling.
Task 2: Have the user set a weekly goal
We had the user tap “Sign Up” leading them to create an account. After the user taps “Continue”, it leads them to the goals setting page. User slides the “Recycling” slider to indicate an increase in quiz frequency. User taps continue, leading to their quiz dashboard. Their goals are represented by the circle around each image on the quiz dashboard, as shown below.
Task 3: have the user take a quiz
User taps on the “Recycling” image to take a quiz about recycling. User taps on the answer, prompting a continuation page. User taps “next” and leads to the quiz dashboard with an updated progress wheel to show the user how on track they are to their set goal.
Task 4: have the user edit their goal
The user taps the menu button, leading to the menu drawer to slide out. User taps “Goals” which leads to the goals page. User swipes right on the slider for the “Recycle” topic, increasing the frequency of quizzes by one, from 2 times a week to 3 times a week.
User taps “continue”, which leads to the quiz dashboard with an updated progress wheel, splitting their progress into 3 parts.
Mid-Fi Testing Scorecard
Mid-Fi Prototype
High Fidelity Prototype and Testing
Screen Flows
This task was changed the most- the target screen was now located in “Account Settings”, where we added a field for the user to adjust their preferences, particularly in goal settings. We also changed the wording of the other two options, which were to navigate between information and quizzes. We changed them to match the buttons on the front page. In introducing some consistency, we hoped this would make the message clearer.
High Fidelity Testing Scorecard
Recommendations
In future iterations, we recommend placing the “Goals” edit function on a more obvious place on the screen on the “Quizzes” dashboard, since that is where some of our users looked for it. However, since other users were able to easily find the “Goals” option in the menu, this remains to be seen with further testing.
We would also recommend being a little bit more clear about the purpose of our website and each page. Although we added more description to the landing page, as well as subheadings for many of the other pages, it seemed that users still reported slight confusion, indicating that they were either not carefully reading the smaller text, or they did not understand it either. Further testing is required to divine the difference between the two.
In taking this project a bit further, we would like to see how a community can be fostered within this website. Our insights revealed that Cora felt encouraged to make economically friendly choices when she felt supported amongst her peers, and tried to lead a life by example. We believe that social features could be incredibly valuable to Cora, such as quiz leaderboards, sharing information amongst friends, a forum to add tips for living such a life. However, there were insufficient resources to implement such detailed features in our MVP. Instead, our idea was represented by a small “share this fact” feature embedded in our quiz.
