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

The problem

Every day you see your friends on social media but it can be challenging getting off the screen and meeting up IRL (In Real Life). Mappen allows the daily routine of sharing your whereabouts with friends easier, making the interactions feel more efficient and fluid. Mappen lets you get together and share life in real time with your close friends.

 

First Time User Experience

The app is useful whether it's just you or if you see your friends on the map. Easily check out things to do to make the app successful on your first time experience. 

 

Make Plans

Find something to do by joining your friends’ plans or use suggested or sponsored ideas to create your own plans.

 

Mappen QR Codes 

Access your personal Mappen QR code in your profile. Share your code or scan others’ for easy friending on the app. You can also add friends via the friend suggestion swiper or by their username.

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.

Custom Illustrations

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)

Onboarding flow

The goals of onboarding were to let new users know about Mappen’s value prop, build trust, so that users feel comfortable and excited about Mappen. I decided to introduce the value prop in a fun way which not only led to fewer skips but during our usability tests participants got a firmer grasp of the app.  Introducing UI tutorials in context also helped first time users.

mappen-user-flowmappen-user-flow
mappen-flow-1mappen-flow-1

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
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