Hazel
A website to complement the Hazel Climate Change mobile app
Project Type
Class Project for 412Technology
Dates
August 2021 - April 2022
Role
I worked in a team of five as a researcher, designer, and developer. Conducted literature reviews, developed user stories and scenarios, designed prototypes, and participated in full stack development of the website. We worked to create deliverables every three weeks.
About the Project
Our client wanted to extend their users’ ability to track and offset their carbon footprint.
Having a website component offered the chance to add unique aspects to the Hazel experience that separated the web and mobile versions.
Tools Used
The Problem
Our client had three requests for the website. The first being for it to be a complementary experience to the mobile version. The second request was for the website to have exclusive features. The last request was that the website carried the sentiment as the mobile app and inspired users to combat climate change.
The Solution
Create a website complementary to the mobile app. As the mobile app and website were centered on simplifying and helping users combat climate change, we didn’t want to deter them from continuous interaction by forcing them to interact with both platforms. Instead, we wanted to encourage users to engage with each platform in different ways.
User Research
Our client provided us with the target users they identified for the mobile app and these users would carry over to the website. The target users met the following criteria:
Users
Young women between ages 18 – 39 years old
College educated
High earning ($75,000+/year)
Type A personality
We created a visual to better understand our users and their attributes
2.5D Sketch
Literature Review
Our literature review showed that users between the ages of 18 – 39 years old were typically more technologically savvy, so navigating our website should be a comfortable experience.
College educated users tend to know more about and are more willing to actively combat climate change.
High earning users typically have the financial means to combat climate change, so they are more likely to offset their carbon footprint.
Users who have personality type A are ambitious, organized, and competitive, so they tend to be leading the charge in combating climate change.
Based on our client’s requests, we created a list of features that we wanted to add to the website to ensure it had some features from the mobile app and features unique to the web experience. The website features were:
Website Features
A projects section to view climate change projects that the user can donate to
An impact section where the user can select and purchase individual impact packages to offset their carbon footprint
A videos section where users could view educational videos about climate change. After the initial prototype, this section was removed and instead replaced with a community section where users could see what other people in their area are doing to combat climate change.
A me section where users can keep track of their individual impact over the course of using Hazel.
User Stories and Scenarios
We created a list of user stories and their scenarios to understand how users would interact with our website and its features.
Story
As a user I want to be able to filter the list of organizations so I can choose which one I want to support based on my criteria.
Scenario: A registered user wants to add search filters to find an organization that fits specific criteria.
Given the user is logged in and is viewing the list of organizations and filters;
When the user adds a filter;
Then the user can see a list of the criteria they will be able to filter organizations with.
Scenario: A registered user wants to apply the filters to find an organization that fits specific criteria.
Given the user is logged in
And is viewing the list of organizations and filters;
When the user applies filters;
Then the user can view a list of organizations that fit in the criteria.
Prototyping
*Note that the client went through a name change during the early stages of the project, so the previously named Arbor, will become Hazel in subsequent prototypes.
For the projects section, because the page would be filled with many projects, we wanted it to be simple with light text.
To do this, we decided to make the title of the projects the largest font size followed by a summary of the project. If a user wanted to learn more, they would then be directed to a separate page that featured all the information of the project.
Users could search and filter through the projects as well as add them to a list of favorites to view later.
The videos section was similar to the projects section to keep continuity. We wanted to keep this page simple and light on text, but also draw users in, so we opted to add thumbnails of the videos.
Initial Prototype
Projects Screen
Project Info Screen
Project Search and Filter Screen
Videos Screen
The basis of the Hazel experience was to help users feel less intimidated by the scientific and mathematical jargon associated with climate change offsets.
For this reason, we wanted to ensure that the individual impact section was easy to read and understand. We kept this page quite minimal with a solid background, large text for each bundle, adequate spacing between options, and the ability to hide other options with a dropdown for each section.
We followed this format for the cart, and the billing section of the website as well.
Individual Impact Screen
Checkout Screen
Billing Screen
The Me section is a section made for the user and their achievements.
We wanted to highlight how the users’ impact immediately, so we made sure that the first thing a user sees is the number of coins earned, and they impact. The numbers are featured in a larger size to emphasize a users’ growing impact, and we added visual elements like an arrow to show positive or negative impact immediately.
A user can then also view community impact, and the project that they are currently supporting.
Me Screen: User Impact
Me Screen: User Community Impact
Me Screen: User ProjectsHeuristic Evaluation
A Heuristic Evaluation based on Nielson Normans 10 Design Heuristics was conducted by another team using this initial prototype. Evaluators were given scenarios covering the core functionality of Hazel:
The ability to create and access a personal account
A search feature for projects
The ability to browse through educational videos on climate change
A cart and checkout feature to complete purchases
The ability to view one’s profile and personal impact accumulated through the use of Hazel
After analyzing our feedback, we found that we were successful in creating a straightforward minimalistic interface that helped users find information quickly without much confusion.
However, we did find that there were some areas of the website that were not navigable such as the lack of navigation bar in the cart and payment section, and the inability to return to previous pages in the me section.
We took this feedback as well as feedback from our client and redesigned the website.
Final Prototype
The first thing we changed in the final prototype was the structure of the website.
We decided that the website should look different for users who are logged in and those who are not.
A home page was added to act as a home base for general Hazel information and for user information if they are logged in.
Home Screen
This also led to the change of the navigation bar. When a user is logged in, they have access to the individual impact, cart, and me sections of the website.
Navigation Bar: Logged Out User
Navigation Bar: Logged In UserAnother large change was the addition of the community section.
The community section which was originally just a small part of me page, was redesigned to be a public page where a user can see the impact in their area.
This helps give users a sense of community and makes combating climate change less daunting when viewing it on a smaller scale.
Community ScreenFinal Results
The end result of the project looked very similar to the final prototype. The only changes made were slight changes to the shades of the color palette used and the addition of information from the database.
Home Screen
Community Screen
Projects Screen
Reflection
This project received positive feedback from instructors and was an in-depth experience into user-centered design and development.
Lessons:
Learning to work with user data was a new challenge that taught me a lot about differentiating between public and private screens when designing the structure of a website.
Future:
If I was to revisit this project in the future, I would like to redesign some of the pages to look slightly different from the mobile app version. While keeping the same style made the website very compatible with the mobile app, I think we could have designed the website in a way that was new but also compatible.