Overview
My Role
UX/UI Designer responsible for user research, ideation, visual design, prototyping, and testing
UX Methods
Primary and secondary research, comparative analysis, wireframing, prototyping, mockups, and style guide
Tools
Figma
SketchUp
Miro
Deliverables
Wireframes, prototypes, mockups, responsive mobile application design, style guide, and 3D modelling
Design Process
Research
Conducted research to understand our users and their needs
Define
Compile research and observe where all our users' problem exist
Ideate
Generated a wide range of ideas
Prototype
Built real tactile representations of my ideas
Test
Conducting testing to gather feedback from users
Background
Surface Contact
While delivery services proved invaluable during the global pandemic, I find that ordering pastries and other delicate baked goods through such services to be quite frustrating. Unlike savory meals, pastries are made ahead of time and in batches, therefore, its availability is subject to its quantity. Additionally, the significant travel time somehow affects the quality and taste of the pastries, and if not packaged well, you can end up with deformed desserts.
Therefore, it seems more practical to purchase pastries in-person at a pastry shop or café. However, since the covid-19 virus is known to easily spread through air when people are near each other, or via contaminated surfaces, purchasing goods in-person can be daunting. In addition, even though health officials provide guidelines on how to implement proper safety protocols, not everyone, including food establishments, follows them to the letter. There is always that fear of contamination when interacting with anything publicly accessible.
The Problem
Inconsistent Protocols
Unreliable Service
Business Goal
Given the risks associated with the current purchasing process, the primary goal of this project is to create a safe, seamless pastry purchasing experience while maintaining the quality of the pastries.
The Solution
To help reduce potential exposure to covid-19 through publicly accessible surfaces, and help implement consistent safety protocols, I designed a complete touch-free pastry purchasing experience using mobile-operated vending machines.
Why Vending Machines?
When I first encountered the problem while purchasing pastries at a grocery bakeshop, I instinctively desired for a system that allowed me to purchase without the need to touch anything publicly accessible or to talk to other people. That’s when I thought about vending machines, it doesn’t require human interaction, it automatically dispenses items, majority of people are familiar with how to use it, and the purchasing process is pretty much consistent and efficient. However, I have yet to find one that is completely touch-free and provides fresh food.
The Gap
While vending machines promote contact-free transactions and consistent purchasing process, majority of them still require touch interactions (e.g., clicking buttons, touching screens, inserting cash, etc.), thus leaving people potentially exposed to the virus.
Fixing the Gap
To fix the gap, I asked myself, what is the best way for people to purchase from the machine without touching it? Two ideas came to mind: (1) an application that commands the machine, or (2) some sort of voice command purchasing experience. While the latter option seemed more sophisticated and advanced, developing it required special expertise, technical knowledge, and significant time. Since the virus is spreading fast, we needed an implementable solution.
Additionally, since 80.76% of people worldwide own a mobile device, and because voice commands have higher error rate due to inaccuracy in voice and speech recognition, using a mobile application to control the machine seemed more feasible.
The Research
Secondary
Through secondary research, I was able to find existing vending machines that closely resembles our project’s desired outcome, and allowed us to identify their pros and cons.
Existing Pastry or Mobile-operated Vending Machines
To my surprise, the idea of a mobile-operated vending machine already exists, however, it is mostly found outside the United States, and it does not dispense fresh food. While I did find a vending machine that is specifically for pastries, it is not touch-free.
Comparative Analysis
Through comparative analysis, I was able to identify the pros and cons of both machines. I also gathered feedback from users during the user interviews regarding these two machines.
User Feedback on Existing Vending Machines
I gathered user feedback on the Pix-o-matic and Silkron vending machine to better inform the design of our mobile application and machine. Their feedback is as follows:
Primary Research
User Interviews
I’ve conducted several user interviews to better understand who our users are, their needs, their behavior, their desires, and their frustrations towards the current pastry purchasing process.
Our Users
Our users are people who love and enjoy pastries and baked goods. They prefer contact-free transactions such as self-checkouts. They live a busy life so they like efficient transactions. Lastly, they follow covid-19 safety protocols to the letter.
Lives & works in New York City
Grabs pastries daily on her way to work
Usually pays for things with her phone
Follows covid-19 safety protocols to the letter
Prefers self-checkouts
Synthesizing The Research
Affinity Mapping (using Miro)
Through affinity mapping, I was able to identify four common themes or topics that our users paid most attention to when purchasing pastries at food establishments. These four themes also heavily influenced my design decisions for the mobile application and helped develop our how might we problem statements.
What our Users Cared for the Most
How Might We Problem Statements
I was able to develop our How Might We Problem Statements based on the feedback and comments I have collected from our users during the interviews, and they are as follows:
How might we design a purchasing experience compliant with pandemic safety protocols?
How might we guarantee the freshness of the pastries?
How might we create an enjoyable purchasing experience?
How might we provide transparency on ingredients and nutritional information?
How might we create an intuitive purchasing experience?
Designing the Application
After identifying our users’ wants and needs, it was time to design the whole experience. I proceeded to design the mobile application by first identifying our user stories and creating a minimum viable application.
User Stories
It was important for me to create user stories to layout the key tasks that our users will complete when using our application. The tasks were split into two categories:
-
Basic purchasing tasks - the user stories are based on the basics of purchasing in-person such as, ability to choose from multiple options, add items to cart, and checkout.
-
Tasks factoring our How Might We Problem Statements (HMW) - I also derived the user stories based on our HMW problem statements such as, ability to view ingredients or allergen information, ability to see the date made, and ability to purchase from the machine without touching it.
User Flow
Through the process of user flow, I was able to get an initial idea of the application's key content, flow, and red routes.
Initial Sketch
After identifying the user stories and creating the user flow, I developed a low-fidelity sketch version of the application to get a clearer idea of the interface and the entire experience, which I also used for the guerilla usability testing.
Low-fidelity Sketch
Guerilla Usability Testing
Through guerilla usability testing, I was able to validate the key features of the application and design a more intuitive user experience, which also informed the wireframes.
Wireframing
Through wireframing, I was able to map out the application’s content, flow, and functionality.
Designing the Vending Machine in SketchUp (3D Modelling)
Before I proceeded to create the prototype of the application, I first had to design the actual vending machine. The machine’s design is inspired by traditional bakeries or pastry shops, and it embodies the brand’s modern personality.
Below are my initial sketches of the machine. Version 1 had restocking challenges therefore I went with version 2 or “Final version” as shown in the picture. Translating my designs into 3D helped me better visualize the user experience thus allowing me to create a better interface for the mobile application.
Final Design
Building the Prototype
Stye Guide & Brand Platform
Before creating the high-fidelity mockups for the application, it was important to first establish consistency by creating a style guide.
As with most applications, the look and feel of an app is derived from its brand identity and attributes, therefore, it was also important to define our brand platform from which we can base our design.
Brand Attributes and Personality
Baked is a modern-day pastry vending machine that offers gourmet/artisan pastries and baked goods, while providing a safe, seamless purchasing experience.
-
Seamless
-
Safe
-
Modern
-
Top quality & delicious
High Fidelity Mockups
After defining the application’s content, flow, layout, and design, I proceeded in creating the high-fidelity mockups of the application.
Below is the first version of the screens of the application which have been checked for accessibility. I made sure to add a very visually appealing launch screen to entice our users, and I kept the interface and design clean and minimal to also appeal to our brand’s modern personality.
Testing
I conducted the first round of usability testing sessions with a primary goal of validating or improving the mobile application’s key features and overall ease of use. Additionally, the test also seeks to identify any potential usability issues in red routes.
Results
There were no major or critical issues in the mobile application’s red route and interface. All key features functioned as intended. No additional screens or pages necessary, only tweaks to texts to clarify the sign-up process.
V1
V2
Additional Results
Improved Experience
Apart from the project’s primary goal to create a safe, seamless pastry purchasing experience, the application also brought about improvement in the overall vending machine purchasing experience. By using the mobile application, it has improved or eliminated these traditional vending machine purchasing woes:
-
Increased the accuracy in item selection
-
Removed anxiety from clicking the wrong item number
Future Scope
We plan to incorporate reward points collection to increase brand patronage in the next version of the application.
My Learnings
This project is my first capstone project as part of Springboard’s UI UX Design curriculum, and my first time designing a complete product experience from end-to-end using design methodologies. I learned how to properly conduct user research, create wireframes, prototypes, and empathize with the users.
The whole experience has made me more aware of how I and other people interact with the things around us. The experience was very rewarding, especially seeing all the knowledge and skills I’ve learned through the course yield results.
.