Prototype created in Invision
Sarah Pugh
UX designer
Sustain
Empowering users to make a BIG difference
on an individual level.
Overview
Time
8 weeks
(February - April)
Role
Product Designer
Sole UX / UI development
Tools
Figma
Miro, Invision, Adobe Create Cloud
Problem
The amount of trash humans produce has become a monstrous issue, affecting the entire planet. Trash is an out-of-sight out-of-mind epidemic, one that is becoming quite costly, in many ways. However, waste is not the problem, we are.
Solution
Sustain was designed to provide a simple yet innovative system that enables users to feel that they can make a positive, significant impact. The goal was to keep things simple but carefully increase user awareness and influence change in daily habits.
Features
Householding waste + recycling tracking
Rewards System for positive habit changes
Informative platform for common FAQ’s on recycling
Integrated scale system
Sustainability product store
Research
22%
Dallas Resident Individual Recycling Rates
4.4
Lbs. Waste Per Person
7%
Dallas Apartment Recycling Rates
440
Million Lbs. Per Day
Secondary Research
The city of Dallas has issued a zero waste initiative intended to be reached by the year 2040 and has allocated 2.5 million annually to support that goal.
Currently, Dallas has a sanitation services app and website, however it doesn’t receive very much traction. The site and app aren’t user friendly. More of this will be discussed in my secondary research, as I had users give feedback on the current sites in place.
Primary Research
To get more in-depth information about what users would like a recycling app experience to emulate, I conducted a screener survey to recruit 5 participants, then synthesized my findings into affinity groups, empathy maps, and finally personas.
Screener Survey
The main objective of the screener was to find and request the participation of people who were environmentally conscious or willing to consider it.
Participant Characteristics:
Users ages 18-70
Use web and mobile services regularly (3+ times a week)
Own a smartphone, or have access to one
The final participants chosen were six people - male and female - varying in ages.
Interviews
The participants were all interviewed over Zoom or in person.
General Findings:
Difficulty in finding consistent information about anything really. Especially curbside recycling specifics + local recycling outlets
Feels hopeless unless everyone is on board and understands how to recycle correctly. Otherwise it feels like batches are wasted.
Develop a system to acknowledge individuals, businesses or other groups in the community who are promoting recycling. Rewards incentives would be a plus.
Synthesizing Research
I analyzed the interviews to discover key pieces of data from each interviewee, in order to group sentiments and insights to better understand the relationship between the groups of data.
Affinity Maps
The affinity map allowed me to visually interpret common trends on trash and recycling behaviors and habits as well as their sentiments towards the amount of change they were willing to make in their day to day lives. There was also a lack of knowledge on what they can do to make things successful for all of us. Overall, these findings were crucial in directing me to potential solution.
Empathy Maps
In addition to organizing the insights by similarity, I also organized them using Empathy Mapping so that I could identify each unique type of user. These Empathy Maps factor in what the users Think, Say, Feel, and Do in order to understand the complete picture of our users.
Personas
Based on the two categories that emerged from empathy maps and direct quotes from the interviewees, Based on these results, I was able to develop three distinct personas and potential users.
Attentive Environmentalist
Overloaded Mom
Young Professional
(HMW) How Might We's
From the research done, we landed on these problem statements. Understanding potential challenges the users could face allowed me to concentrate on design opportunities.
How might we...
...make recycling/waste management a convenient part of our users’ day?
...make information easily available for users who are motivated to recycle?
...motivate users to recycle or reduce their garbage production?
...make this a large local movement a user can feel proud to be a part of?
...help a user keep track of their progress in their garbage reduction and improvement in recycling?
...create a mindset directed towards environmental awareness?
Ideation + Design
Brainstorming
After synthesizing the research, I started primary ideation. For the first round of the ideation, I quickly sketched out some solutions that could solve the HMW statements. These visuals helped me begin to understand how this product was going to address, and potentially resolve, the user’s problems.
User Stories
I then created user stories to understand and identify potential functional needs and features that might go into my design. From there it was important to sort them by priority, and determined the Minimum Viable Product that contained only essential features an early user would need to complete the most critical tasks.
Site Mapping
A sitemap was crucial for my ideation, to ensure that each action a user could potentially take. The site map helped me visualize what screens were needed and where they would best fit to create an intuitive experience.
User Flows
After considering ways a user could navigate through my app, I pinpointed four Red Routes that were necessary for the user to complete a task. These user flows were: creating an account/adjusting settings, Tracking household + city data, locating product recycling information, and finding and using rewards points.
Iterations
17
Initial Sketches
22
Low Fidelities
Sketching Frames
Now it was time to compile everything and apply by sketching the Happy Paths out into screens.
Happy Paths:
Create an account + establish settings,
Track households trash + recycling amounts
Locate recycling product information
See + redeem points/money on products
Low Fidelity Wireframing
After iterating on these sketches, I began refining the ideas into low fidelity wireframes in Figma. Doing the wireframes helped to refine the scale and spacing in reference to the screen size, which helped prioritize what information goes where.
Design
Design Systems
With the skeleton of the app refined, and nearly ready for further implementation, the next step was to create a design system to ensure consistencies by applying standards that make the app unified and easy to navigate for the user.
I did this by generating a brand platform, moodboard, and style guide.
At this point in my project, I had settled on the name “Sustain” for my IOS product.
Brand Platform
Vision/Mission: To be a leader in a waste management movement by creating a simple yet innovative system that enables users to feel that they can make a positive, significant impact. Our goal is to keep things simple but carefully increase user awareness and influence change in daily habits.
Brand Attributes + Personality
Although this is a large problem that has gone unresolved for too long, we want the user to feel empowered with little changes made to their daily routines. So it is very important to keep them from feeling scolded or berated.
Simple, Impactful, Sincere, Engaging, Dependable, Trustworthy.
Moodboard
Logo Development
Style Guide
Putting together the style guide was easy after defining what Sustain was all about!
As a bonus, I also took some time to create a logogram for Sustain to further enhance the overall experience of the app and to practice my graphic design skills.
High Fidelity Iterations
Using the style guide and mood board to direct this process, the initial UI design was brought to life with colors and graphics.
Prototyping + Testing
Usability Testing
You can write here as much as you want, tI used InVision to create the prototype that helped me present the project to some users to generate feedback and identify areas that were less user friendly and could use adjustments.
Because the main goal is to keep this app simple, it is important to conduct a usability test to make sure the app is easily navigable. Based on the research interview conducted it was clear that if it is too difficult to find statistics or rewards, the user may deter from using the app altogether.
Objectives
Main: Easily navigable
Sub: Initial UI impressions, Rewards Systems,
Test Questions/Tasks:
Can users quickly locate product details?
How do the participants respond to the organization of the home screen UI?
What does the user feel about the home bar options?
Does the user feel like anything is missing/should be added?
Could the user see themselves using this app because it’s a simple way to make a difference?
Usability Testing Results
Most of the users operated the prototype pretty easily and in general they felt the functionality of the app pretty intuitive.
However, there were some issues that almost all of the participants either experienced or questioned during this phase. I gathered these results and identified a list of priorities ranging from Critical to Normal, which helped me organize which improvements needed were immediate for the final iteration.
Final Product
3
Iterations
27
Screens
100%
Contrast Ratio Compliant
AA, AAA
AA, AAA
4
Happy Paths
Looking Forward
Future Development
Coming full circle based on research, Sustain could could be applied to the commercial side for apartments, offices, and other public areas.
Pair with the city’s garbage trucks interfaces
Apartment complex managers tracking