Jihoon Suh
Personal Website
main3_low.jpg

Mapsenger

App Design

 

Mapsenger

2016-2017 Mobile Prototyping

Have you ever felt devastated or tired of keep switching screen between maps and messengers when you want to send the location of something to your friends or can not decide where to meet? Mapsenger is a map-based messaging service that allows friends to discuss and make informed location-based decisions on meeting place by providing geo-spatial context beneath the chatting user interface.

This work is in progress

Sketch, Photoshop, Illustrator, Origami Studio

Team

Jihoon Suh
Thana Pukasem

Role - UI & Interaction Designer

Main contributed in UI, logo design, and interactive prototyping. I also participated in ideation, wireframing, and flow chart. 

Beginning

As my first side project at UW, we decided to design a service that applies to us. Right before the meeting, we could not decide where should we meet for the meeting, tired of switching between the messaging and the map application.

Lets build a map-based messaging service for geospatial information & context sharing and decision making!

For group of friends that live in similar neighborhood, finding places to meet involves elements such as types of activity, relative distances between each other, distance of the meeting place.

We discussed the pain points of transition between the messaging and map, when a group is choosing reasonably ideal location all, which we call POI (Point Of Interest). In order to discuss and validate a single POI, the user needs to go through 5 App Switching between map and message application.

The diagram of how app switching between message and map occur when a group is choosing POI (Point Of Interest)

The diagram of how app switching between message and map occur when a group is choosing POI (Point Of Interest)

In the phase of brainstorming and ideation we identified the problems and defined the users to young group of friends residing in close proximity with one another. Also, we aim to create a simple user centered design application that can minimize the user workload from sharing spatial information, by merge core functions of messaging and map searching for ideal activities. After brainstorming, we decided to add core functions: chatting, location searching, distance, location sharing, and information onPoint of interests (POIs).

 

Information architecture

 

Paper Prototype Usability Test

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.

exp1.jpg

 

Initial UI design & wireframe

exp1.png
 

Logo Design

 

Micro interaction

As I was designing the UI wireframe and components, I realized that the most important function of this app lies on the transitional interaction of chat and m. Using origami, I 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.

Chat & Map Transition

Search & Chat popup

The interactive prototype was built in Origami Studio, using sketch imports 

The interactive prototype was built in Origami Studio, using sketch imports