Mappen
Platforms: iOS, Android, Mobile Web
Disciplines: UX, UI, Prototyping, Wireframing, User Testing
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.
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.
Web Experience
I designed the web experience that users can browse on mobile or in the browser when they are invited to a plan.
Mobile Web Flow
This flow was done mobile first and adapted for larger web screens.
Personas
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.
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.
