Find the perfect place to eat and drink

Food and drink have a nice way of playing a supporting role in most things we do. The best way, in my opinion, to see a city, is to visit different restaurants and bars and consume what the city has to offer. Because the exploration of a city is a never-ending quest, I wanted to have a way to record where I’d been, so that I could more easily enrich those further explorations. This means not only saving new places to go but also documenting places I’ve visited including how those places made me feel so that I could quickly decide if I wanted to visit them again or recommend them to a friend.

ROLE
UX/UI, Branding, Visual Design

CLIENT
Personal Project

UX Challenges

I started by identifying four key features for a new map product. I wanted to be able to (1) add new places easily, (2) categorize and group these places so that I could sort, filter and search easily, (3) insert voice into the map, and I wanted that voice to come through via the writing of reviews and unique categorizations like “Best places to go on a third date” and finally (4) share the map easily.

This project was born out of my own desire to find a mapping tool that allowed me to do all 4. However, I still did a more formal competitve analysis of tools in the mapping space.

UX Solutions

One thing I always found frustrating about restaurant review websites is that they are largely designed with list views. The reality is, people interact with restaurants, cafes, and bars in physical space. We dont think about physical places in lists - we think about them in proximity to other physical places. A map view allows users to see resturants in a digitized geospatial view that more closely mirrors the way they interact with restaurants in the physical world.

Below are a few early wireframes exploring how to ensure a map-centric view on all devices. It’s worth noting that I chose to create a responsive website with a mobile-first approach instead of building an app so that users could access the tool across devices without a download barrier.

Map Mango makes it easy for users to add new places to their map. With the help of a google maps API, users have access to the entire Google database of restaurants, cafes and bars. Each time users add a new place to their map, they’re taken through a process where they select it’s category, write a description, tag relevant types of food and drinks, and add it to one or more “playlists.”

The three categories - restaurants, bars and cafes each have a unique icon that appears on the map. This helps users scan their map and make distinctions between the different places they’ve added.

I created “playlists” for users to group places together in creative ways. The playlists can be used to collect places based on any vector, such as specific uses cases like “Drinks before dinner,” or “Birthday bar crawl.”

Mango has an account-based system that enables users to create their own playlists and follow the playlists of other users.

Branding & Design

Mango’s branding is clean but playful, featuring a friendly color palette and geometric sans typeface. I wanted to foster a sense of play and exploration that matched my desire to explore the city in the physical world.