Creating a Design Style Guide
UI Design | UX Design | Digital Strategy | Prototyping
Business: Liaison Group Ltd, Workforce Division
Deliverable: Design style guide, UI design, design components, design patterns, accessibility, usability, UI component usage guidelines
Objective
To create a design style guide for the Liaison Workforce product group. To develop a consistent style based on an existing UI house style that had evolved as products were produced and launched. To bring a uniform look and feel to multiple websites and a native app to strengthen the Liaison online brand achieving WCAG AA accessibility.
Approach
I approached this design project by consulting the Liaision stakeholders, marketing team and senior developers to gather existing brand and UI styling. I then conducted a design audit to evaluate and assess the current system’s usability and accessibility.
The gathered UI elements and brand colours were used as the basis to form a new design look and feel. I worked in close collaboration with senior developers and testers to designed common, reusable UI components and design patterns to formulate a consistent new UI style.
I produced a draft style guide which I presented for initial internal feedback, any design changes were implemented and approved. The new style guide included all key UI elements needed to build a new design pattern or web page. UI elements were grouped into sections for order and ease of use with component usage guidance provided.
Outcomes
The new style guide was designed, tested and completed to deadline, once signed off by the board the new guide was launched to the business. I presented the new style guide in a series of workshops to the product teams to gain understanding and to encourage adoption. Feedback was also encouraged to assist engagement so that new UI elements could be added to encompass and support product development.
The style guide also assisted new employee onboarding to introduce and inform of the Liaison online house style. Later the mobile UI elements included in the first version of the guide were separated out to form a new mobile style guide.
The Liaision style guides continue in use today providing a visual language and consistent branding to Liaision’s digital products and native app.
Looking for a freelance lead UI/UX designer in Brighton, Worthing, Sussex, London or remote? Get in touch to discuss how I can support your next design project.