Smart Maps
A gesture-controlled navigation APP responds to in-air gestures
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
Solo Project
Chloe Chen(me)
Time
Six weeks. September - October 2021.
My responsibilities
Secondary and primary research, Gesture design, UX design, UI Design, User testing
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.
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.
Choose Which Route to Take
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.
View Upcoming Direction
Pan Around the Map
Center Navigation
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 :)
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.
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.
Apple Watch AssitiveTouch
-
Most well-known gesture control devices
-
Great user experience
-
Creative / great gesture design
BMW Gesture Control System
-
Well-developed gesture control system
-
Inobvious of echo feedback
-
Missing a gesture manual
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
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
Based on the feedback from user testing, style No.4 is the most understandable and recognizable style to represent a gesture.
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)
Old
New
Make Echo Feedback more Obvious
-
It’s important to let users know what is happening without finding them intentionally
Old
New
Don’t Look, Feel
-
Often time the design of onboarding will walk through the functionalities and features for users, but they barely remember them.
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.
Old
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