Web design style guide

A key element of AMBS’s digital evolution, this web design style guide gives our client the ability to extend their digital presence in a highly creative yet structured way.

Background

One of the oldest business schools in the UK, Alliance Manchester Business School (AMBS), part of The University of Manchester, provides education to undergraduates, postgraduates and executives who flock to the School from all over the world. AMBS relies on its website as a powerful marketing tool to attract the most ambitious candidates, and so it’s important to be able to update it quickly, easily, and consistently, providing a great user experience for maximum engagement.

Challenge

As part of the rebrand we were working on, we were also asked to refresh their website design, and to provide a web design style guide to ensure future updates by the AMBS team were consistent visually (typography, colours, graphical elements) and technically (formatting, navigation hierarchy). The project would also have to meet AAA accessibility standards, a requirement for educational organisations.

Solution

We provided a block-based solution, allowing a phased approach to the design and also roll-out of the new blocks across the live site:

1. We first focused on core styling for smaller elements of the website, concentrating on colourways, typography, grid system, spacing rules, button and icon styles.

2. We then focused our attention on other integral parts of the website, one being navigation following UX testing to establish the categorisation of menus and guarantee an intuitive user journey.

^{Global navigation (appears on every page) – Desktop and mobile}

^{Parker’s web development team developed content blocks separately. Below, examples of blocks developed for the secondary navigation system, for additional menu options. A secondary tier is common in more complex websites.}

^{Internal search functionality elevates the user journey with a deeper level of customisation.}

We developed a microsite for the AMBS team to use as a template library, where HTML code we had written for each element could be easily copied and integrated into their own CMS (Content Management System).

The web design style guide has proven to be a great platform, acting as a central hub to allow AMBS to move on to the next stage in their digital evolution, such as the launch of their digital magazine.