Mapsenger is a map-based instant messaging application that allows users to discuss, search, and share information about places to meet and activities to do. This app eliminates the pain points of having to alternate between messaging and map apps by having everything you need to arrange a hang out built right into the same system.
For this project, my main contributions were creating information architecture, designing interactive prototypes, conducting the usability test, and implementing the application.
when meeting with friends, choosing a mutually ideal location for everyone requires constant switch between multiple mobile applications that provide functions such as navigation service, curated review service, and social network service. This is because the such decision-making process requires multitudes of geospatial data among all members.
We propose Mapsenger, a mobile application that aims to provide streamlined decision-making process among friends. Mapsenger is a map-based real time messaging application that allows users to discuss, search, and share places to meet among a group of nearby friends. This application features a delightful fusion of chatting and navigation apps, by applying the use of communication channel, spatial search engine, and visualization to improve the experience of decision making among users with contextual geospatial data.
From that point, we started to discuss the pain points in transferring the information between the messenger and map. In order to solve this problem, we decide to integrate communication feature, search function, and places information into the same app. As a team, we brainstormed potential solutions.
Our goal was to create a simple user centered design application that minimizes the user's workload when sharing spatial information. We decided to add only core functions included chat, location search, distance calculation/visualization, location sharing, and information of Point of interests (POIs).
Based on the information architecture, Mapsenger composites of three main components chat, search, and map. We decided to put messenger at the initial screen to help users chat and get more information before searching the places. Then, users can browse, choose, and share the information of their POIs to their beloved ones by a simple click on a marker.
We iterated our wireframe design by conducting informal usability testing with the low-fidelity prototype. Our participants provided feedbacks on error-prevention methods, accessibility, and discoverability of the UI. Participants include five users of both genders with ages ranging from 22 to 35. Each study session last 20 minutes. We created the 15 minutes-task lists for the participants to follow. Then, we interview users to capture their frustration and impression.
Based on the research results, we discovered that pricing, rating, and distance are the main components that help users decide of the place to go. So, we did iterate our design by adding those information to the list view.
As we was designing the UI wireframe and components, we realized that the most important function of this app lies on the transitional interaction of chat and map. Using origami, Jihoon tested out different types of transition. With some external and internal design critique, we settled on an interaction which animates the map avatars to message avatars (very left image). This gave good hint at who was talking, and who was where.
This is my most favorite process. I love turning my idea into something real and see it is helpful and useful for others. For this step, I used React.js, Redux, Pubnub, and Mapbox to build the map-based messenger service.
First Step of the implementation is to break the application into components. This step helps me understand how many components do I need for the application and which one can be reusable.
Then, I drew the diagram of the application states and data flow of the application to use as a reference while implementing. This chart can help me understand how my application works and which data should I pass to each components.
I imported the design from sketch into zeplin to retrieve some CSS properties and use CSS Animation to create the interaction in the application.
I used css animations to create animations based on Jihoon's high-fidelity protoype in origami studio. Here are the interaction design we have in mapsenger.
Transitional Navigation I
Transitional Navigation II
New Message Popup