Mappen
Platforms: iOS, Android, Mobile Web
Disciplines: UX, UI, Prototyping, Wireframing, User Testing
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.
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.
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.
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
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.
