NUSMaps
Indoor navigation has always been an issue in huge indoor spaces.
Even more so in a university like NUS. Today, we designed a product for campus users to experience indoor navigation seamlessly with ease and confidence.
Rohan Dev
Team Leader
Tools
Used
Hang Jia Jun
User Research
Illustrator
Photoshop
Figma
MarvelApp
Sandesh Sharma
Visual Design
Nicole Chong
Prototyping &
Interaction Design
Meet the
Team
Project Overview
Background
Challenge
NUS is designed like a maze. It has perennially been a challenge for students, of all levels of seniority, to find their way around school.
A critical problem plaguing the NUS population is the difficulty in locating and accessing facilities on-campus. We have identified specific key factors causing this problem, namely: imperfect information arising from insufficient signage, the complicated NUS architecture, and the seemingly haphazard placement of various classrooms within NUS buildings.
Target Users
NUS Students
They represent our primary target users as they compose of a big proportion of campus users.
NUS Staff
Staffs including professors and administrative workers form our secondary group of users.
NUS Visitors
NUS often sees many visitors for both recreation and academic matters and thus form a relevant part of our target audience.
Current Situation
Navigation using signboards
Many campus users rely on existing signboards hanging from the ceiling along sheltered walkways to find their way.
Asking for directions
from others
Visitors or users who are new to the campus may resort to asking for directions to a classroom or lecture theatre.
Navigation by experience
More experienced users such as senior students or staff will rely on experience or memory to get around the university.
User Research
Contextual Inquiry
In our contextual inquiry we chose to adopt the Apprentice/Master model. We met our participants at a predetermined location and from there, asked them to guide us towards points of interest, while thinking aloud.
We found that bringing our participants directly into the context brought out the best in our chosen model because they pointed out many intricacies in their decision making which were done on the fly, and not easily regurgitated in another setting.
We made sure to speak throughout and we noticed how their past experiences in navigating around the campus shaped their current approach to it as well. We also took note of the number of times they tried taking notice of signage along the way to guide them.
Affinity Diagram
Key Insights
Architectural Complexity
Many have mentioned that the campus in inherently difficult to navigate due to complex arrangement of buildings.
Personal Preference
Most users familiar with the campus environment have stated that they have a personal preference for lesser-known shortcuts to get around.
Precise Navigation
Another common issue faced by campus users is the complete lack of directions to specific destinations like a discussion or seminar room.
Signage Inefficiency
There is a general consensus on how ineffective signboards are due to the time and effort required to find one, interpret before being able to navigate to their destination.
Persona
Secondary
Persona
Primary
Persona
User Requirements
Current
Experience
Map
Requirements
INDOOR NAVIGATION
WHY THE NEED?
-
Navigating within building not supported by traditional systems
-
Buildings connected → a lot of shortcuts but hard to find
-
Need for an indoor navigation system which is:
-
Easy to use
-
Can detect the accurate location of a user quickly and with confidence
-
Can suggest an optimal route within a short amount of time and guide the user there unambiguously.
-
USER GENERATED CONTENT
WHY THE NEED?
-
Students depend on peers to get shortcuts as they are hard to find
WHAT FEATURES?
-
Knowledge-sharing
-
Geotags could be added when events happen
-
Reviewing system where users can review all locations
SMART ROUTING WITH PREFERENCES
WHY THE NEED?
-
Most user have personal preferences while navigating
-
One interviewee does not like using stairs
-
-
It is necessary to consider users preference in app
-
User selects preferences
-
System generate the most suitable route
-
Conceptual Design
In coming out with a conceptual model we had to made the following considerations:
• Functionality: what will the user do? what will the system do?
• Structure: how are the functions related to each other? how does the user move through the system?
• Information: what data is required for each task? Where does this data come from and how is it displayed?
Functions
Based on our requirements (mentioned in the section above), we decided on the main functions that the app will have.
Navigation
Auto-detection of users locations. Allows user to choose route preferences and system generates route accordingly
View Facilities
List of facilities can be viewed and sorted into categories. Details/ reviews can be viewed and shared
View & Share Events
List of events can be viewed and sorted into categories. Events can be shared using geo-tagging functions
Contribute
Users can share both reviews on places / recommendations or can share shortcuts between places on campus
User Key Tasks
The team came up with 3 key tasks that users were likely to perform using our proposed platform. These tasks were identified to be paramount for our target users’ experience in navigating their way around the campus. We used storyboards to further conceptualize what the user experience will be like, and how it can be improved.
Functionality
Structure
TASK ONE
Navigate to specific location on campus based on user preferences
The app will make use of existing GPS frameworks and API to provide positional and navigational data for our users on NUS campus. The app will provide tailored routes based on user preferences such as one’s preference for air-conditioned routes, sheltered walkways or the general avoidance of stairs. The provision of the optimal routes is enabled with the use of artificial intelligence and data sharing by other users.
TASK TWO
Sharing of information about events that are taking place
This app will allow/encourage active user contribution through users sharing information about events taking place in real time or in the future, and geotag them such that other users can also be updated on what is happening, and know how to go to the specified location from the app.
TASK THREE
Sharing of shortcuts from points A to B in school by the users themselves
While novice users are in need for handy shortcuts, senior students of NUS are happy to share the shortcuts they had discovered earlier. However, often, in their social group they’re the only ones who benefit from the shortcut. The app allows sharing a shortcut using our tracking feature which enables people to only walk a specific shortcut to share it with others. Also junior students who have just discovered a shortcut by chance can contribute without remembering all the details by heart.
Prototyping
Paper Prototypes
Our initial stages of prototyping were done on paper. We created low fidelity prototypes with the basic necessary functions. This enabled us to generate different ways to implement our concepts before iterating on the best ones.
Phase One
Evaluation & Key Insights
To decide the best ways to implement each function we performed our first round of user testing using our paper prototypes. We asked participants to try perform the key tasks on our prototypes and give feedback on the usability and design of our interface. We also observed the ease at which they were able to complete each task, whether it was difficult to figure out how our system features worked. We gained 2 main key insights from this preliminary user testing:
-
recommend the use AR (even though novel) because it alleviates the various pain points such as inability to read the map, causing confusion / wrong turns
-
the remaining portions of app should resemble existing navigation platforms to reduce learning curve & mitigate app fatigue
Information
Architecture
Upon Evaluation of our paper prototypes, we were also able to figure out the back-end structure of our prototype, and hence the interaction flow. The information architecture diagram demonstrates the basic infrastructure, features and hierachy of NUSMaps.
Phase Two
Wireframe
In the next phase of prototyping we moved on to create a digital prototype. So for the process of wire-framing, we focused solely on developing a MVP for an AR navigation interface + familiar UX for other flows in the app
User Testing
In the next phase of prototyping we moved on to create a digital prototype. So for the process of wire-framing, we focused solely on developing a MVP for an AR navigation interface + familiar UX for other flows in the app
We got the participants to carry out the 3 key tasks mentioned earlier, providing them with specific locations / inputs for the sake of the testing. We conducted think-aloud user testing, getting them to verbalize their whole thought process while carrying out tasks as a way of revealing what they are thinking and planning. This helped us to get a better understanding of how users perceive the different features of our User Interface (UI) and helped us identify any potential design problems.
.png)
We used 2 methods of testing. The first being Wizard of of Oz testing - a process where the user interacts with the software as though interacting with the product when in fact, however, a human operator simulates the software’s response to the user. We did this by using the participants camera to mimic the Augmented Reality feature of our navigation process, and using physical arrows to mimic directions.
We also used remote testing via our digital prototype to test the general flow and usability of our prototype.
Phase Three
Key Findings
DESIGN PROBLEMS
Navigation Process
-
Some aspects not consistent with common navigation app conventions, might be confusing for user as this is not what they expect
-
Doesn't provide an escape route - unable to exit, has to go through extended process to “End”
-
Doesn’t allow for error prevention
-
Doesn’t allow users (especially more experienced users) to tailor frequent actions
IMPROVEMENT
-
We added intermediate screens to include more user prompts. This mimics other common navigation platforms, and gives more user control where they can decide whether to proceed or exit.
-
We have also included popups as warnings or instructions, for error prevention.
-
We have included a bird eye view of the final route & destination for user verification.
-
Allow users to save frequently visited locations, such as their faculty or hostel, or to set default preferences for navigation routes
Interface Design
Inspiration Board
In our final iteration of the prototyping process, we put more focus into the aesthetics and design of our user interface. To guide our brainstorming for colour schemes and general app layout we made an inspiration board. From this we drew design inspiration from current navigation apps, especially ones who incorporated the use of AR. And below we have snapshots of our final UI design.
User Interface
