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.
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:
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.
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.
Key Findings
Finding #1:
Certain steps in finding a place are very difficult if not impossible without the assistance of other people.
Finding #2:
Poorly designed entrance, maze rooms and lack of signs pose the largest obstacles to people’s in the iSchool building.
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.
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.
Main Idea
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.