2016

Let's Do Dinner

Skills used:
user testing, React, Node

As part of Fresh Tilled Soil’s Apprentice in User Experience (AUX) program, I was challenged to find an unsolved problem in the food-and-drink space, then build and user-test an app to solve it.

The Challenge

Restaurants and bars are hubs for socializing, but it can be hard for a group of people with different needs to decide on the perfect place to meet. The process can require a lot of back-and-forth to find an establishment that satisfies everyone’s budget constraints, travel needs, and culinary preferences.

The Outcome

I built Let’s Do Dinner, an app that allows users to input their location and culinary preferences, and then recommends restaurants or bars based on optimizing the satisfaction of all members of a group.

The Technology Stack

It was an exciting challenge to build a working, realtime web app in just a few weeks. I first built a small node backend capable of optimizing restaurant or bar selections based on users’ locations, modes of transport, preferred cuisines, and budget. The endpoint attempts to find a solution that is fair to each user, without allowing any one person to dominate the choices available. For the matching algorithm, I used the Yelp API and the Google Transit Matrix API. In order not to hammer Google’s Transit API with tons of requests, the app simply checks 5 midpoints in between all the users to find the one that seems to best minimize total travel time, then makes a couple queries to the Yelp API to find the best restaurant or bar matches in that general area. Next, I built a front-end that allowed users to collaboratively submit preferences and vote on the results. For real-time data exchange I used Firebase, a database/websockets service that was easy to set up. For building the interface, I used React and Redux.

User Testing

I initially used a paper prototype to validate my general idea of a social restaurant-finding app (using a clickable, lo-fi prototype created with POP). While I was fine-tuning the backend, I used three Invision prototypes to test user preferences regarding user accounts and authentication. I learned from those tests that users preferred the simplest option, one that required zero authentication at the cost of a few convenient extra features.

A Little Extra Fresh Tilled Soil Magic

Arguably just as useful as user testing was the informal design review that several UX designers at Fresh Tilled Soil were kind enough to do. Their suggestions helped me simplify the user flow and reduce users’ cognitive load. I made the following diagram to show the structure of the app before and after the feedback.

a flow diagram showing changes I made to my app's structure after feedback

How It Works

Please check out the live interface if you’d like to see the full user experience. I’ll show a few key screens below:

This initial screen welcomes the user and guides them to create an invitation to send out to others.

landing screen of Let's Do Dinner App

Everyone who is sent an invite next completes the preference form on the following screen and then submits their information, to be taken into account when the app generates recommendations.

preference form from the Let's Do Dinner App


Finally, this screen displays the generated list of recommendations, which each user can vote on. The map at the top offers a geographical look at users’ locations and suggested restaurants or bars.

list of recommendations from the Let's Do Dinner App

Final Thoughts

The nine-week challenge involved too much to cover here, including the helpful process of creating a number of UX deliverables such as personas and journey maps. The experience of taking an app from the inception phase, through iterative user testing, to a working alpha implementation was an invaluable experience for me as UX-conscious front-end developer. It forced me to consider each choice I was making, not only in terms of its technical merits, but also in terms of its potential effect on the user experience.