Back to work
The journey of me
13th July 2018
The journey of me
13th July 2018
The journey of me
13th July 2018
The journey of me
13th July 2018
Mirissa Beach
Mirissa Beach was my first semi-permanent travel home. I volunteered at Hostel First and redesigned their website. It's a beautiful little surf town with a vibrant nightlife scene.
Whatsapp +447907208982
Client & task
Year
2020/21
Location
Remote
The client came to us currently using a plethora of design programs and tools with no central point of truth or design system and needed guidance on best practises and how to setup their design systems. They have 11 different brands and wanted to have one point of truth design system for all to use.
-
To advise and set-up design libraries for Gamesys to use for their 11 brands
-
To advise on the governance of the design systems, how to create new brands and components within brands and update the wider team.
Working with Splendid Unlimited (a team of strategy & UX) we defined the set-up and ways of working with a new design system based on Google Material Design. We began with researching best practise in design systems and planning how features could be utilised for Gamesys. My role was to set up the design library using Figma and to define the structure and governance of the document. We recommended that they should have one master "greyscale" design library that is the point of all truth, it will contain all the components for all brands in greyscale (unbranded). Any updates will be reflected and updated in this document and shared with the wider team. This document is not to be edited once components are approved. The grayscale document is designed to be duplicated for each brand and styled accordingly. We advised them to set up a duplicate styled document for each of the 11 brands and add any unique components also to the greyscale document. We created a rollout plan for the company over a 2 year period as implementing this strategy will take them a long time. We also delivered a governance deck to advise how the design system team should manage updates, new brands and how design, develops and project managers should work together using them.
The solution
The process
Design systems teams
We started by interviewing different teams in the company to see who is currently involved in the design process and who should be in the future. Communication between wider teams seemed to be a challenge, and this was something we wanted to make easier with the new design systems structure and ways of working.
Design systems structure
The greyscale MDS inspired Figma document was decided to be at the beginning of the process for anyone involved in working with the design systems. Each brand will then have its own duplicate edited version of this document complete with the UI branding and style guide for each brand. Within these files both designers and UI developers have rights to view and edit (with granted permission) and design/view new components.
Figma structure
We set up the structure of the Figma file to be intuitive and easy to use, so any new team member can use the file and understand what each section means. We had a getting started section with onboarding information, how to use the file and branding information.
The next section was Material foundation with a full suite of Google Material Design elements to be used as a starting point for any new components.
The next section was the components. For the grayscale we expected this to be large as it was intended to be all the components used for all 11 brands.
The next section was the "playground" design exploration. This is where designers can come in and create new components within the file and collaborate with anyone needed.
One these were approved, they will be moved into the new components section. This is designed as a way to monitor new designs and track work for approvers and developers.
Individual brands
We recommended they set up each brand with a cover photo and consistent naming convention used by all employees.
Working with their in-house designers we tested the greyscale document with one brand to see how it worked. Together we learnt what worked and what didn't and developed the working process to suit their unique company requirements. Each component had all variants included and instructions so any designer in the company can understand.
UX/UI Design process
As part of the governance deliverable we created user flow journeys for designers, developers and project managers on how they should efficiently create new components. We wanted to ensure that everyone that should be involved in the process would be, for example the person responsible for the approval of the new component. We suggested a traffic light system of importance of the new component to help with resourcing and timing. The steps are designed to be clear and use the new design system in an efficient, transparent and collaborative manner.
