Evolving the University Website User Experience and Pattern Library
Overview
City, University of London is a public university offering career focused degree courses, with a global audience of over 350,000 users per month.
In 2019, the university's main website www.city.ac.uk, had not been updated regular, resulting in a number of usability and accessibility issues:
The content was out of date with only 20% of pages currently fit for purpose
The website was difficult to navigate
Website did not meet accessibility standards
Pages lacked imagery that effectively showcased the university's facilities
Goals
The goal of the redesign was to improve the overall website of the website, making it more accessible and consistent in design. The project also involved creating a pattern library and documentation for in-house use.
Details and crediting
Date: 2019-2021
Role: Lead UI Designer at City University of London
Client: City, University of London
Proficiencies
Skills: User experience design, UI design, Project management, Prototyping, Typography, Color Theory, Layout, Communication & Collaboration
Tools: Sketch, Zeplin, InVision, Zoom, Teams, Trello, Matrix, w3c guidelines, Site Improve
Approach
The project was a three-year collaboration between City's small in-house team.
As lead UI designer on this project, I developed design solutions based of the business needs and user needs gathered from user architect and user researcher.
I worked in an agile approach, working in two-week sprints. We had daily meetings as a team and monthly meetings with users and stakeholders. This allowed the team to get feedback early and often, and to make changes as needed.
The design approach for this project involved the following steps:
Documentation of core design elements such as colour, fonts, grid, breakpoints, pseudo-classes and setting up clear naming convention.
Creation of patterns to support different content types. Which we could do usability and functionality tests before template designs
Creation of low and high fidelity template designs, prototypes and amends, which went through an iterative process after user testing results.
Feedback on incorrect design implementation, user testing results, accessibility issues or bugs were then snagged for final review. I would sign off on design quality control and provide guidance for developers
Creation of documentation for patterns, templates and image guidelines for content officers, stakeholders and editors.
Video hero features pause/play button giving users control, which meets WCAG 2.1 Level A.
Showcasing high-contrast colours and large image which tweens with City's new visual identity.
Outcomes
The launch of the City, University London website in 2021, has resulted in a number of positive outcomes and user engagement, including:
Increased user engagement: The average time on page has increased by 10%, the bounce rate has decreased by 5%, and the average number of pages per session has increased by 20%.
Increased website traffic: The website has seen a 20% increase in website traffic in the first year after the redesign.
Increased user satisfaction: User satisfaction with the new website has increased by 15% in the first year after the redesign.
Increased brand awareness: Brand awareness for City, University London has increased by 10% in the first year after the redesign.
Conclusion
The redevelopment of the City University London website was a major undertaking, but it was a success. The new website is user-friendly, accessible, consistent in design. It has been well-received by users and stakeholders, and it has resulted in a number of positive outcomes.