University Alliance

Background

University Alliance work with universities to empower students with the skills they need to start their careers. UA needed a website redesign to go with their new brand. This also presented an opportunity to shift the website from the WordPress classic, to block editor.

Involvement

• Assisted in the full content audit of the website, to in-part, help inform decisions on what content can be served as block-editor pages, or remain as templates.
• Mockup key pages, design components referencing the new brand guidelines.
• Lead design workshop sessions with the product managers at University Alliance.
• Minimal involvement in build.

Language and feel

The new brand utilises a vibrant colour palette of illuminous pink and cyan, greens and blues against blocky, contrasting typography, irregular shapes and splodges. To give an accessible look and feel and not to give off a stuffy, pretentious or staid appearance.

Challenges

• Brand integration and styling The client was keen to use elements of the new brand as much as possible, there needed to be some push-backs to ensure the build could be completed within the timeframe, and for accessibility reasons. An example of this — as the palette features so many colours, ensuring colour combinations satisfy WCAG contrast guidelines.
• Creation of a mini design system A large part of this project was optimising the content on the key pages, in some cases down to about a third of what it was. This included simplifying design elements — reducing the type scale, enforcing formatting rules for visual consistency and dramatically reducing the amount of components available to content editors.
• Navigation The dropdown megamenu was a key part of the site redesign. This menu needed to accommodate a two-tier page hierachy — the parent pillar pages and child pages within each, excerpt text for each link, and in some cases, visual differentiation between child-page categories.

• Cards The nature of the website as a portal meant that the cards and CTA's could link to external resources and articles, aswell as internal. So a challenge was designing a card that indicated wether or not it was an external link.
• Context-aware styling A row added to a page could either use a white, light grey or dark blue background colour. The implications of this meant that cards and other components that rely on colour to distinguish the boundaries would need to respond accordingly.

Outcome

In comparison to the old site which was bloated with mixed up and stale content and liberal and inconsistent use of content formatting elements, the website we delivered was a massive improvement. Sufficiently integrating the new brand, aswell as the provision of an editing experience that strikes a balance between flexibility and imposing constraints to ensure consistency, accessibility and adherence to the brand guidelines. The website can be visited at unialliance.ac.uk