A UX/UI design challenge to create an innovative website to educate users in an area of sustainability.
TIMELINE: 2 weeks, Team of 3
TOOLS: Google Suite, Miro, GitHub, HTML, CSS coding, Figma
MY UX ROLE / TECHNIQUES:
Google Survey, User Interviews, Affinity Mapping, User Persona, User Journey, Competitor Analysis, Style Tile, Mid-Fi Wireframing, Usability Testing, Simple Landing page Coding
Let’s begin by taking you on our research journey.
For our group project, our team wanted to emphasize an area of sustainability. Sustainability has three main pillars: economic, environmental, and social.
We focused on the environmental pillar and created a google survey to learn about individual’s recycling knowledge and habits so we could understand their needs and pain points.
Our quantitative survey included 20 respondents that asked demographic information such as age, income, and location. We found that 20% of our respondents were located in a city versus suburb or rural area.
The survey asked respondents about their knowledge in different areas of recycling as to better understand our users and if they would like more information about recycling. As you can see from the data, 55% of respondents wanted to learn more about recycling batteries.
Since batteries are categorized under hazardous waste, we wanted to dig deeper by conducting qualitative interviews so see if we could narrow our sustainability focus even more.
Our team conducted 5 interviews and asked individuals How, Where, and Why Questions such as:
What impact do hazardous materials have on the planet, what are proper ways to dispose of hazardous materials, and if they knew of locations to properly dispose or recycle hazardous materials.
We created an Affinity Diagram and synthesized the results from our research. We found out that our users didn’t realize that their recycling or non recycling actions can have lasting impacts on our environment, they lacked information on ways to dispose/recycle hazardous materials, and they either didn’t have accessible recycling sites or didn’t know where to recycle certain materials. With our interviews completed, we found the focus of our project and answered our how, where, and why questions.
The research provided us with our Aha! moment with insights to understand and therefore validate our users needs. Our user persona, Nora, is relatable on so many levels because she cares about environmental issues and wants to teach her son to be environmentally responsible. Nora wants to participate in recycling efforts but doesn’t know where to go since she doesn’t have access to recycling bins outside of her apartment. Nora would like to be able to find out what products can be recycled nearby and where to dispose of hazardous materials like old electronics and burned out lightbulbs. Most importantly, we now understand Nora’s pain points.
With our problem statement we knew what we needed to solve, and wanted to imagine a journey that Nora would go on if our team were to solve these problems, and meet her needs.
We were now ready to start ideating a solution. We started looking for competitors who provide similar recycling services. Our biggest standout was earth911. We found a lot of strengths we wanted to implement for our project, however, the usability was one of their biggest weaknesses along with their aesthetic.
After reviewing other competitors, we were able to narrow the focus for our website and concentrate on the proper disposal of hazardous material and the impact on the environment.
From the competitor analysis, we had a general idea of what our product should look like. We started putting our ideas together into a digital wireframe and style tile.
A member from our design team came up with our name, terrene, earth like. We chose a green and blue theme in line with terrene’s identity. We also did accessibility tests on our colors and made sure they passed before implementing.
Together as a team, we strategized and agreed on the elements for a basic mid-fidelity model. Here, our goal was to make a testable prototype to conduct usability testing.
We conducted user testing. Users found it difficult to differentiate clickable buttons and needed more imagery and icons throughout. They also wanted a larger home button.
We designed a higher mid-fidelity model with the user feedback.
