Web App

University of Northampton

INTERACTIVE CAMPUS MAP

The University of Northampton (UON) is one of the youngest universities in the UK, but is one of the few universities to be ranked Gold in the Teaching Excellence Framework (TEF). They have won multiple awards for their work in the area of social impact, being the first university in the UK to be named as Changemaker Campus in 2012.

THE PROCESS

Challenge

I was given the task to do something that I have never done before. find a way to enhance customer engagement during open days, with a particular focus on emphasising the importance and unique value of UON’s new campus. This task required to convey the significance of the new facilities in a way that would resonate with potential students and their families. 

Solution

APPROACH

In order to keep calm and focus on the task, I started from something that could bring me back into my comfort zone: competitors’ benchmark. I delved into the world of universities campus maps. It felt like piecing together a puzzle. Navigating through each map, identifying the pain points and good features was not easy. Each map told its own story, some more clearly than others, but none of them were showing enough good examples of features and design. So I started looking into other kind of maps, such as museum maps, estate maps etc. This broader approach inspired ideas for crafting something different from what I saw across the sector.

RESEARCH

During the open days, we gathered feedback from attendees about their experience navigating the campus. It became clear that many visitors felt a bit lost , expressing and how a user-friendly guide could significantly enhance their visit. The consensus was that having an interactive map or a similar aid would not only make exploring the campus more enjoyable but also save time and reduce the stress of trying to figure out where to go. This feedback underscored the need for a practical solution to improve the visitor experience, making it easier for them to connect with the campus and its offerings.

DESIGN

After a bunch of sketching and brainstorming sessions, we concluded that the “must haves” for the app were: an easy way for the user to orienteering regardless which entrance they would enter and providing relevant information about the university buildings.

I dedicated significant attention to ensuring that every UI element on the campus map was not only visually appealing but also intuitive and self-explanatory. My goal was to create a design where users could easily understand the function of each component without needing to guess or search for instructions.

This involved refining icons, labels, and interactive elements to make them as clear and straightforward as possible. At the same time, I maintained a strong focus on consistency, aligning the map’s design closely with the broader visual identity of the public website. This consistency was crucial in creating a seamless user experience, where visitors could navigate between the website and the campus map without any jarring changes in style or usability. By harmonizing these elements, I aimed to build a cohesive digital environment that felt both professional and user-friendly, enhancing the overall experience for anyone using the map.

TESTING

We ran a usability pre-test session using the interactive mock-up. Results were encouraging, even though minor issues emerged related to the hovering effect on desktop and to the labelling of the buildings. Some lack of visual affordances created some friction amongst the testers, so I had to redesign these bits and retest them.

My Role

As Design Lead I have been responsible for the product full lifecycle, from design to delivery. I provided user experience design, user interface design and visual design in order to make the product meet the business and user needs. I opted for an iterative approach, working closely with the developers and some students. I spent some time to review the old app, figuring out why it was not efficient, making sure the new one was totally user-centred.

The Final Product

The final product features a sleek, flat design that incorporates UON’s brand colours, with UI elements that align perfectly with the university’s public website. Despite choesion and the engaging experience the map provides, there is still plenty of space for further improvement and implementation of new features such as a path finder functionality. 

campus map visualised on a mobile screen