NJIT NAV

Duration

1 month

My Role

Research, Logo & Branding, Wireframe & Prototyping, Interface Design

Tools

Unity

Adobe Illustrator

Adobe After Effects

Adobe Photoshop

des.jpg

Design Overview

Title: NJIT NAV

 

Platform: AR Application for Android device

 

Genre: Wayfinding

 

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.

Project Summary

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.

My Role

Research, Ideation, Branding, Prototyping

Design Objectives

  • 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

Brand Guidelines

brand colors.png

Colors

Typography

Heading: Montserrat Medium

Body Copy: Montserrat Regular

Logo

logo.png
logo1.png
logo3.png

User Objectives

  • 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.

userfeedback.PNG

User Research

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.

data.PNG
data2.png
data3.png
data4.png
data5.png
data6.png

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.

tier1.png
tier2.png
tier4.png

User Personas

userpersona1.png
userpersona2.png

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.

interactionstoryboard.png

User Flow

userflow.png

User Journey Map

userjourney1.png

Systematic Breakdown of Components

Software:

  • Unity

Software Development Kit:

  •  Vuforia

User Interface:

  • Adobe Illustrator

  • After Effects

Assets:

  • Autodesk Maya

  • Cinema 4D

  • Photoshop

Asset Breakdown

Animations:

  • 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

2D Assets:

  • Stuart

  • On-boarding walk-through

3D Assets:

  • Stuart

  • Building

  • Platform

Artistic Style

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.

UI Sketches

Home Screen Sketch
Home Screen Sketch

press to zoom
Home Screen Sketch
Home Screen Sketch

press to zoom
Events Screen Sketch
Events Screen Sketch

press to zoom
Home Screen Sketch
Home Screen Sketch

press to zoom
1/6

Paper Prototyping

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.

paperprototyping2.PNG
paperprototyping.PNG

Icon Iterations

Home, events, building hours, and AR Nav icon iterations focused on being recognizable, so users can identify these buttons easily.

iconiterations.png

High Fidelity UI Mockups 

Home Screen
Home Screen

press to zoom
Choose Building Screen
Choose Building Screen

press to zoom
Events Screen 3
Events Screen 3

press to zoom
Home Screen
Home Screen

press to zoom
1/5

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.

ar.png

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.

ar2.png
ar3.png

Character Lineup

Stuart

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.

stuartmascot.png

Cautionary Cone

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.

cautionarycone.png

High Fidelity Prototype Walk-through