NinerNav

UNCC Course Project

NinerNav is a conceptual mobile app that would allow students to traverse their college campus using specific buildings from their college campus and allow them to input their schedule and automatically plan routes for them.

What follows is a breakdown of how my team designed a prototype of this special navigation app.

OVERVIEW

Introduction

New and returning students alike have trouble navigating to their classes the first couple of times. Currently, their only real choices for non-driving directions are Apple Maps and Google Maps. Apple Maps lacks accurate walking directions to specific campus buildings and Google Maps has the buildings cataloged but lacks diverse transportation types for campus walking paths. 

Project Goals

NinerNav aims to provide students with directions catered to their favorite method of traversing campus: walking, biking, or skating. This newest navigation app also provides an easy-to-access catalog of the user’s specific campus (UNC Charlotte in this case) to make finding where they need to go even easier.

My Role

I was the de-facto leader as the one most passionate about making the project into something that I could be proud of. Another contributing factor was that I had prior experience with UX design and prototyping which allowed me to guide the others who were new to the field.

Our design process for the project is shown below:

RESEARCH

Preliminary Survey & Needfinding

A preliminary survey was conducted on 23 UNC Charlotte students using Google Forms. Results of the survey revealed that students new to Charlotte would use Google Maps to get around campus. They reported that after a while, they would learn shortcuts but it took a lot of experimentation, and some students still used only the most obvious paths to get around campus. Additionally, Google Maps only uses these routes to get between classes and doesn’t factor in transport methods for travel that don’t use roads. This app aims to lead students in the right direction by taking their class schedules and organizing their routes in order to give them the quickest time based on their preferred transport method.

IDEATION

Design Goals

For this project, we prioritized three critical design goals when developing our prototype:

1. Allow students to map their routes between specific classes.
2. Allow users to most efficiently plan their day based on their schedule and transportation method.
3. Allow users to customize their transportation speed measurement.

User Flow

After understanding the user’s needs and formulating goals for the app design, I created a user flow with Figma to visualize the common paths a user might take through our app:

Paper Prototype

Once we had figured out the average user’s thought process and agreed on a path forward as a team, we divided the work and sketched up a few low-fidelity prototypes on paper. The goal of this step was to understand the layout and structure of the app before moving to Adobe XD for the high-fidelity prototype.

A few of these pages are shown below:

PROTOTYPE

UI Design

Before we began to develop the app in Adobe XD, we discussed a theme that we were confident would work well for our application.

For the typography, we chose SF Pro Display because it is the system font for iOS and we designed NinerNav for iPhone. In the design, we used different weights and sizes to distinguish hierarchy.

Colors adapted from the university’s official colors help associate the app with the campus it is designed for (UNC Charlotte). Shades of yellow and green were altered to allow proper contrast between elements such as the app’s background and its text and icons.

The specific colors are shown below:

High-Fidelity Prototype

The overall concept of our design is very similar to most navigation apps that are used every day around the entire world. We drew inspiration from apps that would be familiar to new users of NinerNav, including Google Maps, Apple Maps, and Waze. As per course instructions, we used primarily Adobe XD to design the hi-fi prototype of our application. 

Navigation: When the user first loads the app, they are greeted with a landing page of sorts that includes recent buildings they have navigated to with NinerNav in the past. From there, they can choose a location to navigate to or search for a new place to visit.

Class Schedule: Another design goal was allowing the student to integrate their class schedule. This would allow them to more efficiently navigate campus instead of using the search-and-go system present in navigation apps tailored to the widest user base possible (e.g. Google Maps). We did this by providing the user with a prominent class schedule menu within the app. With the tap of a finger, the user can see their list of classes including time, location, and instructor as well as create or delete classes at will.

Campus Buildings: Aside from the navigation and schedule features designed to be used most often by the user, we sought to improve their experience by allowing them to search for buildings on their campus using the Campus Buildings page. The list of campus buildings is organized alphabetically and by building type (Academic, Administrative, Student Life, etc.) which allows for intuitive parsing of the list to find specific buildings.

When they find the building they are looking for, users can elect to navigate to their desired building via the arrow buttons or view a detailed summary of a specific building via the “info” button. Each building’s description includes an address and a description from the school’s website.

User Profile: We also gave the user the option to view their profile including a catalog of their recent destinations (similar to the primary navigation page) as well as preferences. The profile can be reached by tapping their profile picture in the app header.

TESTING

Usability Study

With the prototype finished, we wanted to gauge how long it took different users to navigate through the prototype of NinerNav with minimum assistance from the development team. We tested the prototype on 6 UNC Charlotte students to determine usability.

In order to determine how easy it was for new users to understand how to navigate the app, we asked the participants to complete a predetermined set of four tasks:

1. Find the profile screen and edit the information fields.
2. Add a class to the Schedule view.
3. Change the default method of transportation to "skate".
4. Plot a route between Belk and Fretwell.

Participant Feedback

During and after testing, we collected feedback in the form of during- and post-task interview questions. Results can be seen below:

• All participants would recommend our app over existing apps for campus navigation.
• Many participants expressed that they found some icons unclear:
• The navigation buttons in the Campus Buildings list weren’t clearly for navigation.
• The menu bar button used to navigate to the Schedule page was confusing and should be changed to a calendar or clock icon.
• All participants indicated that they would use our app almost daily if released.
• Most participants expressed that they very much liked that they could input their classes and let the app plan routes around campus automatically.
• Some participants expressed confusion at learning the app but were confident they could use it after only limited experimentation.

CONCLUSION

Future Improvements

All of the participant feedback made apparent some elements of the prototype that had slipped through the cracks during my review. However once pointed out, I agreed with all of them.

If I had the opportunity to revisit NinerNav and make some changes in the interest of usability, I would do the following:

1. Change the menu icon representing the Schedule page to a calendar icon.
2. Change the navigation icons on the Campus Buildings page to a curved arrow icon.
3. Add a brief onboarding tutorial for new users which led them through the primary functions of the application.
4. Add back buttons to the building details pages.
5. Improve the profile page to make it more apparent that the text fields are editable

Challenges and Lessons

An expected challenge I encountered was that we were trying too hard to make NinerNav look like existing navigation apps. There were times when we used screenshots of other apps as guides but scrapped them because we realized that we wanted our app to look unique while keeping the inspiration of those apps.

One thing I would have done differently was to design the app completely on my own without using other apps as inspiration. If I still weren’t satisfied after I had done my best, I would have then gone and taken a look to see how a feature was implemented in another app.

Thank you for reading my case study for NinerNav!

If you'd like to work together, contact me through my About page!