mockup1.png

Warmly

A vending machine for the homeless

In this project, I designed a system to support an original vending machine idea and created a pitch deck with information and systems models explaining it. On average, 700 Americans without homes are reported to die from hypothermia each year, so the vending machine I came up with would function to provide warmth and blankets to those who need it through an affordable payment system.

flower.png
 

Project:

Design a business that delivers a product/service via a vending machine

Tools:

ProCreate, Mural, Figma, Photoshop

Skills:

Sketching, wire-framing, system modeling, UI design, personas, storyboarding, journey mapping, task flows, information architecture, prototyping, brand design

Course:

Systems, Joy Liu

Duration:

4 weeks; March 2021 - April 2021

Research

I started by doing some research on the issues homeless populations face and how common death from extreme temperatures is, and found a few behavior-over-time graphs to support my business proposal.

Screen Shot 2021-04-21 at 11.55.37 AM.pn
Screen Shot 2021-03-11 at 3.30.20 PM.png

I then narrowed down the focus of my vending machine and wrote up a proposal:

This blankets vending machine would serve anyone who wants to purchase a twin-sized blanket of various materials, but especially homeless populations, as it would be located near a homeless shelter. This appliance would allow for the trade-in of recyclables/garbage for credits with which a blanket can be bought. Credits can also be donated through cash and stored up into the system, allowing for a first-come first-serve distribution. Solar panels and electricity would power this machine and there would be separate extensions for the washing/drying of blankets; these stations would be included to discourage consumer culture and reinforce reusability. The information the machine would need to gather is a user ID and homelessness status, as well as how many credits an individual has in their account and how many times they've used donated credits.

 

How Might We design a system to distribute blankets to homeless people?

 
System Design Process

Mind Maps

To begin the conceptualization of this system, I created a few mind maps laying out the various components within it. In the one shown below, I was brainstorming the various features that would be included in the vending machine as well as how they might connect to one another.

Screen Shot 2021-04-21 at 11.45.32 AM.png

Blanket Vending Machine Mind Map; ProCreate

In this next map, I was thinking about the various actors who would be involved in the system. It is not a comprehensive list, but these were the main individuals I focused the design and system around in the beginning.

Screen Shot 2021-03-11 at 6.00.30 PM.png

Blanket Vending Machine People Involed Mind Map; ProCreate

Provisional Personas

To better understand the actors, I created a few provisional personas of the most important ones who might be involved, as well as the differing needs they'd have at different levels of the system.

Storyboards

To further understand the goals of each actor, I listed out the various actions they might take, and turned some of these into storyboards with ProCreate.

  • Homeless person collects recyclables and trades them in for credits to use at the vending machine

  • Homeless person uses stored up credits to purchase a blanket

  • Donor donates money that is turned into credits that blanket purchasers can use

  • Shelter worker informs and assists homeless with what they need to do to use the vending machine

  • Blanket supplier sends out blankets for the vending machine based on the orders they receive

  • Waste collector determines how much the recyclables collected is worth and inputs that into the homeless shelter’s system

This first storyboard is of a homeless woman who might purchase an item from the vending machine through traded-in trash and recyclable credits.

Screen Shot 2021-04-01 at 1.14.02 PM.png

Storyboard 1: Homeless Woman; ProCreate

This storyboard is from the point of view of the homeless shelter worker and illustrates what how role in the system affects the main customer's.

Screen Shot 2021-04-01 at 1.14.10 PM.png

Storyboard 2: Shelter Worker; ProCreate

Because of the recyclable trade-in feature of this vending machine, I decided to create a storyboard from the perspective of a waste collector's role instead of the blanket supplier as I thought it would be more useful to visualize, but the extra steps here later got scrapped and synthesized into the shelter worker's role.

Screen Shot 2021-04-01 at 1.14.18 PM.png

Storyboard 3: Waste Collector; ProCreate

 
Initial Systems Models

There were many systems models within this project and I had to create a few versions to clarify to myself the direction of it. These were some beginning iterations of the maps and diagrams. 

User Journey

This user journey is from the perspective of the homeless woman persona, and outlines the most core interactions she would have.

User Journey - Blankets vending machine for homeless

Rough Journey Map; Mural

Ecosystem Model

In this early version of the ecosystem model, I was thinking about how the different, most important components could be categorized, but wasn't able to focus it quite yet.

Screen Shot 2021-03-18 at 4.03.02 PM.png

Rough Ecosystem Map; Mural

Task Flows

These were the initial task flows I started off with for the kiosk portion of the system and built off of later.

Screen Shot 2021-03-18 at 4.32.35 PM.png

Rough Task Flows; Mural

Taxonomy Map

In the early taxonomy map, I laid out the inventory of the vending machine, as well as the types of recyclables the machine would accept, but created a more detailed version with all the conversions in the next iteration.

Screen Shot 2021-03-26 at 10.01.16 PM.pn

Rough Taxonomy Map; ProCreate

Information Architecture Diagram

In this initial IA diagram, I aimed to lay out the different sections of the kiosk interface but some of the information did not fit, which is why I had to create a clearer, more focused version later.

Screen Shot 2021-03-26 at 10.01.07 PM.pn

Rough Information Architecture Diagram; ProCreate

 
Final Systems Models

Creating rough versions of the models allowed me to lay out and visually articulate the different levels of components and their relationships in this cohesive set of final diagrams.

User Journey

In this updated user journey map, the homeless woman's experience with the vending machine and kiosk is much more detailed and includes all the different touch-points, pain points, and actors involved in addition to her emotions during the process.

Screen Shot 2021-03-31 at 10.37.02 PM.pn

Final User Journey Map; Figma

Ecosystem Model

This final ecosystem model depicts the different stages of the vending machine's production, starting with development and going to maintenance. Instead of laying out random elements, I changed it to depict the steps that needed to be taken to make the machine successful, as well as the proximity those actors had to the kiosk itself.

Screen Shot 2021-04-01 at 12.38.46 AM.pn

Final Ecosystem Map; Figma

Task Flows

As the rest of the conceptualization came together, the tasks of the user become much more clear to me. Here are some of the final task flows I created.

Screen Shot 2021-04-01 at 10.35.11 AM.pn
Screen Shot 2021-04-01 at 10.35.24 AM.pn
Screen Shot 2021-04-01 at 10.35.37 AM.pn
Screen Shot 2021-04-01 at 10.35.51 AM.pn
Screen Shot 2021-04-01 at 10.36.06 AM.pn
Screen Shot 2021-04-01 at 10.36.17 AM.pn

Final Task Flows; Figma

Taxonomy Map

In this taxonomy map, I included the user data collected by the machine and conversions of credits and recyclables in addition to the inventory of the vending machine.

Screen Shot 2021-04-01 at 3.18.54 AM.png

Final Taxonomy Map; Figma

Information Architecture Diagram

This final IA diagram details the different pages a user could encounter in the kiosk connected to the vending machine. 

Screen Shot 2021-04-01 at 2.46.15 AM.png

Final Information Architecture Diagram; Figma

Stock and Flow Diagram

In addition to all the revisions of the other systems diagrams, I decided to create a stock and flow model to show how the funds fueling the machine would flow in and out.

Screen Shot 2021-04-21 at 3.56.46 PM.png

Stock and Flow Diagram; Figma

 
Kiosk Design Process

Visualizations

The next step after understanding the system was visualizing how the physical design should look. Here was my initial rough sketch depicting the kiosk, vending machine, washer/driers, and recycling drop-off.

Screen Shot 2021-04-01 at 1.39.02 PM.png

Rough Vending Machine Visualization; Graphite

In this iteration, the machine is positioned outside of a homeless shelter where it is accessible to anyone who comes across it. It includes the recyclable drop-off, kiosk, and vending machine, but not the washers and driers, as at this stage I was still considering whether they were totally necessary.

Screen Shot 2021-03-26 at 9.36.12 PM.png

Vending Machine Visualization 1; ProCreate

This is the final design, where the machine is positioned inside the homeless shelter. I decided to include the washers and driers as it didn't make sense to me to base the payment on collecting waste and then spit more waste out in the form of single-use blankets. I also edited the depiction of the recycling section as it didn't look believable enough in the previous illustration.

Vending_Machine_Visualization_2.jpg

Vending Machine Visualization 2; ProCreate

Sketches

In the final leg of this project, I created the wireframes and kiosk screen visualizations. These are the rough sketches of the screens I would create in Figma. I wanted to keep the design simple and clean and provide an easy way for users to make a donation or purchase.

Screen Shot 2021-04-01 at 1.39.15 PM.png

Kiosk Screen Wireframe Sketches; Graphite

Wireframes

I didn't create every single kiosk screen I listed in the Information Architecture diagram, but here are all of the most important ones digitized:

1/12

Final Kiosk Screens; Figma

mockup1.png

Vending Machine Mockup; Photoshop

 
Pitch Deck

The last piece of this project was the pitch deck. Below is my final set of slides:

Blankets Vending Machine Pitch Deck; Figma

 
Reflection

This class taught me how to see the bigger picture of a system and this project in particular showed me you can design a product to fit into that. I was still very new to systems thinking when working on this, as I had mapped existing systems out in a previous project but never created my own. It was definitely a valuable learning experience and taught me a lot about how business strategy can impact design decisions as well as how to consider every actor's needs. In much of my previous work, I had only considered the end user and imagined altruistic products that did not take into account a way to profit. It was challenging thinking from this new perspective, but ultimately gave me a deeper understanding of the design process in the real world.

I also found the different mapping techniques very useful to understanding the overarching issue and how a system works. This is something I will definitely take forward in my design practice.