Locatify

UX design for mobile indoor navigation

 

Overview

My Roles

  • Ideation

  • Led contextual inquiry and user research 

  • Designed wireframes, mid to high fidelity prototypes

Duration

 Sep.2019 - Dec.2019

Team

2 Researcher, 1 Video editor, 1 designer

Tools

Figma, After Effects

Objective

This project aims at presenting an experience for easy indoor navigation in complicated building that we all might have found ourselves lost in sometimes.

Approach

This project started by the idea of finding the most frequent difficulties that students experience during their daily life in the campus. by conducting a survey and some user interviews we prioritized some problems. Also through the initial stages we found the potential of mobile AR apps as a potential solution.

We got deep into the user journey and take out the requirements for prototyping and tested prototypes with users. After two iterations and user testing, we found the results promising. 

Demo​
 
 

Background

We all had this experience of being in a new place and felt that we needed someone to help us find out where to go or what to do next.

 

isometric-white-question-mark- 1.webp

This problem appeared at the top of a list of problems that we asked students about. After conducting a survey and some user interviews we decided to provide a solution for this problem as the result of this project.

Project Process

 The following diagram represents this process concisely:

process.png
 

Initiation

We came with a list of problems that we thought many students face with during their campus life experience. We conducted a survey with 3 goals in mind:

Rate the difficulty level of 5 tasks you usually experience in campus

Rate the preferred material type for understanding new information 

Rate the preferred method of finding information 

Survey Results

The survey asked students to rate difficulty level of some tasks and their preferred methods of dealing with those tasks.We received 46 responses.

results 2.png
 

Research

The specific goal of our research is to find solutions and ideas to help students to find a room in a building easily. Through the process of the project, we actively engaged the target user population by conducting contextual inquiries and user testing to make informed design decisions.

Identifying users

The first step in research process is to realize who exactly we are going to design for. The following diagram represents all the potential users:

After further looking at the potential stakeholders that’ll be involved in this project, we plan to conduct research with Students.

Generative Research

We conducted four interviews with students about their typical journey of finding a room in a new building. We  specifically wanted to know more about:

Affinity Diagram

After interviews, we tried to make an affinity diagram from user inputs. We were able to gather a series of meaningful insights in this step.

11_edited.jpg
Key Findings

Finding #1:

Certain steps in finding a place are very difficult if not impossible without the assistance of other people.
 

Group 315.png

Finding #2:

Poorly designed entrance, maze rooms and lack of signs pose the largest obstacles to people’s in the iSchool building.

Group 302.png

Finding #3:

New students are often worried, due to starting new journey in new campus, so they need a clear and accessible guide to find their target place easily.

Group 303.png
What makes finding a new place difficult?

Lack of Knowledge

Building Complexity

Lack of Confidence

User Journey Map

Using the user inputs, we created a user journey map to reflect users’ pain points and our potential design contributions in making this experience more appealing.

Design Challenge

How might we help people find their way inside a building using their mobile phone?

 
 
 

Ideation

The ideation phase started with story boarding the user behavior when facing the situation of finding a room in a complex building and the options that they might explore. Soon we got to the concept of using AR to annotate space and help users find the destination.

storyboard.png

Main Idea

Target.webp

After exploring existing AR apps and brainstorming on potential solutions, we got to an idea of dividing the journey to multiple targets for the user to pass and the last target be the destination.

Target Vs. Path

The main reasons behind taking this idea into the testing phase are

  • Opening a door, taking an elevator, using an ID card to access,  are examples of indoor navigation that are difficult to show in a typical navigation app that is based on showing the path.

  • Instead of showing the path to the destination, we can divide the journey to multiple targets.

  • We don't need to explain how to get to the target. User can find out the best way.

  • The last target is the final destination.

Wireframe Prototype

The first iteration of the design cycle had two parts:

  • The first part, “Find AR content” was for users to find information about a place.

  • The second part, “Create AR content” was for users to create AR content in the space.

Finding AR content (UI Flow)

 The following screens show our ideas for the process of reading AR content in the space. The flow starts with screens that aim at getting information from the users about the specific room that they are going to find in the space. Then It directs the user step by step to the destination.

 

Creating AR  content

The following screens show our ideas for the process of creating AR content. The creation starts from the recording button in the middle of the screen, and the whole recording could be ended with the red button on the bottom left. The users can use the toolbox to add text, voice, picture, and shapes to space.

Lo-Fi User Testing

For the lo-fi prototype, we conducted in-person usability tests with five users and found out several usability issues

Key Takeaways

  • Separate the creation part from reading part. The creation part can be subject of another app.

  • Replace technical jargon with more popular terms.

  • Make the start of the app more simple and straight forward.

  • Add voice command feature to make it more usable.

  • Consider Reroute function.

  • Make annotations and texts more clear and ordered. 

  • Highlight the destination.

Medium Fidelity Prototype

Based on the feedback and findings we got from the lo-fi testing, we iterated the prototype into medium-fidelity. Some of the changes made are represented below. For designing details, two main ideas were employed:

  • Keep things as simple as possible 

  • Use isometric icons for showing main features

Mid-Fi User Testing

For this iteration, we conducted in-person usability tests with four users and found out some usability issues.

Key Takeaways
  • Remove menu box and replace it with Reroute feature sign.

  • Replace Voice Assistant icon with something more clear.

  • Use gradient texture for showing targets to be more flashing.

  • Put universally recognized Gear Icon at upper left as setting button.

High Fidelity Prototype

Based on the feedback and findings we got from the medium fidelity testing, we iterated the prototype and added and/or removed some features. Some of the changes are depicted at the following pictures. Also we prepared a video representation of the final application in a real life scenario.

Reflection

Within the time-frame we worked on this project, many issues have been discovered during research, prototyping, and testing.

  • Finding the best method to prototype AR apps is challenging. At this project we found a good approach to test our design ideas.

  • The creation of AR content was the most challenging part that we left for future works.

  • At this project we based our idea on Computer vision Technology and Artificial Intelligence , but we know that it is not still possible to implement these technologies for this purpose.