Role: UI/UX Designer, Front-end Developer, Graphic Designer

Tools: HTML, CSS, Node.js
APIs: Facebook Login, Google Login, Yelp

Teammates: Andy Xia, Eason Chang

Timeline: 12 weeks

‍Responsibilities: Designed our logo, led ideation for wireframes and information architecture, created high fidelity interface with HTML and CSS

What is Birdie? It's an application that recommends food choices so you can quickly decide where to eat. It takes your food preferences and filters what foods to recommend to speed up the decision-making process.

Note: The breadth of this project mainly focused on honing our database knowledge and connecting the front-end to the back-end. This case study will only cover the basics of the design process to help structure this app and to create a tangible web application as our main goal.

People are oftentimes indecisive on where to eat, and by the time they decide where to go, they've experienced decision fatigue and wasted so much time. This might not seem like a huge inconvenience, but these minutes eventually add up and waste precious time that could have gone to other responsibilities such as studying. Our group explored different opportunities until we came upon the question: "What if someone or something made the decision for us?".

In other words, people who are deciding where to eat need a way to quickly choose a place in order to save time and energy.

We created a simple AI (Birdie) that shows you a vast selection of cuisines to choose from, and if you're feeling particularly indecisive, there's an option for Birdie to choose a cuisine for you. It shows you a series of restaurants one at a time for you to pick from (instead of scrolling through an overwhelming list). This feature purposely limits your options to push you towards a quicker, simpler, yet satisfying decision.

What makes Birdie unique? The key constraint for this app was that the user swipes through restaurants one-by-one to choose an option faster.

We created these storyboards to help us identify key moments in the experience of a user deciding where to eat.

One of our storyboards

1. Two indecisive college students cannot decide where to eat. Before they waste more time, they find that Birdie can make the decisions for them and can help plan food dates with their friends.

2. Our second example took the "dating app" approach (not pictured here). James and Mildred decide to go on a date, but before James could schedule a date with her in person, she has to leave. In the next scene, James is sitting on a bench when a bird flies in and tells him to check out an app that can help him. They successfully schedule their date, and at Mildred's astonishment, she asks, "Where did you find this app?". "A little birdie told me." (Thus, our name was born).

We began our first iteration with two designs:

1) My teammate Eason chose a UI that utilized a social media look-and-feel. For example, the user can find friends from their friends list and begin a chatroom with them.
‍
2) In my paper prototype, I went for a simpler look that mimicked a conversation with Birdie. Since our app idea is very simple to begin with, I wanted to keep the UI simple as well since there is no need for clutter or excess information.

After doing some small-scale testing with our classmates, we ultimately saw that there were strong characteristics of both prototypes, so we combined the best features of each. We kept the simplicity and conversational aspect of my prototype, but we included the interactivity from Eason's prototype such as the swiping gesture and the profile page.

Paper prototype, to wireframe, to final product. UI designed by me

Overall, we decided to keep the color scheme plain and simple so the color of the vibrant food can stand out. We also minimized the amount of information that was on each page and kept the UI fairly minimalistic so the navigation will be linear and more efficient.

We conducted user testing by having users "break" our app. Our results showed that, had they been shown the improved friend page, users were far more likely to return to use our app when they used the friends page that incorporated their profile picture in a grid style.

After using testing, we made some final touches to the aesthetics and branding. To conclude the end of the quarter and this project, we presented Birdie in front of 150+ students and delivered our elevator pitch. We also had a poster session where we spoke to judges (people who work in the industry such as Qualcomm, ServiceNow, and Viasat) and demoed our app to them. Looking back, Birdie was a huge learning experience for me because it gave me a taste of what I actually wanted to do in my career, and it solidified my love for design. It made me want to get more involved with the front-end development process and how it all ties in with the design process as well. My group hopes to continue to work on Birdie because we believe this app can help not only my direct group of friends, but also other college students who struggle with the same needs as us. With Birdie, you can stop wasting time and go eat!