My group chose to iterate further on a previous prototype that some of us had worked on earlier, the Carbon Scanner prototype. These first prototypes were aimed at sparking and changing the conversation around climate change. We acknowledged that there were many barriers to having conversations about climate change and that solutions could only be attained once meaningful conversations could take place.
We set out to brainstorm different ideas to spark conversation around climate change at different places: Home, Work, School and Community. We felt that some of the strongest ideas centered around making visible the otherwise invisible aspects of climate change. We were heavily inspired by a mobile app concept that Amazon had developed some years back called Barcode Scanner — which subsequently got folded into its main app. It allowed users to walk into a brick and mortar store and scan products, linking them to their Amazon listings. This concept incentivized users to spend their money at Amazon to get lower prices. We wanted to use this same idea to incentivize users to spend their money on products with a smaller carbon footprint.
Brainstorming with Post Its
We crafted a rough draft of the prototype using cardboard cut out represent a phone, with flash cards inserted into it for each of the screens. We got feedback about the prototype and also recorded users interacting with it. We wanted to know if it was clear what the product was or how to use it. Through testing we learned we needed more instructions at the beginning and also have more clear indications as to what was clickable.
Cardboard phone for first draft of prototype
Handwritten app screens
User testing the first draft of the app
Recording user behavior when interacting with the app
We mocked up the first draft of the Carbon Scanner app in Figma — making the first use instructions clearer and made the buttons more prominent. The idea was for the user to click on the item they would scan as if it was in front of them in a store. As the user waited for the result a pop up screen displayed information about climate change. The result showed a visual representation of carbon along with the ounce and gram of carbon emissions associated with producing each product.
Layout of Carbon Scanner 1.0 in Figma
Launch screen
Instructions
Items to scan
Visualization of carbon
Based on feedback from the first digital prototype we revised the font to be more legible (the script font was hard to read for some users). We also added more buttons (a back button and one to get back to the instructions after first use) and an additional screen after selecting the item that made clear the idea was to scan the barcode on an item. In soliciting feedback we wanted to know if this tool would influence users in making decisions about purchasing products.
Carbon Scanner 2.0 Layout
Working in Figma
Revised Logo
Added barcode UI elements