Teamed up with marketers, technologists, and designers of Publicis Sapient Germany, we've created a User Interface Library for one of the biggest logistics companies worldwide. We called it 'A Continuous Experience Pipeline'.
What is it?
The User Interface Library is a comprehensive collection of design patterns and user interface elements created to enhance consistency and support developers, designers, and content authors in building digital products.
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.
Let's go!
First, 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 that 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
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 straightforward 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
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.
Fundamentals
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 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.
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
Tool setup
Tools in design
InVision DSM — Design System in design and code
Sketch — Vector layout tool for prototypes and designs
Abstract — Version control for Sketch files
CRAFT Plugin — InVision API to Sketch
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.
Team Setup
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
→ Ready-to-go component toolkit
→ Source-of-truth in User Experience, Design and Code
→ Time and cost safer
→ Consume and creation mode
→ Easy onboarding
→ Quality standards for high-quality outputs
→ Frequent updates
Outcome
Happy customer
Experience a unique brand design, which is consistent across touchpoints.
Happy client
Easy onboarding 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
The people behind: A dedicated team of developers and designers led by Holger Hellinger (Director Technology) and Michael Brandt (Design Lead) at Publicis Sapient, Cologne.