Research, Logo & Branding, Wireframe & Prototyping, Interface Design
Adobe After Effects
Title: NJIT NAV
Platform: AR Application for Android device
Target: students, faculty, and visitors to NJIT campus
Easily navigate inside buildings using NJIT NAV! Scan a marker to display AR signage, quickly access building hours, or stay informed about campus events.
NJIT Nav is an augmented reality (AR) application that displays digital signage. The application aims to improve campus wayfinding through the implementation of AR allowing the user to utilize their smartphone to find facilities such as rooms, vending machines, bathrooms, stairs, and elevators. In addition, the application will provide the hours of operation for a variety of buildings on campus. The user can also find information about social and academic events taking place in select buildings that week. Our mascot, Stuart, will accompany and aid the user through the app. Various images of Stuart will be placed within NJIT facilities to serve as AR markers that users will be able to scan in order to enable the application’s functions. In the case that buildings are connected to each other, such as Tiernan Hall and Faculty Memorial hall, a separate avatar, Cautionary Cone, will alert the users prior to entering a connected building.
Research, Ideation, Branding, Prototyping
Improve indoor wayfinding in NJIT campus buildings through augmented reality
Inform users of campus events and operational hours for buildings
Provide an interactive wayfinding experience
Heading: Montserrat Medium
Body Copy: Montserrat Regular
Getting to the destination
Learn about campus events
Checking building hours
Locate specific amenities within the building
User Experience/Interaction Design
User Feedback Session
Students in our digital design studio were asked to list amenities or resources that they thought would be useful for NJIT. Categories included Campus Events, Safety, Dining, Information, Accessibility, and Dorms. Based on the data collected during the feedback session we were able to gather ideas regarding potential features for our application. In addition, we were able to narrow down campus buildings that were difficult to navigate. Students felt that Tiernan, Eberhardt, GITC, and Campbell Hall were difficult to navigate internally as they lacked effective signage.
After the user feedback session, we created a survey that would be distributed to a broader set of students through Google Surveys. These six questions would help us gain a better understanding of the struggles students faced with indoor wayfinding, as well as give us more insight regarding the additional features that would be implemented in our application.
User Research: Tiernan Hall
Based on prior user feedback, students had trouble navigating Tiernan Hall, as there was a lack of effective signage. We conducted a walk through to analyze the existing signage. We wanted to know where the current signage was placed, how it was placed, the size of the size, and composition of the sign.
Many of the signs in Tiernan were stuck on the wall, a select number of signs were placed perpendicularly. However, the signs that were placed perpendicularly were too small and were too dark to draw attention. The signs that were stuck on the wall were mostly white paper with bolded text and arrows. Although these signs did draw a little more attention, they too were too small to view from a distance. Some signs were even handwritten, revealing the confusion that people must have faced when navigating through the building.
User Scenario Storyboard
A student is at the NJIT campus and is lost. He cannot find his classroom, as there is poor signage inside the building he is trying to navigate. The student knows about NJIT NAV, an indoor wayfinding application. He sees there is a scannable AR marker of Stuart on the wall and decides to utilize the app to help him get to his destination. The student takes out his phone, opens the NJIT NAV app, and clicks on AR NAV. The application uses the phone camera, so the student can scan the marker. He looks around at his surroundings and can see AR signage for various facilities inside the building. He follows the signage for rooms to navigate to his classroom. Lastly, the student arrives at his classroom.
User Journey Map
Systematic Breakdown of Components
Software Development Kit:
NJIT NAV logo animation, used at the startup of the application
Loading screen animation of Stuart
Building rotating on a platform in ‘Choose Building’ menu
The UI is simplistic, vector illustration heavy, and utilizes rounded elements. Main home screen utilizes a scroll wheel with buttons and vector illustrations. Sub screens utilize scrolling, swiping, progressive disclosure menus, and buttons. Toon shader was applied to 3D models to create a consistent look.
Paper prototyping was utilized to finalize UI screens. User testers were able to gain a feel for the scroll wheel and buttons, as well as understand the functionality of the app.
Home, events, building hours, and AR Nav icon iterations focused on being recognizable, so users can identify these buttons easily.
High Fidelity UI Mockups
Implementation of Augmented Reality (AR)
The NJIT NAV AR tracker is Stuart, who is the mascot for our app. He is placed on the wall by the elevators inside the buildings. After selecting the AR Nav button on the home screen, users must scan the tracker to start AR capabilities. Then they will be able to navigate to their destination.
When navigating through the building user will see digital signage, which will guide them to their destination. The signs are placed perpendicularly, so they are easily visible from a distance.
Stuart is a friendly mascot that accompanies the user through the application. He is implemented in forms of 2D and 3D, serving both as a scannable AR tracker that initiates indoor AR navigation and as a guide within the application. Stuart is a robot with Scottish roots inspired by NJIT’s Highlander mascot.
Cautionary Cone is an avatar that alerts users prior to entering a connected building when utilizing AR navigation. The avatar is an orange safety cone featuring large eyes, wiggly arms, and a friendly demeanor.