Premier Inn

• Create a robust design system, page template repository that will become the unique source of truth across the business
• Reshape the ways of working to facilitate collaboration across teams

Overview

When I first started on this project, it was really obvious that the main issue was about the ways of working. 
First of all, the company was using a multitude of tools such as sketch + Zeplin + InVision + JIRA which were expensive and difficult to maintain.

The other problem was that the key stakeholders were working in silo with little communication amongst the leadership, design and engineering teams. 
For example, JIRA was only used by the engineering team and the design team had no way of tracking requests and recommendations. 
The above explains why there had been so much inconsistencies and discrepancies between the design files and the live experience. 

Agency:
Inviqa

ECD:
Simon Patel

Solutions

To tackle these 2 major issues, we looked at implementing:

  • A design system 
  • New ways of working

Design system

I’ve developed a unique design system that follows the atomic design methodology which feeds into a repository of templates that contain different scenarios. 
This ensure consistency across pages and constitute the source of truth for the cross functional teams working for PremierInn.com.
Highlighting available meals, potential offers and clear and appealing visuals. 

I also made the process more flexible by allowing guests to select different meals for a single room. 
Finally, I’ve included allegers’s information to facilite meal selection.

Design system structure

2 main sections: Foundations and components  

  • Foundations regroup all smaller elements that allow to build bigger organisms such as colours, buttons, input fields etc…
  • Components are divided into 3 subsections : Global elements / Functional / Editorial 
PremierInn_Design_System_1
PremierInn_Design_System_2
PremierInn_Design_System_3
PremierInn_Design_System_4
PremierInn_Design_System_5
PremierInn_Design_System_6
PremierInn_Design_System_7
PremierInn_Design_System_8
Previous
Next

Few elements available in the ‘foundations’ section

PremierInn_Design_System_9
PremierInn_Design_System_10
PremierInn_Design_System_11
PremierInn_Design_System_12
PremierInn_Design_System_13
Previous
Next

Few elements available in the ‘Components’ section

New ways of working

I established a new process that facilitates the communication across the board and that allows the design, engineering, QA and testing teams to work at a different pace.
Which means that everybody can now focus on a clear task without jeopardising what the other teams are doing. 
This enables BAs to request smooth incremental design changes while ensuring visual consistency and allowing engineering teams to test and implement previously signed off designs.

From a tool perspective, I decided to give up working with Sketch in favour of Figma which allows multiple teams to collaborate simultaneously on the same file. 
I’ve established a ticketing system with JIRA to facilitate the access to previous requests and to enable a better version control. 

PremierInn_Version_Control_1
PremierInn_Version_Control_2
PremierInn_Version_Control_3
Previous
Next

My role

My role was to identify why the current processes weren’t working to come up with a strong proposal to solve the business problems. 
I then led the creation of the creation of the design system and the implementation of the recommended solutions. 
I have also introduced and trained all stakeholders working for PremierInn.com to these new ways of working via workshop sessions.