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 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. To conduct a design audit to evaluate the current system’s usability and achieving WCAG AA accessibility standard throughout.
Approach
The approach was to work with stakeholders, marketing team and senior developers to gather brand and UI styling to formulate an agreed, consistent new UI style. The gathered UI elements and design patterns were assessed to evaluate their usability and accessibility.
A draft style guide was designed for initial internal feedback, once approved the new style guide was developed and completed to deadline. The new style guide included all key UI elements needed to build a new design pattern or page. UI elements were grouped into sections for order and ease of use with component usage guidance provided.
Outcomes
The new style guide was signed off by the board and launched to the business. Feedback was 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 were separated out to form a new mobile style guide.
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.