Eat Roulette

Challenge

Deciding where to eat is hard. Sometimes you're just hungry.

Solution

Remove the burden of decision making from people who just want to find a place to eat, and choose where they are going to go for them, with maybe a do-over or two.

From a cheeky beginning to a great experience.

In early discussions, Eat Roulette was literally a spinning wheel.

When we originally toyed with the idea of Eat Roulette, it was in the form of a skeumorphic interface with a wheel of fortune style wheel that users would literally spin to discover where they would be going.

We initially thought this would be a fun interaction for a simple tool, but as we started to validate the concept with other people, we quickly realized that we had stumbled on a funny, but real, problem, and that many people would be interested in a more useful interface for simplifying their decision making.

We landed on a very simple UI, keeping the whimsy while adding utility.

The beauty of the original wheel was it's speed and irreverance. We wanted to make sure to bring these concepts over to the final UI by creating as few decision making points as possible for people.

However, upgrading the UI also allowed us to be more helpful, by adding additional information about places the app decided on, adding the ability to roll again, as well as having in-app over the shoulder navigation to make the entire experience from rolling to going as quick and easy as possible.

While developing the core mechanics of the app...

We used sketches and flows to determine the core flows and architecture of the application for development. In the meantime we began to explore type hierarchy and layout in the form of slightly higher fidelity digital wireframes.

Final Result - Deciding where to go made simple.

Eat Roulette has an extremely simple interface and a very narrow focus by design. It has one purpose and one purpose only - to help you quickly choose a place to eat or drink and go there.

Choose an area.

Eat Roulette will automatically center the map over a user's current location, based feedback we've received that people generally prefer to go somewhere nearby when rolling the dice on their destiny.

Users can move the map by dragging, and can pinch and zoom to adjust their search area to any size or location.

There is also a button to easily re-center the map to a user's current location, which appears automatically if a user moves the map far enough away from their original location.

Get a search result.

Hit the search button, and each possible destination will light up with a dot. After pinging each spot, our magic eight balls of infinite possibility finally agree on a randomly chosen location.

If no destinations are found within your search area, Eat Roulette will automatically zoom out one increment at a time and re-search the larger area to find you the closest possible results to your desired region.

Eat Roulette searches for locations rated above 2 stars that are currently open.

Get a move on.

The location details are displayed, along with the route, and one more button press switches you into a custom over the shoulder navigation mode.

The directions provided will automatically switch between walking and driving directions depending on the distance between your current location and the selected venue.

The estimated walking time to your location, or driving time if over 2 miles away, is displayed alongside your estimated arrival time. The contact information and website are also provided to keep you occupied while en route.

Once you arrive at a venue, the journey is completed, and Eat Roulette resets to its default state.

Food, bars, or coffee?

Eat Roulette provides the ability to search for restaurants, bars, and cafes by providing a dead-simple filtering system.

The filter selection is intentionally kept minimal to remove the burden of choice from users, per the design principles of the app. Frankly, even including a filter is pushing it, but our user testing has shown that bar hopping is a super fun way to enjoy Eat Roulette.

These filters let you roll the a different set of dice depending on the mood you are in, or the types of things you want to explore. Restaurants are the default filter, but Eat Roulette will remember your previous selection between sessions.

User Testing

Live Testing - Over the shoulder shadowing, in situation

Armed with builds of Eat Roulette on our phones, we would frequently dog food the app with ourselves and friends. This naturally extended in social situations where we would hand our device to a member of our party, and observe them learning how to use the app. We then left them to roll for the next location and decide our group's destiny.

This process was very effective for scrubbing out confusing elements of the UI and superfluous animations. It also helped us fine tune default search radius' and prompted the implementation of certain search behaviors, like excluding results under 2 star ratings.

Test Flight - Deployment and beta testing in the wild

Stage two of user testing is ongoing and is your classic closed beta, wherein we selected candidates from all over the United States to participate in the current version of Eat Roulette. This is a crucial testing phase for this application, as we need to validate the experience across different types of locations.

We put special effort into selecting users in rural and suburban areas to see if our process for random selection is hitting the mark often enough for the app to be useful. Early results are promising, but there is clearly a need to mitigate the frequency of chains in suburban and rural areas. No one wants to go to Starbucks every time.

Beta testing will conclude Q1 of 2018, at which point we will launch the first production version of Eat Roulette on the iOS app store.

Development + UX = A Happy Pair

I developed Eat Roulette natively for iOS using Swift. There were many development hurdles to overcome in the process of creating Eat Roulette, and a few that I'm fairly proud of. I've broken them down here in terms of their relationship to the overall user experience.

Location Selection

Instead of only looking for places within the radius of a users current location, Eat Roulette allows users to adjust the map anywhere at any zoom level and search within the visible map area. This helps support the myriad use-cases surrounding making plans ahead of time.

Eat Roulette uses Google Maps to get a given area to search in, then it uses the Google Places API to get of all the currently open venues in that area which match the user's selected filter (Restaurant, Bar, or Cafe). From that list, we drop all locations that have a 2 star rating or lower, and randomly select from the remaining results.

If no restaurants are found within the search area, Eat Roulette will zoom out one increment at a time and re-search until it finds something to get you the closest possible results to your desired area. This result is displayed to the user, where they can confirm and begin navigation.

Routing and Navigation

Eat Roulette uses the Google Directions API for routing, and has a completely custom built navigation system.

The routing system is given two GPS coordinates, and queries google maps for each leg of the journey, which I then visualize over the map system with the Eat Roulette stylized lines. Upon selecting a place to navigate to, the map perspective switches to over the shoulder.

Once a user is within 20 feet of a turn, Eat Roulette automatically adjusts the map perspective to face down the next street. The app also detects when a user has arrived at their specified location and returns to its default state.

If a location is further than walking distance, the app will automatically switch between driving and walking directions without any additional input from the user.

Animation

Eat Roulette is a conceptually and visually simple app which feels great to use.

Part of the 'good hand feel' is due to the snappy animation styles which transition between states. Every panel slides in and out, the map is always lively and in motion, and each place that is 'pinged' during search is represented visually to give users insight into the system.

Subtle panning and zooming of the map occurs to create a natural fit for the route so that the directions always fall within view. I spent a lot of time creating custom animation curves and pushing Swift to the limits to accomplish the tight animated feeling.