ScrapMap
SUMMARY:
ROLE: Lead Designer
TOOLS: Optimal Workshop, Adobe Xd, Invision
TIMELINE: 4 months
BACKGROUND:
As with all good projects, I began this one by staring at a pile of garbage.
It was March of 2020 and I had recently returned home to California after living in South Korea. I was standing in the kitchen trying to remember whether chip packaging was recyclable (it’s not). In the recycling center of my apartment in Seoul I had gotten used to meticulously washing and sorting all my recyclables, but back at home I’d forgotten the local rules and the information I could find was unclear and inconsistent.
This problem was unsurprising, considering that America’s recycling system includes about 10,000 different providers, each with different rules about what can be recycled.
ScrapMap is a service designed to demystify the recycling process and help users make the right choice for their community quickly. The app can tell users whether or not a material is recyclable, as well as direct them to their nearest recycling location.
My role was to design the app from start to finish, beginning with user research and seeing the project all the way through, including user flows and wireframing, to its final prototype.
RESEARCH:
I began with an extensive look into recycling processes through secondary research, which revealed a complex network of different service providers that makes it difficult for consumers to get accurate information specific to their area.
Additionally, EPA data showed that 25% of materials put in recycling bins are contaminated and 40% of Americans are aspirational recyclers, throwing items they are unsure about in the bin, and hoping for the best.
Interviews with prospective users informed me that not only was there confusion and a lack of provider feedback that led to this guesswork and so-called ‘wishcycling’, but that this confusion was directly contributing to a feeling of futility and concerns over whether their efforts were worthwhile.
Creating an affinity map based on these interviews helped to inform my empathy maps and personas. These user personas visualize user needs, desires, and pain points using the information gathered during research, and I referenced these personas throughout the design process to ensure that I was designing for the user and not myself.
INFORMATION ARCHITECTURE
Each feature was then broken down into smaller tasks that could be implemented as deliverables, tested, and then iterated upon. Each task is written from the user’s perspective in order to describe the type of user, what they want, and why the feature benefits them.
After the sitemap, I dove into creating user flows of each feature to get a birds eye view of how the user might navigate through the different features of the application. User flows also helped me identify where the pitfalls of the app might be if a user found themselves in an undesirable situation.
What happens if they encounter an error or make decisions that deviate from the happy path? How do I account for those situations in my designs? How do I make their journey as painless as possible? Perhaps the biggest takeaway from sitemaps and user flows was finding the points of entry and eventually deciding that for the purposes of this project I would not force the user into account creation, and would not require input or access from them unless absolutely necessary.
WIREFRAMING
Next, I began the process of wireframing by making some quick sketches which I used to create a paper prototype. This paper prototype was remarkably helpful for getting first reactions from potential users before I moved on to creating wireframes in Xd.
VISUAL STYLE
For the visual elements of ScrapMaps user interface I wanted to set a tone that was approachable and clean, to emphasize the ease of use and clarity of information. The brand’s typeface is a modern, legible NexaDemo in two weights, and the palette’s navy and blue-grey are used most frequently for borders and type. The bright accent colors were inspired by multicolored recycling collection bins and emphasize the approachable, fun elements of the service.
MOCKUPS & USABILITY TESTING
As I began working through the creation of mockups I put my prototype through the faces through user testing. This testing feedback was immensely helpful and led to some fairly large changes to the visual design as I attempted to improve readability and address potential painpoints inside of my red routes.
One of the biggest issues I addressed was the clarity of the search results page, as well as the prominence of the main search bar, and collapsing the Materials and Collection Method pages into one in order to provide the correct information to the user even more quickly and clearly. Participants in the usability test seemed to really enjoy the News and Points features and so in my revised mockups I highlighted and refined these screens.
After incorporating this crucial feedback from 2 rounds of usability testing we ended up with the completed prototype you see here. This project was a great opportunity to see a product through from its initial idea to its completion and I learned so much along the way. Thanks for reading!