MAGnet: The MAG Intranet Redesign

INTRODUCTION

Manchester Airports Group (MAG) is the UK’s largest and leading airport group. Having recently joined the company myself, it really is a fantastic place to work and has been described as being its own city as there are so many internal areas of the business, along with such a vast amount of employees in the MAG family.

My first project here was the Careers site however, one area of the company I was eager to improve was the Intranet we use here. As there is so much to learn and keep up to date with at MAG, I felt the intranet should be a very user friendly portal that holds everything you need to be an employee at MAG.

ROLE

Senior UX Designer

Sole designer on this project, starting with UX discovery, through to wireframes and finally into high fidelity prototypes.

Discover

The first thing I began to do with this project was understand what I had to work with in the current MAGnet. The original site had 2 navigation bars at the head of the website, and another in the footer which was just confusing and made it difficult to find what you were after.

I began sketching down the current nav, and from this was able to begin picturing how we work this into a mobile hamburger menu, along with a footer. One area I realised would be vital here was adding in a search function across the whole app to avoid the need to have every page in the navigation.

Lo-fi Designs

Once I began low-fidelity designs, I decided to use only 4 colours throughout the designs to help get an idea of placement of content, and primary CTAs – white for backgrounds, grey for images, light blue for secondary components and dark blue for titles and primary actions.

This is a little less detailed than lo-fi designs I’ve done in the past but I felt this helped speed the project along and took pressure off filling out detail in the design the project was not ready for at that time.

Prototyping the wireframe

As mentioned earlier, MAGnet is a large website and will have many different pages to it for different teams and individuals throughout the airports. This is why I have prototyped this hi-fi design (as I always do) so that it could be used as intended when still only a wireframe.

Giving developers and stakeholders the app in Figma to use as if it were real, really helped explain how I expect this to work and showed how the user experience can be improved upon.

Production Ready Hi-Fidelity Design

Finally, after completing the lo-fi and feeling the flow of the UX was logical, I progressed this to high-fidelity designs. Due to the sensitive company information that would be on the designs, I have only shown three screens so you can get a feel of what the portal turned out like.