The Entire History of You(r goods)

My final project, The Entire History of You(r Goods), is an app that makes it easy for consumers to make healthy and ethical buying choices when they shop. It consists of a NFC token attached to each piece of goods (and unique to the particular item), and a smartphone app that reads the token and reveals the entire journey of the product from design to transportation to the store, as well as the human faces behind this process. The name of the project, in case you are wondering, is a knock-off of Kimberly Ha’s Breaking Bad (Habits), an app for (you know it) breaking bad habits. Let’s get started.

The Pitch

Have you aimlessly wandered in a store because you are wondering what products are healthy for your body and produced sustainably? Have you wondered what actually went on behind the making of the goods you are holding in your hand? We who have busy schedules can’t afford to research on the Internet everything that we buy, and it’s well nigh impossible to really know what goes on behind the scenes.

This is the problem I wanted to address with my design, to make it easy for users to determine at a tap of the phone the healthy / sustainable level of a product, and if they’d like, really dig in and learn the human stories behind them.

This design provides value to both the consumers and the vendors. The consumer gain by making buying choices that are great for both their own bodies and the future of all of us. The vendors, by being transparent about their products, gain free advertising for their products, which hopefully helps them sell more products and encourages them towards becoming more sustainable.

To determine if the idea is something that people wanted (desirability) in a way that they want them (usability), I created the prototype with both physical components (3D-printed NFC tags, demo phones) and software components (the interactive mockups). This way, I can have users try out the app in a realistic way for themselves and from which determine how I’ve achieved my aforementioned goal.

Design

Information Architecture

As per usual, I started with brainstorming ideas for the functionalities. The most important functionalities are two:

  1. Users can from a quick glance determine the essential facts of the product: healthy level (organic, vegetarian, and calories count) and sustainable level (carbon footprint, use of conflict materials and use of animal testing)
  2. Users can, if they wish, learn the entire journey of the product and the human stories behind them. This helps them connect with the product on a more personal level and shapes their buying behaviors.

After the basic functionalities were set, I drew an information architecture diagram, which serves as the high-level sketch for the actual design of the app.

3D-Printing

3D Models

Here’s where the physical prototyping part comes in — I designed and printed the NFC tags and an USB NFC reader for users without NFC-enabled phones (I originally wanted to make a NFC reader with headphone jacks, but couldn’t find a ready-made headphone jack template). I was already comfortable with using Onshape for 3D modelling from previous projects, and I took advantage of using both the iPad and web app when either multi-touch or mouse seems more appropriate.

For the logo engraved on the 3D models as well as the smartphone app, I chose the ecology certification icon, created by freepik. A lot of the resources I used in this prototype are from CC sources, without which I wouldn’t been able to create the prototype at a fast pace. The USB socket used here was found on OnShape, by Niklaus Schneeberger.

3D-printed parts

The printing process was largely uneventful. Learning from previous printing experiences, I went with 0.10mm resolution from the start, and used 4-layer shells and long layer times. The result prints were largely as I expected, other than a defect on the USB reader where the top shell collapsed towards the middle. I’m going to blame it on my lack of experience and the limitation of the makerspace equipment.

Sketching & Interactive Prototype

Sketch for overview screen vs. the final Hi-Fi Prototype

The interactive app prototype took me the majority of the time in this project. Based on the information architecture, I did some quick rounds of sketching of the interface, and moved onto creating them in high fidelity in Figma. One thing of note here is the navigation of the “human stories” — during each step of the product journey, users can choose to learn more about the people behind this step by tapping on one of the people’s avatar. I spent some time brainstorming where the avatars should be placed on the screen, before settling in with the current design, placing it besides the hero image (rightmost sketch).

Various “product journey” sketches

Creating the actual prototype in Figma is (like last time) about using Google’s Material Design Template and integrating it with the app’s visual language. There’s little custom components in this app, other than the vertical “progress bar” used in the product journey screens, which indicate the total number of steps in the journey and where users are located, for a bit additional navigational aid. I also made heavy use of icons from thenounproject.com, and CC0 images from pixabay.com (such as the Coca-Cola hero image).

Rather than using Framer for interactivity like last time, I opted for Invision in order to save time. That simply involves exporting each screen and wiring them up using the the Invision GUI. It took significantly less time, although there were also much less pretty animations as a result.

Every screen used for the final prototype

Evaluation

I presented my prototype during the final HCDE451 exhibit, and the feedback was surprisingly really positive! People really liked the prototype for its originality, and resonated with the goal of the app of encouraging ethical consumer behavior. Many of them provided suggestions of feature additions, that I can consider in a later version of the design.

Additionally, a few peers questioned the use of NFC tags rather than existing product bar codes, as the they are already unique to the product. I designed the app hoping to tell the unique story of each item, rather than the product in general, but going with the latter definitely reduces the manufacturing cost and makes the app for accessible for mass-produced products.

Some of them are also taken aback by the array of “badges” (organic/vegan indicators) on the overview screen, and thus I had to explain the meaning of each badge to the visitors. I can address this problem in a higher-fidelity prototype, for example, by showing a label besides the badge the user has highlighted.

Besides that, I also evaluated the prototype with a few UW students by having them go through the prototype. While all of them are able to go through the prototype and understand the goal of the app, I discovered quite a few potential areas of improvement in the process. For example, it was not obvious that the gray “badges” are supposed to signal the lack of the said badge. It made me realize that colors alone wouldn’t make this fact obvious, and I need to iterate on the design to make it more clear. A tester also questioned if people would be interested in knowing the people behind mass-produced items as opposed to hand-made artisan goods, a question that I need to evaluate on more users in order to attempt at an answer.

Looking to the future

I’m pleased with the level of enthusiasm I received for a niche app like this, and I would like to explore this idea further in the future. While the feedback was positive, I also received much valuable feedback on the design, and there are areas in the app prototype that would stand out more if treated with more time — for example, creating the interactive prototype in Framer, and mocking up more products than Coke-Cola to evaluate the app’s experience for different product categories.

What do you think of the idea behind this app? Do you have suggestions for how to improve the design or the prototype further? If you do — definitely let me know!