A new feature on Mapstr, a UX/UI case study

Adding a new feature on Mapstr app

About Mapstr

Mapstr is a french mobile app created in 2014 by Sébastien Caron which lets you create a personal map with all of your favorite places (restaurants, hotels, museum…) anywhere in the world that you can sort by personalized tags. You have access to every details in one touch: pictures, opening hours, website, contact number… And your map is always private unless you choose to share it with others and have access to your friends map.

In 2019, Mapstr claims nearly 1.5 million active users — 40% of them outside France — each with, according to the creator, around a hundred addresses listed on average on their account.

It is considered as “the app that Google should have been created with Google Maps to save all our favorite places” – GQ

So basically, the app shows you all the address you should try because of an article, a friend recommendation, or even your own experience, on your own city or abroad. But imagine now that you are abroad with your best friend, and you want to try local dishes, with a local ambiant, immersed in the culture of the country and you don’t want to go on the restaurant. Imagine now that you are in your own city and a friend recommends you to try the speciality of his neighboor who is an excellent cooker? Imagine it can now be possible through Mapstr.

Researches and results

I worked during a week on this feature by my own, as an UX/UI designer

Before going into details, I made some researches on the market and found that there were no direct competitors on the market. On one side, Google Maps is a competitor regarding the feature of adding personalized addresses on your own map. On the other side, there is some competitors regarding the “local food sharing” like Mamaz or Eatwith. But no website or app is doing both.

I conducted five interviews to several users to know if they would be interested by this feature. I had some interesting feedbacks such as:

“ I want the possibility to see reviews”

“I would use it mainly abroad to discover new local dishes”

“I would do it as an host if I could put my availabilities”

“I would go with some friends, not alone”

“It need to be very professional to inspire security and hygiene”

It helps me to focus on the several small feature inside the feature.

The idea and first iterations

Our problem statement is the following:

The user wants to be able to book seats at an individual place because he wants to dicover dishes and recipes and want to share a moment with passionate peoples.

This new feature was quite well received by the users because as Mapstr is a collaborative application, you share your good places and tips, adding a “collaborative” way of eating is in line with the company principles and users principles.

I made some changes on the app in order to answer to the users needs, expectations and frustrations. I took into considerations all the insights from the researches and did some mid-fi wireframes:

1. I changed the icon of the “particular” adress in order to see at a glance on your map what kind of address it is. I chose at the beginning a rectangle to be different of the circle.
2. To be RGPD compliant, the exact address would be not displayed, so I added a circle area around the icon to just indicate a zone.
3. You still cannot rate the host because it is not the goal of the app but you could now see comments from previous experience in order to have real insights
4. A fixed filter would be automatically added on an address between “particular address” or “public address”
5. I add the possibility to directly book a place from the app, and not redirected to The Forks
6. I choose qualitative pictures and description to let the user feel the security and hygiene they asked. They also can see pictures to have a preview of the place.

Usability tests

I made some usability tests on my first high-fidelity prototypes and here are the main take-outs regarding the UX and UI part:

• “How and when can I choose my meal?” → in fact, I forgot the possibility for the user to see what the host is proposing and where the user select the menu
• “How, on the edit page of an address, can we know if its’s a particular or a professional type of address” → I add a fix tag on the edit page
• “Change the “particular” icon to looks more like a house”

In parallel, I did an atomic design to help me with the colors and the symbols to improve and being faster with my high-fi prototypes:

Atomic Design

The final solution

At the end, the features cames up with all the improvement.

It’s now possible to add a “particular” place from a friend’s map, choose personalized tags, see comments with pictures from past experiences to have an overview, see the menu in advance, having a look at the host page, see the prices and then booking online. When booking, you can choose the date of the dinner, see all the host availabilities, you can choose the arrival time, the number of invites, the menu and also if you have some allergies or comments to leave… Click on “ok” and you receive an email with all the informations you needs. That’ it, enjoy your experience !

See below the video of the final solution and here you can interact with my feature: https://marvelapp.com/prototype/7b9b8ci.

Next steps

• Having some feedback from the cookers/hosts and not only the users and invitee to see if they would be ok to host unknown people to their places.
• Add an indication when you are on your own map, a picture or a specification to let you know that you are not on a friend map. It’s not linked directly to my new feature but it was a recurrent insight that’s seems important to me.

I really enjoyed this project because it was my first individual project and I think this app has a great potential.

Thanks for reading.