Bettering the Navigation Experience

S Maps
Task-flow Redesign

Overview

S Maps is an application that helps people find directions without having to fill any input fields or selecting any options. It removes the pain of putting in the location, the destination, the mode of transport and understanding the complex research results, with the help of an AI Personal Assistant, which provides the right information at the right time through a conversational UI.

Industry Travel & Tourism
My Role UX Researcher & UX Designer
Year 2017
Duration 3 weeks
  • The Challenge
  • The major challenge for me was to approach commuters for the user interviews. I was quite hesitant in approaching strangers, but after the first few times, I gained more confidence and greatly improved my interviewing skills.
  • The Outcome
  • The end result was a combination of a web application and mobile app with an AI personal assistant which acts as a personal local guide no matter where you go. So instead of figuring out ways to enter data, you can just chat with the map and get all the information you need.
Purpose of the Project

Why did I do it?

Being new to the city of Philadelphia, I wanted to explore the different parts and popular spots of the city. And I felt the most authentic way of doing it would be to use public transport. So I started going to new places and faced a lot of issues while planning & undertaking my journey. And that lead me to wonder if there were other people who might be facing similar issues. And thus I chose this task to work on.

Project Objectives
What were the deliverables?

The goal of this project was to redesign a task flow, to increase its usability and thus better the user experience. Hence we had to come up with some sort of digital solution which would make the chosen task easier to perform for the target users.

The final outcome was a web application which also had a mobile application to complement it with notifications.

Skills Applied
User Research

Conducted user interviews to gather data needed for the redesign.

Information Architecture

Used Affinity Diagramming to organize the collected data for it's analysis.

UX Design

Using data from user research, created wireframes and an interactive prototype.

Tools Used
Axure

Used it for creating the wireframes & the interactive prototype.

Photoshop

Used it for creating the graphic elements.

Discover
User Interviews

We started by conducting user interviews to understand how people currently search for directions and what all issues they face while performing the task which we chose. The User Interviews provided us with a lot of useful data which we analyzed to get inputs for the redesign.

Define
Affinity Diagraming, Visualization & Personas

After getting the data from the ten user interviews, my teammate and I created an affinity diagram by grouping the similar information into clusters. This helped us get a better understanding of the data we had collected in the discovery phase. Later I converted this affinity diagram into a digital infographic to get a better view of how the background of my users affected their choices in performing the task. Then using this information, I created a persona which represented my target user group and gave me a more concise insights into their goals, actions and pain points.

The above infographic helped understand the effect of my interviewees background on their choices made during the completion of the task.

Persona of my target users.

Wish I had like a personal assistant to guide me everywhere.
Roy
Ideate
Competitor Analysis, Brainstorming and Solution

I started the ideation phase to come up with something for users like Roy who are new to the place and are not that familiar with Google Maps and other online tools. Thus I began with competitor analysis of Google Maps and Waze, investigating their shortcomings and looking for solutions which would fill the gap.

Build
Feature Mapping, Wireframing & creating the interactive prototype

Used the feature maps technique to quickly test out few possible layouts for my solution. After selecting one of the feature maps, I started designing wireframes and ultimately creating an interactive prototype using Axure. Creating an interactive prototype, made it easier to test the idea with users and get their feedback on it.

Feature Maps

Wireframes

Mobile App Notifications

Validation & Testing
Usertesting with the interactive prototype

Validation was performed by showing the interactive prototype to designers as well as users and getting feedback from them. Important findings:

  • People found the concept of being able to chat with map really helpful.
  • Users, especially older ones, who weren’t tech savvy found the new interaction much better than Google Maps.
  • The AI Starry reminded people of Clippy, which most people hated.
View Axure Prototype
Iterate
Translating the feedback into future steps

Based on the feedback received during validation, the following changes have been proposed:

  • Changing the initial interaction through which the users open the chat box.
  • Making the visual indicators on the map much more clearer.
  • Converting the wireframe interactions into more polished looking visual designs.
Conclusion

What did I learn from it?

Through this project, I learnt about the process of conducting user interviews including creating the script and forming the questionnaire. I also learnt how to create an affinity diagram and how to use it as a tool to extract valuable information from the data collected through user research. Another challenging part of the process was to coming up with feature maps and the wireframes, but it was a lot of fun too.

View Detailed Case Study
And that's all
Thank you for viewing!