Systems Design
Designing a system for a bugtastic world.
Role
​
Sole UI/UX Designer
Duration
​
6 months
Tools
​
Figma
Google Suite
Background
For our final project in Product Design Fundamentals, we were tasked to create a design system for an imaginary world. We chose a world in which aphids became a main source of food nutrients after an apocalypse and this food source is distributed through accessible vending machines on school campuses. We created a functioning system, brand identity, packaging and vending machine design, and UI/UX interfaces. In addition to collaborating on the system design, I was in charge of the UI/UX portion.
The Prompt
How might we create a system to reduce food scarcity for children by capitalizing on aphid’s nutritional value?
To begin, we identified our stakeholders, both human and non-human.
Then identified processes need to consider and touchpoints in which our users can interact with our system.
Research + Defining
How can we use aphids as our food source?
We then researched extensively into aphids, their structure, and how we may use them to create healthy and delicious foods. We decided on using aphid body parts and the honeydew they produce to ideate on the products we want to create.
What is the current American view on bugs?
We also researched into the current market for bug foods and how people in America currently view eating bugs and found that we should apply focus on eliminating the stigma surrounding eating bugs.
How do children interact with vending machines?
We found that we need to make the vending machine very easy to use, clear, and intuitive in both the interface, packaging, and overall user flow. We also needed to keep in mind the height of the children.
How does the Pittsburgh school system work?
Some background research provided a better outlook on how we could integrate ourselves into the current system.
Deciding on the System
Stakeholder Flow
Precedent Studies
Marketing
Packaging
Vending Machine Form
UI/UX Inspiration
Brand Identity
Brand Identity Document Spread
Vending Machine Form
User + Form + Iterations
We decided a few things for good user experience:
-
The vending machine should be reachable for 4-10 year olds, meaning the vending machine will be 55 inches tall with small package sizing
-
Color should be bright and vibrant
-
Design should be cute and distinctive (shape will be similar to a caterpillar)
Final Form
Packaging
Ideation + Origami
Final Packaging
UI/UX Design: Website
Day in the Life of a User + Low/Mid Fidelity + Information Architecture + User Flow
The overall goal of the website is to provide all stakeholders:
​
1. An easy way to understand our product and mission
2. Provide support in reducing stigma of insect food
3. An easy way to get into contact with us
User Testing
Changes
Before
After
I deleted mandating phone number information to reduce user steps and hesitancy of providing information. I also changed the layout to be a bit more straightforward (only vertical experience)
Before
After
I added sections which split it into meals and snacks which allows for more intuitive finding of foods and easier organization.
Website Final
The Final Website Spread!
UI/UX Design Vending Machine
User Flow + Low Fidelity
Overall, I wanted to the keep the design and flow super simple and easy because elementary students are my users.
User Testing Changes
Before + After
Before
After
I added a title for clarity and a remove button to easily remove items.
Vending Machine Final
The Final Vending Machine Spread!
Final Thoughts
1. Design to your target audience’s aesthetic and needs: I wish I could’ve added more of a playful design to the vending machine interface as its main audience is young children. Possibly adding characters to guide the children, patterns or more of a dynamic user interface. I also wish I could’ve reduced the user flow even more, for example removing the cart feature in its entirety and only allowing meals to be bought one at a time. By reducing the flow, children can easily and more effectively use the application without a lot of guidance.