september 2018 (6 weeks)
class project for user centered design
user research, UX/UI, visual design, wireframing, prototyping, branding
photoshop, inDesign, marvel, adobe xd, illustrator, pen & paper
Zero waste stores are gaining popularity across the country, but there’s still a long way to go before it becomes commonplace. There are problems with affordability and accessibility, but also curiosity from consumers. Through this project, I hope to help paint the picture of a possible future where zero waste/bulk stores could operate as the new normal.
Tara is a zero waste shopping assistant that will make package free shopping more accessible to the wider public.
As part of a larger shopping experience, Tara allows users to peruse the grocery store with their containers and easily fill their containers with what they need. Tara will unlock dispensers, record the amount customers are dispensing, and charge them appropriately.
The container screen is a place for users to keep track of the items refilled in their containers and what containers they have available to purchase new products in. The container volume inputted on this page will be used for price estimates before the user decides to actually fill up their container (to ensure that the price range is within their budget).
Filled containers will display product expiry dates. Empty containers prompt the user to explore the store's inventory and plan their shopping. It can also be a quick way to select containers in-store for filling.
The dashboard gives users an at-a-glance look at the number of plastic containers they've diverted as well as the money they've saved by shopping in bulk. The most recent receipts can also be viewed here.
The product page allows users to browse Tara's store inventory before purchasing in store.
The shop features will be used in-store. Clicking the camera icon allows users to scan merchandise (non-bulk items) into their virtual cart if they opt for a self check out experience.
When smart scales contact a user's mobile device, the scale turns yellow and shows available empty containers for filling.
After selecting the container that they want to fill, users will be given a price estimate and then prompted to dispense from the bulk bin.
Once product has been dispensed, the amount filled will be displayed to the user and then added to their virtual cart.
In order to understand current opinions on zero waste shopping, I interviewed and surveyed 7 people. The interviewees ranged from those who have never shopped at a zero waste store to those who regularly shop package free.
Based on the insights gained from the interviews and surveys, I created a persona to further empathize with the ideal user of this app. Meet Sam, the conscious consumer.
I also ended up doing some competitive analysis to compare experiences at Vancouver's current Zero Waste grocery stores to summarize the current state of zero waste shopping in the city. My interviewee's stories, emotions, thoughts, actions, and pain points are also plotted on this journey map.
Based on the research performed, the challenges of package-free shopping can be summarized into two points:
I used several card sorting exercises to determine the user flow of the app. This also visualizes the kind of information needed on each screen.
The user flow was then converted into screens for paper prototyping. User testing allowed me to solidify how screens relate to each other and what information the user may want to access on a certain screen.
When I started translating the paper prototypes digitally, I realized that there many in-between screens were needed to link up the app experience.
The final logo is created from the 'A' and 'T' taken from the Arial Rounded MT typeface.
After creating a triangle from the 'A', it was deconstructed to form the base of the scale and completed by taking the top of the 'T' to form the weighing platform.
Alternative fonts and variations were tested before arriving at the final result.
The colour palette of Tara consists primarily of blue and yellow with a red accent.
The grey and white are used respectively as the base typography and foundational background.
The supplementary colours are used for differentiating containers within the Tara app to allow for user customization.
Arial Rounded MT Bold and Avenir are Tara’s brand typefaces. Avenir is used for navigation and large bodies of text while Arial Rounded MT Bold is used primarily for decorative purposes.
I thoroughly enjoyed being able to build this experience after transitioning from my last job at The Soap Dispensary to going back to school at Emily Carr.
My original ideation process actually included ideas for how the POS (point of sale) system and store flow might work as well, but due to the time allotted for this project, I focused solely on the mobile experience and assumed the other two parts to be functional.
I know that the design of this application relies heavily on the 'smart scale' to be a reality. I am hoping to talk to a developer more knowledgable in NFC technology to see if this would be a viable path to take in the real world.