Mappen

 

Platforms: iOS, Android, Mobile Web

Disciplines: UX, UI, Prototyping, Wireframing, User Testing

Mappen is the easiest way to get your friends together IRL (in real life). Share your location with your close friends or family and see them on your map.   Cross-platform app on iOS, Android, and mobile web. 

mappen_thumbmappen_thumb
15_DM Problem Statement Take 115_DM Problem Statement Take 1

Affinity Mapping

Our design team started with sticky notes with each one containing a problem identified from our research. We started by sorting the stickies into groups so as to gain new patterns of thinking and reveal new ideas about the user’s perspectives. We fleshed out user-centric ideas in a creative way so we could create the ideal user experience for primary and secondary users.

 

Wireframes

Here's a low fidelity look at the plan creation flow. 

 

Wireframe (1)Wireframe (1)

 

Make Plans

The goal was tro create an app experience that improved how teenagers plan and get together in real life. Features included finding something to do by joining friends’ plans or use suggested or sponsored ideas to create plans.

Cheer plans & locations

I wanted to add delightful micro-interactions to engage our users, enabling them to interact with the product in an intuitive and effective way. I fine-tuned this animation alongside our iOS developer, Michael, to make the user experience delightful and satisfying.

12_Plans12_Plans

Web Experience

I designed the web experience that users can browse on mobile or in the browser when they are invited to a plan. 

mappen_web_cover_3mappen_web_cover_3

Mobile Web Flow

This flow was done mobile first and adapted for larger web screens.  

mappen-flowmappen-flow
16_Goal Take Two216_Goal Take Two2
15_DM Problem Statement Take Two215_DM Problem Statement Take Two2

Status Updates

Set an emoji status to show friends WYD (what you're doing) and see what everyone else is up to. Statuses let friends know if they should hit you up, text you to meet up for food, or drop by while you're watching Netflix.

Navigation via Cards

The main navigation paradigm in the app went through many iterations to make something truly delightful and functional. 

Direct Messages

Integrating chat into the app allowed for better communication. By allowing people to react to people’s location in real time led to better conversations and repeat engagement.  

 

Top #5 in the social category in the iOS App Store

#1 trending in the U.S. App Store 

Featured in the App Store 

Custom Illustrations

mappen-stillmappen-still

Color

Color is the cornerstone of Mappen Design. It distinguishes our brand and helps us to create consistent experiences across marketing and product. We use color in meaningful ways in all expression of our brand. 

 

 

We are committed to complying with AA standard contrast ratios. To do this, we choose primary, secondary and extended colors that support usability. This ensures sufficient color contrast between elements so that users with low vision can see and use our products.

Color (5)Color (5)

Apple Watch App

Adding apple watch support was a decision since our app is meant to be used on the go, adding real-time updates and notifications.

 

mappen-watchmappen-watch