Embark Design System

Embark set out with the goal of creating a unified framework that will help design and development teams flow, reducing friction and resulting in a more collaborative and efficient approach to digital prototyping and product development.

Year
2019
Client
Accenture
Project
Design System
role
Visual + Interaction Design Lead

Challenge

Embark is a front-end design system that consists of style-guides, UI kits and a Bootstrap compatible component library.

Our goal is to help design and development teams collaborate more easily. By establishing a common language for product development, the aim is to reduce friction between teams, speed up development cycles and create more time for teams to focus on work that matters.

Design Principles

Components are one of the key building blocks of the design system. Each component has been specifically designed and coded to solve a UI problem. All of the components in Embark have been designed to work collectively together.

Adaptable and flexible

Embark takes a modular approach that supports a range of expression. Components can be used in a variety of ways while designed to work seamlessly with each other to ensure smooth user experiences.

Purpose built

Designed to be as efficient as possible - enough breadth without being too overwhelming. Every element in the system has been carefully considered.

Consistency

Provides consistent and connected UI elements, preventing incompatibilities and conflicts between UI elements.

Inclusive

Accessible design is good design and while we have baked-in as many accessibility standards as possible (eg. visual contrast), teams will need to ensure that they adhere to these as they utilise the system.

Collaborative

Embark has been tuned for the specific needs of Dock projects. The onboarding experience has been considered throughout and the system has been created to enable people to move fast, in both design and development.

Maintainable and scalable

Built on the well-established Bootstrap foundation, we align to the fundamentals that will ensure future builds can scale quickly and be easily maintained over time.

Solution

Style guide

Baseline guides for Accenture software. Typography, color palettes, Icons, grids, margins, spacing system.

UI Kits

Shared styles, symbols, UI components & patterns UI component library in wireframe, light and dark themes. Standard design tools (Sketch + XD).

Light Theme (Adobe XD)

Software component library

Dev components, mirroring UI kit. HTML/JS components, in Bootstrap based library & development framework.

Dark Theme (Sketch)

Documentation

Guidelines & examples for how to use Embark. Website with interactive components, guidelines and documentation. Downloads for all assets.

Embark Documentation Site

Governance model

How we contribute to and evolve the system. Core team will support in training and roll-out for pilots. Teams channel to gather feedback and create backlog for future updates.

Embark Design System

Themes

We created a shared language between fellow designers, as well as between designers and developers in the Dock - as well as connecting external Accenture design and development partners and built out some example themes to reflect this.

Embark reduces the effort in projects, speeding up development times and therefore allowing for more iteration and refinement. It allows to focus on what matters - solving many design decisions up front, whilst enabling teams to put their time and energy into problem solving and innovation.

A number of live projects using the Embark framework are currently in development.

Project management theme


Analytics dashboard

Light theme dashboard

Telcos theme

Login page

Transcript theme

Dock site theme

Documentation

A live documentation portal is available on an Accenture server as a support resource for design and development. Design guidelines for layout, colours, typography, icons, shadows and accessibility are included. Development code snippets and examples are available for all of the shared components. Designers and developers can get involved through the portal and examples of themes are available for reference and inspiration.

Embark Documentation

Embark Documentation


Embark Design System