Location

London

Roles

UI DesignerLead UI Designer

Properties

Design AuditUser TestingDesign SystemsAccessibility TestingStyleguideQABrandingIconography

Project Design System Company Whitbread Year 2019 Features UI Design, Design Systems, Icon Design, Accessibility

2019 I was brought in to support on a design audit across all the Whitbread brands. Following this, we created a new Design System for the Premier Inn brand and it’s subsidiaries. I introduced new methods of collaboration via shared Sketch Libraries, and was responsible for building out the first versions of the Styleguide and refining the Design System for app. All the work you see below is mine, including the iconography.

Audit examples
Before
After
Styleguide
Colours
Typography
Iconography
Components
Buttons
Button Accessibility Testing
Input fields
App Notifications
App Badges
App Controls

Audit examples

Before

Small selection of buttons, link styles, and icons with inconsistent styles

After

Small selection of buttons, link styles, and icons with consistent styles

Styleguide

Colours

Three separate colour palettes, the Main colour palette, which includes brand-specific colours, primary colours, notification colours and shades of grey. The Borders and Tints palette, and the Button States palette.

Typography

The Base Typography sizes for Mobile.

Iconography

Components

Buttons

An array of standardised buttons with styles, including primary, secondary, and tertiary buttons, both large and small. Buttons with and without icons. Button loading states, and unique Marketing and App Native buttons. All of which feature enabled and disabled states.