Bringing consistency to the university's digital portfolio
A more effective and efficient UX approach to reduce costs and increase the brand's coherence and uniformity.
- Digital Experience
The Global Experience Language (GEL) underpins the design of the University of Westminster’s many websites and platforms and defines its digital presence.
While branding has been around since people began buying and trading goods, the definition has evolved in the Digital Age. Prospective and existing students have wider access to information than ever before, and greater choice in product selection.
It’s a buyer’s market and decisions about what and where to study are based on visual, tonal and behavioural responses to what is seen, heard and shared. As such a digital brand is all-encompassing: it is shaped by content and design, and the interactions or engagements people have with it.
The first University of Westminster website was launched several years ago. With a huge amount of enthusiasm for the medium, the website grew organically and unsustainably. Like many other complex organisations, additional websites and platforms “mushroomed” out of the core site, allowing CMS users to create their own websites with very little control over quality, brand consistency, and one core strategy to govern the use of digital media and brand.
A more effective and efficient approach was needed, not just in terms of tying up the brand to make it more coherent, but also to help reduce the costs to the University in creating multiple microsites. Hundreds of sites using multiple Content Management Systems and creative approaches had to be brought under one roof. This is the reason for a shared visual language framework, which now allows users and content editors from all over the University’s services and their third parties to create consistent looking pages using standardised web components that are HTML production-ready.
As an agency, our approach was to create a global experience language (GEL) in order to drive uniformity and coherence across the diverse, cross-platform portfolio of Westminster’s services with a solid design style guide and pattern library that will bring consistency to the University’s digital output.
It started with a discovery phase with the University stakeholders. It encompassed interviews and workshops, scope development, IA development and testing. A comprehensive UX design and high fidelity wireframes were created to a set of IA principles, which were informed by the discovery research, design sessions and user testing using Treejack. The creative workshop defined the new framework approach, which joined up all the elements to bring some clarity to the website’s complexities.
“Our visual language for the University of Westminster is built as responsive from the ground up, using an evaluation of all the core creative elements used across all sites and platforms” says Nick Bromage, Director at Syndicut. “During the discovery phase of the project we have identified various key improvements and additions that can be made to the public website. Improvements also included changes to the IA structure of the site, identification of team structure and stakeholder engagement. The designs were user tested on a large number of people representing different audiences and has resulted in a number significant iterations”
We also asked ourselves how can we create a uniform design that would appeal to very different personas, all of whom have different needs and wants within a complex University setting. Some fundamentals questions had to be answered, such as how the site will be used? What experience should it provide? Who will benefit from it? What are the website’s and user pain points? And in general, do we have a story to tell that is specific enough to the persona needs?
It was clear that apart from consistency of user experience, the site will need to provide clear standards and a design framework that is HTML production ready. In addition, the GEL site is informed by observing users interacting with interfaces in real context. And it is shareable. The code, the designs are displayed in an open and modular way to ensure the University provides better services for the future in a neat microsite.
The site fulfills two main goals:
- It publishes and maintains the University’s brand guidelines. It is a “living” guideline which documents a pattern evolution. It means that the University’s users and third parties are always up to date.
- It enables the University’s development team to compile web pages quickly and easily by using the HTML production-ready components. Apart from components, the GEL site includes templates and sample pages for developers and designers to refer to.
The result is an online visual styleguide and is aimed at anyone creating online experiences. This is the start of what will become a comprehensive resource documenting the development of our design language, whilst simultaneously increasing the University’s creative efficiency and maintaining brand consistency.