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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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; 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.
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:
Final Kiosk Screens; Figma
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