top of page
Frame 29.png

Smart Maps

A gesture-controlled navigation APP responds to in-air gestures

50b10cb0e20397b5bbf932789dd2d91.jpg

Project Overview

People now rely on navigation apps to access traffic information. They no longer have to remember every road and place in the cities. At the same time, some people are struggling with navigation apps because they will be distracted when they drive. 

​

Navigation apps increase the risk of car accidents because users look away from the road more than they think. The project aims to produce gestural languages that are learnable and easy to perform, and the ultimate idea is to give users the functionality of an app while leaving their attention free to focus on the roads and ensure the safety of themselves and their passengers.

​

​

Disclaimer: This project does not involve research on sign language. Gestures that are designed in this project are purposed in individual studies ONLY.

Process highlights

用户.png

Solo Project

Chloe Chen(me)

Group 13.png

Time

Six weeks. September - October 2021.

Vector.png

My responsibilities

Secondary and primary research, Gesture design, UX design, UI Design, User testing

Group 14.png

Project plan

Two weeks of research, followed by two weeks of wireframing and user testing, and two weeks of prototype and green screen filming

Project Quick Guide

Every UX case study consists of many steps, I organized these steps and integrated them into four categories. Any solution my team and I came up with always tie back to what we discovered about the needs, wants, pain points, and jobs to be done of our target customer/audience/user. (Tips: you can click on any of the steps and it will take you there :)

Case Summary

Discovered user problem

Navigating with an on-screen device while driving can distract users as they need to perform actions like finding a button or selecting a feature. It causes users to face unwanted safety issues. Navigation apps increase the risk of car accidents because users look away from the road more than they think.

Product vision

Gestural interfaces enable users to interact with digital devices directly, sometimes without the need for physical hardware that we have to touch - enabling us to use users' fingers, hands, arms, and even their whole bodies as the interface to a screen, an object or a responsive environment. 

 

The project aims to produce gestural languages that are learnable and easy to perform

Outcomes

  • A video walks through important features and demonstrates the user flow of Smart Maps. 

  • A mobile application "Smart Maps" brings users an immersive gesture-controlled navigation experience.  

Video Demonstration - Smart Maps(3:35 min)

General Gestures

General gestures mean the command we commonly when operating any system, for example: Next, Previous, Select, etc.

Smart Maps - Gesture

Onboarding: Perform gestures and actions

Since the gestural system of Smart Maps is a new design language to users, onboarding plays a critical leading role in letting users know what to do. I introduced several of the most commonly used gestures, including selected, previous, next, confirm, back, gesture library, and other common commands.

Smart Maps - Gesture

Choose Which Route to Take

Smart Maps - Gesture

Zoom In & Zoom Out

To prevent the system from not recognizing the gestures correctly, I designed the "zoom in" and "zoom out" into two different sets of gestures. Otherwise, if users repeatly perform "zoom in", the machine will misunderstand the sequence of actions, resulting in the inability to operate the system correctly.

Smart Maps - Gesture

View Upcoming Direction

Smart Maps - Gesture

Pan Around the Map

Smart Maps - Gesture

Center Navigation

Smart Maps - Gesture

The Double Diamond Process

Every UX case study consists of many steps, I organized these steps and integrated them into four categories. Any solution my team and I came up with always tie back to what we discovered about the needs, wants, pain points, and jobs to be done of our target customer/audience/user. (Tips: you can click on any of the steps and it will take you there :)

Image by Windows

Research

Secondary Research - Why gesture is important and useful

In the secondary research, I found that Designing and using gestures congruent with meaning can augment comprehension and learning. And The design of hand gestures should follow principles of natural language and consider the discomfort and fatigue associated with distinct hand postures and motions.

Observation Research - What gestures do we use in our daily life?

I filmed myself with my phone for an hour and looked at the video to see what kind of gestures and movements I have done over the one hour. I screenshotted them and categorized them into two groups: intentional gestures and unintentional gestures. I came out with an insight: not only the face which mainly shows the emotions but also the hands. hands are significantly expressive. 

Smart Maps - Observation Resarch
Competitive Research - What's on the market?

Since this space of gestures-controlled apps is not saturated, I wanted to explore what’s already in the market and what could be improved.

​

It appeared that there are many different types of gesture control apps in the market but most of them lack usability. Apple does a great job on gesture control devices. BMW's gesture control system lacks echo feedback, so users don’t feel like the system is responding to their actions. Mumo play Lights is an app on the ios platform, but the overall user experience is bad, the gestures are hard to perform, it also lacks feedback, and the UI is terrible. 

Smart Maps - Competitive Research

Apple Watch AssitiveTouch

  • Most well-known gesture control devices

  • Great user experience

  • Creative / great gesture design

Smart Maps - Competitive Research

BMW Gesture Control System

  • Well-developed gesture control system

  • Inobvious of echo feedback

  • Missing a gesture manual

Smart Maps - Competitive Research

Mumo Play LIGHT

  • Gesture control app on the phone

  • Bad UI

  • Hard to perform gestures

How Might We 

How might we reduce phone distractions so that people can focus more on the road? 

Gestures Design and Testing

Smart Maps - Gesture Design

After learning about the fundamental of gestures,  I spent 2 weeks trying to explore gesture representation. After learning the gesture language and deciding what functions will be focusing on, I sketched out the gestures and use my hand to stimulate them. I sketched out six different styles of representation. From the most figurative to the most stylized.

Testing Gestures

And then I test all of the gestures in interviews. I recruited two interviewees to let them guess and perform the gestures. The key takeaway from the interview was that users took time to understand figurative gestures. And they shouldn’t take a long time to perform a gesture. The arrow helps better and quicker to understand. With all the feedback I collected, style No.4 was the most understandable and recognizable style to represent a gesture.

  • Users took time to understand figurative gestures

  • Shouldn’t take a long time to perform a gesture

  • The arrow helps better and quicker to understand

Smart Maps - Gesture Design

Based on the feedback from user testing, style No.4 is the most understandable and recognizable style to represent a gesture.

Image by Sigmund

Design Concept and Testing

Based on the feedback and insights from the research, I’m now moving forward with the design. I was catering to 5 main flows, which are the fundamental functions that people always use in a navigation map. I used tools like a task flow diagram, wireframe, and style guide to help me to turn the scribbles into the prototype. 

(Tips: click on each project phase to see more details)

Usability Test & Changes

After concept testing which lead to the app platform, I would iterate and test 3 more times, each building upon the suggestions of the previous. There are total of 4 major improvements to the design. 

Bigger buttons, lesser information

  • Based on instructor feedback, giving users less information will let them filter out what they need quicker

  • The users’ fingers move only two directions (move up and down) not four directions(up, down, left, right) 

Smart Maps - Testing

Old

Smart Maps - Testing

New

Smart Maps - Testing

Make Echo Feedback more Obvious

  • It’s important to let users know what is happening without finding them intentionally

Smart Maps - Testing

Old

New

Smart Maps - Testing

Don’t Look, Feel

  • Often time the design of onboarding will walk through the functionalities and features for users, but they barely remember them. 

Smart Maps - Testing

Old

New

New Feature: Gesture Library

  • Based on the feedback from participants, they would like to have a library to remind or find the gestures because it’s a new operating language.

Smart Maps - Testing

Old

Smart Maps - Testing

New

Final Thought

I am very grateful to my team for producing so much content in only four weeks. Everyone in the team was actively participating and discussing in each stage, and everyone's ideas and questions made the whole project more polished and reasonable.

Tripanda's initial concept was to provide a simple experience: we would dress up as tour guides and prepare travel suggestions for users ahead of time. As each stage is completed, we ask ourselves, "What makes Tripanda unique if we're just giving our users a walkthrough?" Tripanda should not only provide navigation and price range like Yelp, Google Maps, and TripAdvisor but also be like when users are holding a map and self-exploring in a specific guiding situation (the quality experience we have filtered), gaining a multi-layer of story senses and accomplishment.

That's why we added a feature of a slow-mail postcard at the end. Any souvenir is better than one's own memories, which is also what we explained in the goal at the beginning, so that users can also recall their own experience many years later about the feeling of living in the slow-paced city of Chengdu. As a next step, we wish to develop similar products for different cities around the world as this pandemic comes to an end and tourism returns to our sight.

Others you may like

Ashley Jones

Art Director

Don Francis

Tech Lead

Alexa Young

Product Manager

bottom of page