Loader Logo
Our Source of Truth for Digital

Creating a Design System

Design System

Deliverables

// Atomic Design
// Pattern Library
// Sketch / Figma Components

In order to achieve scalable products, and avoid chaos and inconsistency on our Digital deliverables across channels, in 2018 we embraced an iterative metholodoly in our goal of creating our own Design System.

Taking as a reference Alla Kholmatova ( and her amazing book on building ‘Design Systems’) we embarked ourselves on the task of laying down the foundations for this shared design language across the Company.


Roles and Responsabilities

Digital Design Lead - UX/UI, Visual Design, Interaction

Client

Three Ireland

Building Blocks

An Iterative process

Our Design System is composed of tangible and non-tangible elements :

  • Tools for designers & developers, patterns, components, guidelines…
  • But also abstract elements such as brand values, shared ways of working, mindset, shared beliefs…

    • It all naturally evolved within time though iteration, starting with a detailed Style Guide which focused on different graphic styles (colours, fonts, illustrations…) and their usage.

    Eventually we decided to adopt the Atomic Design methodology ( by Brad Frost) which focuses on designing interfaces building from smaller to bigger elements (atoms, molecules and organisms) until being able to create full modular templates.

    From there we took it a step further adopting Sketch as our main design tool and developing a full Sketch Library, with symbols representing all of our components, which would allow us to create fully branded pages and microsites in a matter of minutes.

    We also created a full Online CSS Pattern Library to use on our own developments and with our external vendors. It includes all the styling needed to give consistency to our pages without any kind of missalignment.

    This Pattern Library is currently on its 2.0 Version, and by the end of the year we will introduce a huge step forward with the 3.0 Version, in sync with a new Look & Feel and IA, for our so called ‘Website of the Future’.

    BITS and Pieces

    THE FULL DESIGN SYSTEM

    1. Purpose, Values, Tone of Voice

    SEO
    SEO
    SEO
    SEO
    SEO

    2. Brand Identity & Visual Language

    For expanding on our visual Brand Identity we at Three Ireland have partnered with two specific agencies in order to develop a consistent Identity in line with the global brand.

    This two agencies are WHAM in UK, in charge of the Global Branding for Three around the world( with strong presence on UK, Italy, Singapore...), and Boys&Girls, our usual Creative Agency who has been giving us service for all kind of On/Off Campaigns and Promotions since 2013.

    Here is a short video explaining the current Branding Proposition.


    SEO

    3. Components & Patterns

    For this project we created a full Pattern Library, based on Atomic Design, developed by our team and hosted on our internal CDN ( Content Delivery Network).

    End of 2020

    The Final Outcome

    The goal is to finally deliver a full Design System that is:

  • Balanced: neither struck or loose, but adaptable through iteration, with a Modular system, based on atomic design.

  • Made of interchangeable and reusable parts, whith the ability to scale quickly and adapt to multiple user needs.

  • With a Centralised model, being the digital team in charge to update and iterate all of its contents, while keeping the users (designers, developers, PO…) at the heart of the approach, and the stakeholders as part of the process.

    • Next Steps

    Currently finalising the deployment of our Pattern Library 3.0 and a new components library in Figma. Once we do that we will wrap it all together along with the existent elements on a fully documented microsite for internal and partners usage.