In attempts to improve the overall dining experience and efficiency in Price Center, one of UCSD's major dining halls, I spearheaded a project that incorporates both a ordering and pickup mechanic. My team and I commonly found the wait times at Price Center unsatisfactory ourselves, and we validated that concern through observations, interviews, and social media analysis.
While there are plenty of food ordering apps, the combination of digital and physical components is rare, and building a physical complement to an app was an additional challenge that my team has never faced. We experimented with different materials and techniques such as spray mounting, laser cutting, and 3D printing. For our app prototype deliverable, our design choices were informed by interviews, user testing, storyboards, and personas.
College students are obsessed with food, and as one of them, I can say it’s absolutely true. Mealtime is a precious reprieve from the incessant demands of chasing success. Thus, everyone tries to make the most out of it. In my school’s food court, though, most doesn’t seem enough.
My friends and I, in the rare circumstance when our schedules line up to allow us to have lunch, all scramble to Price Center, my school’s biggest and most popular food court. However, before we enjoy food and each other’s company, we stand in our respective lines for 10 minutes, wait for our food at the restaurant front for 10 minutes, and then we search for an empty table together for 5 minutes.
Nearly half an hour valuable time lost to complete idleness.
We began to think that there must be a better alternative. Our growing discontentment eventually lead to our creation of Grab n’ Go.
Timeline: November 2022 to December 2022.
Project scope: This idea was executed as the final project for an academic course at UCSD. We were assigned to tackle a problem of entirely our own choosing through design. My project team had access to a design lab and building materials. We worked closely during and outside of class multiple days a week.
My role: I was designated team leader. Alongside my share of academic work, my responsibilities also included keeping everyone on the same page, reporting progress to the instruction team, and delegating and dividing work.
When first assigned our final project, my team and I threw around the idea of tackling this problem of poor efficiency in the food courts. We had a rough idea of using apps and lockers to streamline the experience. Before committing, we knew we needed to do some preliminary research to see if this is a subject matter worth addressing and if our solution was feasible, or if we were just wasting our time of some personal pet peeves.
Starting with identifying the spread of the issue, we turned towards social media. Our school has a Reddit forum, and we found overwhelming unhappiness with the food court. Yelp seemed to corroborate similar sentiments.
Knowing now that the issue wasn’t limited to just me and my friend group, we tried to understand the food industry and the psychology of food courts better:
It seemed to us that our problem-and-solution combo idea was sound and my team was ready to dive deeper.
Since we wanted to create solution for a very specific set of problems at Price Center, we decided to revisit it with the intention of being insightful. We observed, and we saw:
Just observing, however, my team I could only speculate what people were thinking. We needed some cold, hard testimonies straight from the students' mouths. We interviewed five people: four diners and one employee. Three frustrations came up over and over, students repeating that ordering lines are too long, pickup areas are often too crowded, and it's hard to find seats after ordering.
Here what they said (audio clipping included):
These were not surprising insights, but they were necessary in confirming our suspicions and the problems we had to face to make the dining experience better.
From these confirmed problems, we had synthesized five storyboards that feature the problem but also a hypothetical solution. To see what would improve the experience at Price Center, we asked students which storyboards resonated most with them. These would help us understand the "flow" of potential solutions and let students share with us what they want in a systematic way.
These are the storyboards that students picked as most relevant:
At this point, my team and I have a pretty good understanding of both what frustrates the students and what the students want, so we consolidated that knowledge into personas.
My team and I are ready to design. Since our solution idea has a both digital (ordering) and physical (food pickup) component, we sketched for both. We used sketching as an opportunity to also brainstorm how the two will work in conjunction.
The physical kiosk will include and interactive screen that'll walk people through the pickup process and contain lockers that will hold the food.
What the pickup locker might display:
One day while discussing, my team realized that requiring diners to order at a physical kiosk could create more crowding at price. Instead, remote ordering could allow diners to order both ahead of time and anywhere they'd like. We decided a phone app is probably more convenient than a physical order kiosk, so we added that as an option for users and focused on designing for that. We created a user flow to better think through the ordering and pickup process:
We sketched some basic screens for ordering, which is where most of the digital interaction would occur:
Feeling confident in our ideation, we moved to wireframes. These were turned into a paper prototype that we tested with users.
Paper prototyping involves designers manually "changing screens" during user tests. We chose to use this method of prototyping instead of digital interactions because our time frame was short and this allowed us to gain rapid feedback.
Here are some of the insight we gained from testing (synthesized from 4 users):
Grab n' Go really came alive with our high-fidelity updates. Not only did we make changes according to our user testing findings, we established a brand.
Here's what we changed based off feedback:
All of the work above was implemented into this (non-final) high-fidelity interactive prototype.
Physical kiosk (pickup):
Please note that since it's impossible to digitally replicate a physical interaction of scanning a barcode, a "screen tap" instead will serve as a substitute for scanning.
Digital app (ordering):
The digital parts of our solution system were near finishing, but the physical component — the lockers — is just as important. While we were building our digital prototypes, we were building our locker kiosk prototype in parallel.
Just like the digital portion of this project, we started with sketching to help us be loose with ideas.
Since wood was the most accessible, reliable, and most precise material we were provided, we set up a file for laser cutting. We had to account for tabs that would help fit pieces together and provide stability, as well as the thickness of the wood sheets we were working with. This is what our files looked like:
The physical appearance of our kiosk should also match the aesthetic of the digital app. Thus, I used many of the same assets and moodboard pictures as inspiration for designing the "skin" to put on our kiosk. I referenced the laser cutting file to make sure I had the dimensions right.
We laser cut our wood and printed and hand-cut the skin file onto regular printer paper. We spray-mounted the skin onto kiosk, put together with wood glue and patience. We also used a 3D printer to create hinges that would allow the locker doors to actually open and close.
The final touch after assembling the prototype was to insert someone's iPad to work as the kiosk screen, and this is the final result!
With both physical and digital high-fidelity prototypes available, we wanted to conduct one last round of user testing to iron out any remaining wrinkles. Our scenario is as follows: You hear there is a new kiosk ordering system that you can use at Price Center, but you don’t know much about it. One day, you decide to check it out, and you walk up to one of the kiosks in Price Center. Tasks involve learning how the system works, placing an order, and picking up an order.
Our kiosk was limited by that we didn't have the resources to implement an actual scanning and locker opening mechanism, so instead, one of us "wizard-ed" (manually performed) that function.
Boy were we glad we did another round of user testing, because with this second round of testing, we found some glaring issues. The most prominent one was that people struggled with getting started on the kiosk. Many couldn't tell how to begin ordering, and assumed that the only functionality of the kiosk was to scan.
Here are all our notes from 10 users whom we'd tasked to navigate through our solution system.
We updated our interactive digital prototypes for both the kiosk and the ordering app, guided by our user testing notes. Small tweaks aside, our most impactful change is likely our update in user flow for the kiosk's screen.
Here are our interactive prototypes — kiosk on top and ordering app below.
If you are interested in seeing our Figma file and how we set our components, variants, and frames up, please visit here.
I have never built a physical prototype like the one I built for this project, nor used a 3D printer. This project yielded a lot of "firsts" for me, which was so exciting.
Field observation! I am a psychologist, so it's not surprising that I loved to watch how people behave. The location and situation that I observed is so mundane, yet when you look and listen with intention, it's amazing just how much you can learn about a situation. I felt like a proper little spy.
The biggest challenge for this project was definitely combining a physical and digital component into one cohesive system and work flow. Me and my team all had experience designing apps, but never an app that needed to be used with a physical product. As such, we literally discussed and brainstormed for hours about how such an interaction might work. One result of such discussion is the user flow found in the sketching section. In the end, I think it paid off.
For the sake of this project, my team and I couldn't overcome the limitations of what supplies and engineering skills we had. Thus, we could not implement real locker and scanning mechanisms. I think what would take this project to the next level, then, is to expand our resources and attempt to implement those mechanisms to test the full system experience.
