Back to Blog

Apprentice show and tell: rapid prototyping

Author

Each apprentice in our Apprentice in User Experience program is challenged to put the skills they’ve learned to the test by creating a digital product. They are charged with identifying a current problem they’re passionate about and then following the methodology we use to create solutions for our clients. In this series, our apprentices share their projects and the learnings they picked up along the way. Apprentice Alex Holachek created a product prototype to help groups decide when and where to meet for a meal or drinks.

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.

Let's do dinner application flow

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.

Let's do dinner home screen

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.

Let's do dinner diner preference screen

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.

Let's do dinner restaurant recommendation screen

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.

Author Alex Holachek

Alex’s broad background in data, design, and development gives her a unique perspective on building top-notch digital products. Detail-oriented and precise, she is an efficient problem solver – though don’t be fooled by her quiet focus, she is an enthusiastic power-lifter outside of work.

More posts from this author

How we work Process

Product Hero Talin Wadsworth