Pattern Library

The Challenge

With the redesign of the University's site this gave me an opportunity to document the work and create a single source of truth.

The University faced the challenge of creating a cohesive and consistent digital experience across multiple platforms. They needed a visual brand that would translate seamlessly into all digital touchpoints, including their website and third-party systems. My task was to design a solution that would establish a standardized pattern library to unify the University’s online presence.

Solution

I developed a comprehensive pattern library that acted as both the foundation for the redesign of the University’s website and a brand guide for third-party systems. This pattern library would serve as a central resource for future digital channels, ensuring consistency in design and brand presentation across the entire digital ecosystem.

My Role

As the sole UI Designer for this project, I was responsible for the entire design framework, from redesigning the Bootstrap theme to developing on-brand UI components. I worked closely with an external agency for the build and implementation of the website, as the University did not have an in-house front-end developer.

Process

Research & Analysis

• Conducted user research to understand the needs and preferences of key stakeholders.
• Analyzed the existing design system to identify areas for improvement and gaps in user experience.

Design & Prototyping

• Created wireframes and interactive prototypes using Axure to visualize the new design concepts.
• Designed UI components, including icons and buttons, using Illustrator to ensure consistency with the University’s brand guidelines.
• Developed HTML/SCSS prototypes to demonstrate functionality and behavior.

Collaboration & Implementation

• Partnered with an external agency to implement the design system on the website.
• Delivered detailed design specifications and assets to the development team.
• Facilitated regular design reviews and feedback sessions to ensure accuracy and alignment with the vision.

Testing & Iteration

• Conducted usability testing to gather user feedback.
• Iterated on the design based on feedback, ensuring accessibility and user-friendliness at each stage.

Tools & Technologies

• Axure: Wireframes and prototypes
• Illustrator: Icon and UI component design
• HTML/SCSS: Front-end development and prototyping
• NPM: Package management
• Pen & Paper: Initial sketches and brainstorming
• Requirements Elicitation: Gathering and analyzing project requirements

Results

• Successfully delivered a comprehensive pattern library that standardized the University’s digital design language.
• Enhanced the user experience and ensured consistent branding across all digital platforms.
• Fostered better collaboration between the University and external agencies, enabling a seamless build and implementation process.

Key Takeaways

• Research and feedback are critical to creating designs that truly meet user needs.
• Collaboration with external partners can greatly enhance the quality and efficiency of the project.
• Continuous iteration and testing are vital to achieving accessible and user-centered designs.

Inspiration

A key inspiration for this project was the BBC GEL (Global Experience Language), a publicly available repository of tried-and-tested design patterns. The BBC’s commitment to a standardized design system within the public sector resonated with me, particularly as the University shared similar goals in digital consistency. Coupled with the use of Bootstrap, the Westminster GEL site became a key reference in the development of the University’s new design system.

References

NOTE: This work has evolved and the original site I built has changed. Yet the foundation is still the same

• Westminster Web Guidelines: Grids
• Westminster Web Guidelines: Base Components - Buttons
• BBC GEL - Global Experience Language