Birdie
Stop wasting time and go eat
OVERVIEW
This project was created in COGS 120: Human Computer Interaction
at UC San Diego. For this class, our team had to design and develop a mobile web app that met a specific need using artificial intelligence.
My friends and I often loiter after church deciding where to eat, sometimes perusing apps like Yelp for over an hour, and so we wanted to design an app that would meet this need.
After we determined the need we wanted to address, we began our design process through storyboarding, where we showcased the journey and process of using our potential app. These storyboards included user personas of potential users: friends trying to decide where to eat, and a way to find a restaurant for a date.
We then ran through paper prototypes to get a better idea of how the app should look like and decided to focus on our first user persona. After a round of user testing, we began to code our final project. After numerous weeks of testing and iterating, we presented our application to a panel of judges and an audience of our peers.
ROLE
UX Researcher, Front End Developer
TIMELINE
Jan 2018 — Mar 2018
TEAMMATES
Eason Chang, Eunice Kim,
Vincent Cannalla
FRONTEND
HTML, CSS, Javascript
BACKEND
Node.js, Yelp API, Facebook Login API,
Google Login/Maps API
LINKS
Live Demo
The Problem
College students (myself included) have limited time between their studies, yet often waste precious free time figuring out where to eat.
The Design Challenge
How do we make the process of finding a place to eat faster without losing out on restaurant quality and customer satisfaction?
The Solution
Birdie streamlines the decision making process by actively limiting the amount of information you can see. You can either have Birdie decide for you, or quickly find a place to eat from a broad selection of cuisines.
Needfinding
I performed needfinding by observing and interviewing my peers in their search for a place to eat. When asked why they were taking a long time, most people answered that they were too indecisive or didn't know what they were craving. Every user observed used Yelp to find a place to eat and would scroll for a long time before finally picking a place (or making someone else choose).
This was the key observation, it wasn't just that users weren't sure what they wanted, it was that there were endless options to choose from and they couldn't decide what was best.
Based on these observations, we realized we needed to limit the amount of information shown, or make a decision for the user.
Storyboarding
We then proceeded to storyboarding, as we wanted to imagine the different scenarios that our app could be used in. From this we were also able to come up with various user personas.
The above storyboard was made by my teammate Eunice Kim. It is the closest story board to our final design, with the user persona being indecisive friends trying to compromise on a place to eat.
This storyboard incorporated a dating app element to Birdie. We thought it might be helpful for young college students to get recommendations on where to take people on a date. It also includes a feature to set up a time and date for their meal, something ultimately incorporated into our final design.
This storyboard is also the origin story of our app's name. James was told by a "little birdy" about the app that helped him find a nice date spot. I'll be honest, I pushed pretty hard for the name because I thought it was much funnier than it actually is.
Prototyping
Our team produced two paper prototypes that we tested on fellow classmates before moving onto a digital product. We asked them to find a place to eat with a friend and observed how they navigated our prototypes. We asked our users to voice their thoughts and intentions as they moved.
Prototype 1 featured our final design's main interactivity; the ability to swipe between restaurant options
Prototype 2 had a more aesthetically pleasing and minimal design, and our final product's appearance is based heavily on it. (shoutout to Eunice for the vis design).
The feedback we received indicated that users enjoyed the swiping feature of the first prototype, but felt that it was unnecessary to see which friends were nearby in the second prototype.
Based on this feedback we realized that we had stretched ourselves a little thin by just throwing on extra features without any real thought put into them. We decided to simplify our features, focusing primarily on the ability to select restaurants quickly.
With this in mind, we began coding our final product.
Design Choices
There are already plenty of food recommendation apps out there, so what makes Birdie unique?
- Collegiate Focused: Birdie was designed by college students, for college students. The goal was to help college students save time and enable ease of access. The modern swiping interactions are something most college students are familiar with, through mediums like dating apps and Instagram.
- Efficiency Over Variety: Based on our user tests, as well as personal experience, we knew Yelp and apps like it can overwhelm the user with information. To counteract this we display restaurants one at a time to reduce the amount of stimuli a user needs to process at once, making it easier to reach a decision.
- Minimalist Design: Additionally, the UI of Birdie is very minimalistic, with simple white backgrounds. This design choice was implemented to prevent distraction from the main focus of the app; the food. With a white background, the vibrant colors of the food can shine.
Reflection
This was the first time that I genuinely experienced helping design something to solve a problem.
This class and project taught me that design can change how people interact with the world around them. I can honestly say that my team has used Birdie since this class to save time and go eat.
We hope to continue working on it someday, but until then, thank you for reading and here is a slightly embarrassing walkthrough of our current demo!
Tweet tweet (peace out).
