Foursquare/Google Maps with Noise Reduction.

Role: Head of Product & UX

WHAT

Designing a location-based mobile application from scratch and providing a similar experience to Google Maps, Yelp, and Foursquare but without the noise and strangers, then provide features that would help the user make a decision on-the-go.

WHO

2 UI/UX designers and a react-native developer working for little more than 3 months to build the MVP. Every member worked on a part-time basis with sweat equity.

HOW

Primary and secondary research including competitive and comperative analysis. Working at co-working spaces, homes, and remotely while using the following tools: Sketch, Sketch Mirror, Gsuite, Slack, Zeplin.io, Origami, Pinterest, Asana.

Problem:

Most of the people like to find out about every great experience a city has to offer, and tend to use applications to keep track of these things/places in an organized way. The well-known applications in the market such as Google Maps, Yelp, Foursquare, Tripadvisor et al. help users in different ways. Many of them include places and opinions of the public, in which the user isn’t able to find what she’s looking for necessarily, since those people who are reviewing POIs don’t usually relate to her lifestyle or taste.

We decided to design a platform where users only have places and people they care about –without the noise. We wanted to utilize the map view in the best possible way since location data was the most important thing for our target user (myself, an expat who moved to Buenos Aires for the first time). Our vision is to eventually build a social app that eliminates noise and strangers from the users’ horizon and only display things that interest them.

Below, you can explore our thinking from start to finish:

Without a doubt, one of the best apps that utilizes the map feature is Google Maps. Here’s how our user started accumulating his favorite places on a map by utilizing the app’s features. In this case, these are the four favorite cafes of the user in Buenos Aires. This is a very simple and help user locate his favorite cafes at a glance.

Things get complicated once the user starts adding all of his favorite places and places that are recommended to him by others on the same map –with the limited options of icons & labels.

In the end, adding more and more stars for your favorite places, places your friends have recommended adds up and turns into a nightmare. We’ll come back to this with our proposed solution.

User Persona / User Needs:

Let’s look at our initial user and try to grasp his needs better. Our goal was to understand the problems around this techy expat living in Buenos Aires, and figure out what the MVP requirements should be for the prioritized use case below.

Journey Map (Happy Path):

Our team interviewed our user and discussed for long hours to understand his needs, then we prioritized the use case, which we will be focusing on. Our MVP will be solving the problem for the use case with highest priority, where Kaan is looking for a place to socialize with friends, and he takes the lead on making suggestions where to go.

Brainstorming for the Minimum Viable Product (MVP):

We’ve gathered everything we know about the needs of our user, the categories of the places and features that should be included in the ideal app. Then, we prioritized everything and came up with the MVP requirements.

Competitive Analysis:

We studied the ways our user would utilize competitors’ platforms while solving the problem above. None of the applications can solve the problem on-the-go without user sitting down and doing some research. What we needed was a map feature that is going to show all the information in an organized way and help Kaan filter things out while looking for a place to hang out with friends.

We also studied Foursquare and Yelp and tried to display all of the places user marked on these platforms. Both of these apps were able to display all of the marked places, however, only with isplayed with identical icons, similar to Google Maps. The users would not be able to understand why these places were marked at a glance.

We also studied these platforms and rated them in four major areas: Trustworthiness, Ease of use, Curation, and Noise.

Trustworthiness meant how credible these ratings and opinions were. Foursquare and Yelp are able to prioritize your friends’ opinions while Google is good at collecting a lot of reviews. We learned from our user that he didn’t care about all of his friends’ opinions. Some are trusted with their opinion for beer, some are good at music, however, none of his friends can be trusted with everything. If there are hundreds of reviews for a place and if it’s rated 4.4 stars over 5, then our user would trust that information and would decide to go to that place. However, he wouldn’t know what to eat/drink there.

Ease of use: How fast and easy can our user reach the best information available on this platform. Our ultimate goal is to provide a mobile experience on-the-go.

Curation: Are these platforms able to personalize the information for our user?

Noise: All of these platforms have a lot of reviews, ratings and other information. How likely our user trusts or cares about all of these opinions?

Then, we moved to the next phase, the initial sketches of our app.

First Sketches:

We were learning a lot and started to turned this knowledge into user interfaces where we were going to be able to provide what our user needed to achieve for the most prior use case on the go.

Wireframes / User Flows:

After the must-have features of the MVP, we went straight into wireframing. Our team studied the interaction design patterns on similar location based applications and other platforms and decided how the user will be interacting with Atdaa IOS app. Then, we communicated all of the ideas with our developer.

Style Guide & Branding:

Color Palette:

Our team worked on constructing a color palette that would go well with Atdaa’s main brand color (Pumpkin Orange) which communicates friendliness, cheerfulness, and confidence. We wanted to use soft colors and stick to a flat color palette making our app look fun and cutting-edge.

Atdaa Logo, App Icon, and Splash Screen:

We’ve previously designed our logo for Atdaa (with logo designer Joe Sutton), which is aligned with our 4 brand keywords (Experiences, Outgoing, Joyful, Authentic). The letter A is already looked good on its own so we decided to keep it alone for the app icon. We wanted to make sure our brand values and messages were communicated everywhere on the app. To provide a similar experience on the splash screen, and communicate our message, we chose a social & cheerful background image (©Rhianon Lassila).

While we were delivering search results to our users, we used an animation to indicate that this would take some time. The length of our animation was shorter or equal to the time it took us to get results from the Google Places API.

Map Design:

Our simplistic style and goal for eliminating the noise in every possible way has been reflected in our map designs as well. We changed the default Google Maps color to Wild Sand (#F5F5F5) to be able provide contrast with our colorful and fun icons.

Visual Comps and Prototype:

We built our MVP and released it to our test group initially. Currently, we’re testing our app with real data and collecting feedback from users who are similar to our initial ta persona.

Here’s the flow of Atdaa IOS app and our final decisions for visual designs:

Sign up:

Create account button will take you to two options: Creating an account with Facebook or email address. Facebook is a faster process.

Default screen:

After you allow the app use your location and send you notifications you’ll land on the default map view with default data (Kaan’s places) that comes with it. There won’t be anything highlighted on the map since you haven’t selected any filters.

Adding a place:

You can go ahead and add your favorite places. We only have these categories at the moment: Beer, Wine, Cocktails, Coffee, DJ, Food, Live Music, Other Drinks, Tea. Just click on the add place button.

The search screen gives you “Places Nearby” in case you’re tagging a place that you’re at. This way, you don’t need to search for it.

So, let’s say we’re adding our favorite stuff about All Saints Cafe in Belgrano. Hit Add Place button or + button.

Click on the category you want to add items to, then pick your items, add notes, if you have any then click the back button once you’re done.

Filtering the map for tagged places:

On default map view, click on one of the + icons and add any category you’d like to search for (you can search for one or more things at the same time).

In this case, let’s search for best beer places (with no preference).

As you can see, all of the tagged places show up on the map. Zoom in and tap on any of them to see the details about that place:

Edit Place button will take you to the tagging flow where you can change the tags. For food notes, you can also tap on the note and get to the edit screen. (below)

Deleting filter icons:

When you want to delete one of the filters, just tap and hold on the icon until the trash can shows up on the right side of the bar. Then, drag it to the trash can and it will be gone.

Bonus feature: Deleting filters at once

On the adding a new filter screen (the one that shows up with you click on an icon or + icon), you’ll see a trash can on the right side of the bar. Tapping on it will prompt you the modal screen asking for confirmation to trash all of the icons at once.

Hope you enjoyed the article. Thank you for reading all the way here.