A simple experience for a simple problem
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. The user flow for Eat Roulette is as follows (All captures from live product).
1. Determine which area
Eat Roulette will automatically center the map over a users current location, based on the assumption that someone would prefer to go somewhere nearby. However, users can move the map, and can pinch to zoom in our out to refine their search area. There is also an affordance to re-center the map over your current location if you are exploring the map and get lost.
1a. (Optional) Decide on Food, Alcohol or Coffee
You can modify your search filter if you so choose. Eat Roulette provides Restaurants, Bars, and Cafes as filters - intentionally kept minimal to remove the burden of choice per the design principles of the app. These filters let you go bar hopping as opposed to making a quick lunch choice, or explore new cafes in a particular area. Restaurants are the default filter, but Eat Roulette will remember your previous selection between sessions.
2. Get a Search Result
Hit the search button, and each possible location will light up with a dot, finally ending on a randomly chosen location. Eat Roulette searches for locations rated above 2 stars that are currently open. If no restaurants are found within your search area, Eat Roulette will zoom out one increment at a time and re-search to find you the closest possible results to your desired area.
3. Go to the location
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.Once you arrive at a venue, the journey is completed, and Eat Roulette resets to its default state.
Stage One - Over the Shoulder, in Situation
Myself and Jared Lodwick, armed with builds of Eat Roulette on our phone, would frequently dogfood the app. This naturally extended in social situations where we would hand our device to a member of our party, and observe them learning the app, and using it to decide our group's next location. This was very effective for scrubbing out confusing elements of the UI and superfluous animations.
Stage Two - TestFlight Deployment
Stage two of user testing was a classic closed beta, wherein we selected candidates from all over the United States to participate in a beta version of Eat Roulette. This was a crucial testing phase for the app, as we needed 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 was hitting the mark often enough for the app to be useful.
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.
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 mapped, and displayed to the user, where they can confirm and begin navigation.
Eat Roulette uses the Google maps 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 its compass bearing 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.
Additionally, 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.
Eat Roulette is a conceptually and visually simple app which feels great to use. Part of the way I accomplish the snappy feeling while using the app is through carefully considered animations. Every panel slides in and out. Each place that is found gets 'pinged' during search to give users insight into the system. Subtle panning and zooming of the map occurs to create a natural fit for the route. Even the camera swivel into third person perspective was carefully tuned to give a fast, snappy feeling to changing states of the app. I used custom animation curves and pushed swift to the limits to accomplish a great feeling user experience.