Maps UI redesign and redevelopment

The university online maps system had existed for many years, but wasn't on brand and was slow. It also lacked some useful integration with room availability data.

Objectives

1. Get maps frontend on brand.
2. Speed up rendering and search.
3. Add new functionality to highlight different zones on the campus.
4. Add new functionality to label campus study spaces.
5. Add new functionality to show better room resources and equipment.
6. Add new functionality to show better room availability.
7. Add new functionality to show how many PCs were available to use in PC rooms.

Actions

Get maps frontend on brand.

There were a number of issues to sort out with colours, shapes, designs and fonts. These were relatively simple - but important - to sort out. In particular some thought was given to the navigation bar. In the end it was decided to keep the more familiar global nav bar.

Speed up rendering and search.

Existing javascript code wasn't efficient, particularly the way json data was accessed and processed. I rebuilt the underlying javascript from scratch in an Alpinejs micro-app.

Add new functionality to highlight different zones on the campus.

A completely new feature for the university was to add coloured zones to the campus map, in line with other offline maps and guides.

I added provision for highlighting different areas of the map, as well as a small widget to view and choose the different zones.

Add new functionality to label campus study spaces.

A request from the business owner was to add in markers and extra data for special study spaces on campus.

This was a multi-layered request, requiring adding new fields to the Laravel Nova backend, and a new system of showing and highlighting campus lounges and study spaces with new markers. It proved to be one of the more challenging areas in terms of both code and UX design, because I had to make the marker display and selection simple, subtle, and yet clear.

Add new functionality to show better room resources and equipment.

Rooms often have listings of resources, and study spaces and lounges have extra resources such printers, microwaves, fridges etc.

Again, this meant adding new data fields in Laravel Nova, making those available in the API, and then the UX/UI task of making these fields clearly noticeable.

Add new functionality to show better room availability.

The university has room availability data and an API, but this was never used by the maps system before.

A challenge here was to pull in availability data in a timely way, and display it clearly.

Add new functionality to show how many PCs were available to use in PC rooms.

Another requirement to show existing PC availability data. The challenge here was that the data didn't map nicely to existing room codes in the maps system. So I had to add new mapping fields to the maps backend.

Lessons learned

There were many features to this project. As ever, some challenges that seem hard are easily overcome, and some which at first seem trivial can have much more complex solutions.

Overall the project ran on time, and regular meetings with the product owner meant that we could often reach compromises or better solutions to save time and money.

It was an extremely satisfying project, because it involved backend Laravel work, frontend javascript work, CSS, Figma prototyping, and UX.