✺ App ✺ UX/UI Design ✺ C# Coding ✺
Nav - Helping Visitors Navigate Complex Campus
My Role
UX Designer, App Developer
Timeline
7 Weeks
Tools Used
FIgma, Unity, Blender, Miro, MagicPlan
Team
Lorraine - UX/UI Designer
Debbie - UX/UI Designer
Yujie - App Developer
Sarah - Product Manager
Project Overview
A hack lab project
Nav is an indoor navigation app that my team and I developed as part of our university's Hack Lab coursework. It was designed specifically for The University of Westminster's Harrow Campus to help students, faculty members and visitors to navigate the campus.
Our Team
UX Designer
The dream team
7 Weeks
Debbie - UI/UX Designer
Lorraine - UI/UX Designer
Yujie - App Developer
The Idea
How we came up with the idea
During the course briefing, we were assigned to create an original interactive artifact that utilizes creative technology to address a real-world problem. We were given four topics to choose from and brainstormed together on Miro to come up with project ideas.
Debbie suggested creating an indoor navigation app, which was a brilliant idea. Then, I had an ‘Aha!’💡 moment and suggested that we create it for our own campus. After all, we still have trouble navigating the campus to this day.
My Contribution
One project, two hats
In this project, I had the opportunity to serve as both the app developer and UX designer. As the app developer, I translated the conceptual design into a highly functional app prototype using Unity and C# scripts. Simultaneously, I took on the role of being one of the UX designers, ensuring that the user experience flowed smoothly.
The Problem
Time lost, paths confused
Navigating the Harrow Campus of the University of Westminster can be quite difficult for students, especially those who have just started studying there within the past year. Many of our classmates have expressed this concern. The lack of a reliable indoor navigation solution often makes it challenging for us to find specific classrooms or important facilities, hindering our ability to navigate the campus effectively and be on time for important events.
Goal
A reliable app for navigating UoW’s Harrow Campus
Our goal for this project is to create an app that helps students, faculty members and visitors to navigate the Harrow Campus of the University of Westminster. We aim to provide a reliable indoor navigation solution that makes it easy for users to find specific classrooms and important facilities.
User Research
Identifying our target users
Our target users include new students who are just starting to explore the campus, current students who need help navigating their way to lecture classes, and infrequent visitors who may not be familiar with the campus layout.
Understanding Our Users
To better understand our user’s frustration when it comes to navigating the campus, we conducted a small user interviews with 5 individuals. Here are the insights and key takeaways from the interviews:
Difficulty in Finding Specific Locations: All five students expressed their struggle in locating specific classrooms and facilities on the campus. This often resulted in being late to class and added stress, especially when they were new to the campus or had classes in unfamiliar areas.
Lack of Clear Signage: Some of the participants highlighted the lack of clear signage within the campus, making it challenging to navigate.
Desire for an indoor navigation app: All participants agreed that an indoor navigation app for the campus would be useful. They expressed that such an app should have clear visual cues, easy-to-understand directions, and a seamless interface to be effective in helping them navigate indoor spaces.
Empathy Mapping
(Click to enlarge)
User Stories Reflecting the Importance of Nav App
“As a new student, I want to easily navigate the Harrow Campus, so that I can find my way to different buildings and facilities without getting lost, ensuring a smooth transition into university life.”
“As a current student, I want a reliable navigation tool that can guide me to my lecture classes, especially when there are room changes or unfamiliar locations, so that I can attend my classes on time and avoid any unnecessary stress.”
“As a visitor of the Harrow Campus, I want a navigation tool that can guide me to the location of my meeting/event, so that I can efficiently reach the venue and make the most of my time on campus.”
The Design
Designing the product
We carefully map out the user flow of the Nav app to create a fluid and user-friendly navigation experience. Below is the flow for the main function of the app.
We then proceeded to sketch out several design concepts for the app, exploring different visual representations and layouts, before moving on to the wireframing stage. Below is an example of one of the initial sketches we created to visualise the potential arrangement of the app.
The layout designs are then refined in the wireframing stage. Building upon the initial sketch, we meticulously fine-tuned and iterate on the designs to ensure they accurately represent our desired user experience for the Nav app.
Once we have agreed on the wireframes, Debbie took the lead in creating the UI design for the app using Figma. She brought the wireframes to life by carefully selecting colours, typography, and visual elements that enhanced the user experience we have outlined earlier in the process.
Setback during the design process
✏️
Due to time constraints, we had to prioritise the essential functions of the app and were unable to design for all the features we have created.
App Development
Developing the product
As the brief required us to make this product interactive and functional, we decided to use Unity as the core tool of building this app. We begin by scanning all the areas of the campus using the magicplan app which allows us to convert the floor plan into a 3D object.
After loading the 3D object into Unity, I started developing the app with XROrigin in the core scene. Building the interfaces was easy, as I only had to add the exported assets from Figma. To create functionality for the buttons and navigation, I used C# scripts that I got from various tutorials.
Setback during the development process
During the later stages of development, I encountered difficulties in implementing the distance tracking feature for the destination. Despite our best efforts, we were unable to find a suitable solution that seamlessly integrated with the app's user interface. We then made the decision to remove this feature from the development and UI due to time limitation.
💻
Final Submission
Timely submission and distinction earned
We managed to submit the project on time and received a distinction for our work. Below is a snippet of the feedback we received from our lecturer:
“The work shows a novel solution through digital output. The project shows innovative use of technology to address the problem of indoor navigation in complex buildings, focussing on newcomer students at Harrow campus of the University of Westminster (UoW). The use of Augmented Reality (AR) technology shows a creative solution and aligns well with the project's objectives and the target audience.”
Reflection
What we would do better next time
Reflecting on our experience with developing the Nav app, we have identified several areas where we can make improvements in future projects. These opportunities for growth will help us enhance our development process and deliver even better results. Here are some key areas we can focus on to improve:
Thorough Planning and Time Management: Next time, we can allocate more time for planning and ensure a realistic timeline for each stage of the project. This will allow us to better manage time constraints and address unforeseen challenges more effectively.
User Testing and Feedback Incorporation: In future projects, we can prioritise conducting extensive user testing sessions and actively incorporating user feedback throughout the development process. This will provide valuable insights and enable us to iterate on features and design choices based on real user experiences.
