A Continuous Experience Pipeline

We provide you with the idea and the concept behind, and why you need it too.

Holger Hellinger
Engineered @ Publicis Sapient

--

How did we start?

A Brand re-launch at our client triggered the creation of an online Brand Style Guide. This Guide contained all the information necessary to create a Brand-compliant digital experience across their digital landscape.

A downloadable Sketch Master Document was used as a source of ‘Design’ truth. Previously, every design team created its own components as per their needs on top of the existing library. This led to inconsistency in design. The developers created code libraries based upon these designs, causing the output to vary a lot. This led to inconsistencies in digital touchpoints, thus preventing a uniform look-and-feel that could not be achieved by this.

Our approach is to use Publicis Sapient ways-of-working to create a unique and user-friendly toolset for designers and developers.

Team up and let‘s go

Firstly, we formed a team that focused exclusively on building a Continuous Experience Pipeline — both in design and code. The outcome is a ready-to-use toolkit which serves as a source-of-truth. All participants involved in creating projects for the brand needed to align on this.

Then, we went into solution-mode to analyze the status quo, possible deltas and any arising issues we may encounter. We created the workflow of a product that can be re-used with ease.

Our Mission Statement

We created a common understanding and a source of truth for UI assets and code for a consistent and efficient user experience across all digital touchpoints.

After getting an overview of the tool landscape, the workflows and the tasks of the different teams involved, we started to create a mission statement to align our activities with our North Star goal.

Achieving this goal required more than just a library that provides reusable code; with a unique tool set, a dedicated workflow, and a guided reusable process, we created a helping hand for both designers and developers. Creating communication and meet the brand-look-and-feel had never been easier.

Our Approach — Let‘s do this!

Photo by Sajjad Ahmadi on Unsplash

By focusing on participant needs, we defined quality standards and refined the process & workflows in all actions. Features included a centralized system that combines state-of-the-art design with lean code and a straight-forward process that is easy to understand. You will be able to contribute components in design and code and consume the components of the Continuous Experience Pipeline.

Our Process — How we make it happen

The process is the co-effort of all contributors and crafts; both designers and technologists alike. With respect to brand design, we analyze, optimize, and create UI (User Interface) components. This is how we solve the issue of inconsistent touchpoint designs.

Chart shows four boxes. Left Brand Design, right Design of Touch-points in the middle two boxes below each other — UI Components in Code and Design. All are Connected with both side arrows
How we make it happen

Workflow Fundamentals — The How

We have created ‘workflow fundamentals’ for our product, serving the continuous experience pipeline:

Basics
Initially, we analyzed different outputs in code and design from various teams. The best of both worlds serves us as the foundation for our work.

Standards
We focus on 4 main aspects: information should be Perceivable, interfaces should be Operable, content should be Understandable, and the meaning of the content should be Robust to changes in the way it is accessed.

Creation of Design Tokens
All basic definitions of the design system are defined in a structured and easy-to-use manner. Design Tokens allow us to apply and to adjust those basic rules.

ONE source-of-truth
In respect to the brand design, we maintain one master file for all components and apply design tokens to it. The developer can consume the token definitions to create the code in respect to user experience and accessibility standards.

Tool setup

Shows the Tools flow from Abstract to Sketch to Craft and into Invision
Tools in design

InVision DSMDesign System in design and code
Sketch Vector layout tool for prototypes and designs
Abstract Version control for Sketch files
CRAFT PLUGINInVision API to Sketch

Shows the Tools flow from Bitbucket to react Storybook into Invision — An additional Bullet is NPM
Tools in code

React JavaScript Library
Bitbucket Git code management
Storybook UI development, testing, documentation
npm JavaScript package provider

Workflow

We orchestrate the aforementioned tools to create an effective and stable Continuous Experience Pipeline. To ensure and maintain quality amongst all respective disciplines, quality gates are integrated in the pipeline. In case you have another tool-set or environment, this needs to be adjusted according to your needs.

The Chart visible here explains the whole Pipeline with all tools mentioned in the Text. Also showing Gatekeepers in between Dsign Tokens, Invision, Tech and Contributors.
A Continuous Experience Pipeline

Co-work — Team up

Four Lego heros from Star Wars in a row.
Photo by freestocks on Unsplash

We teamed up to consume and contribute design and code.

As product owners, we constantly listen to our consumers, partners, and stakeholders. We improve the quality of our deliverables based on feedback. The Continuous Experience Pipeline is open to every team, who would like to get in use of the same process.

We offer guidance and support, including team chats, issue tracking and constant feedback meetings by our specialists.

Benefits — What comes with it

  • Ready-to-go component toolkit
  • Source-of-truth in User Experience, Design and Code
  • Time and cost safer
  • Consume and creation mode
  • Easy on-boarding
  • Quality standards for high quality outputs
  • Frequent updates

Outcome

Smilys with the Headlines Happy Designer, Client, Customer and Developer

Happy customer
Experience a unique brand design, which is consistent across touchpoints.

Happy client
Easy on-boarding and workflow reduce time and cost.

Happy designer
There is one source and one process you can rely on. With ready-to-use components, you speed up your workflow.

Happy developer
Documentation and lean code leads to fast and high-quality results.

Lessons learned

Avoid shortcuts
Most of the time, the fastest solution is not the best. We always follow the approach to go the full mile instead of using shortcuts to solve problems.

Take decisions and stick with them
Good solutions are solutions supported by a clear rationale. Our decision-making process was driven with this in mind.

Find Allies
In enterprise companies with business units all over the world, communication channels are often convoluted and not straightforward. To get the best momentum for your project, you need to find allies who support you.

Use Design Tokens
Structure the basics of your design system. The handover process from designers to developers is more effective and faster.

Listen to people
As the Continuous Experience Pipeline is a product, feedback is integral. Accept it and try to improve the subject immediately.

Encourage co-work
A living library is always a shared effort. We constantly encourage people to participate and work with us.

If you have any questions, get in touch. We’d love to work with you!

SHaling Hands as Neon Light
Photo by charlesdeluvio on Unsplash

The people behind: A dedicated team of Developers and Designers lead by Holger Hellinger (Director Technology) and Michael Brandt (Design Lead) at Publicis Sapient, Cologne.

--

--