Design System

Odigo

Mars 2019 à Mars 2020
Image to give example to my work for odigo design system

Problem Overview

My Role

Product designer, User research in accessibility

My Team

French Design team, India design team

Quick scope of the mission

Our goal was to make Odigo ui kit more accessible and the way of working more efficiently between teams. With the new version of the product,  a new organization between designer, product manager and developer has been required. With this new approach, it was essential for us to have a Design system.

Who is

Odigo ?

Odigo is a subsidiary of Capgemini, which seeks to improve the user experience for companies like SNCF, Chronopost, ect. Odigo aims to make Contact Center as a Service (CCaaS) more accessible and easier to manage for companies that want to provide multichannel customer services. On the other hand, Odigo is looking to go further in the customer experience with its new v6, offering a better user experience and meeting more needs.

iMac 24 inches with in mockup interface of odigo
Define

The Challenge

→ The first challenge of the project was to find the method of work that allows us to have the Indian team and the French team available for workshops, thus working together.

→ The second challenge was to have all the information about the new features we will add for the new version of the product. In order to propose components that can be used throughout the product.

→ The third challenge was to agree on a communication method with the developers in order to simplify their work.  And also with the marketing team to adjust the tone of voice.

Macbook with interface mockup of odigo
Define

The problem

Our big problem was how to merge all the versions of the Ui Kit into a single file so that it would be able to respond to the complexity of our product, which targets such different personas. As well as answering questions about accessibility, but also the complexity of the V6 project.

Design

Designing & Collaboration

Mission 1

Evangelizing System 
Design

First, we convinced and explained the importance of system design, as well as its use within the company. The important thing was to explain to all the stakeholders of the project the business benefits and efficiency that all the design, development, and marketing teams could have.

Icon - speaker
1. Explain what is a DS

We conducted several meetings to explain what a system design is.

Icon- 2 people
2. Show the interests

Explained the interest of using the design system for all teams involved in this transformation.

Icon - Euros
3. identify the benefice

Showed the long and short-term benefits for the team and also for the company.

Icon - team & collaborate
4. Collaborate

Collaborated to co-create this design system, so that everyone feels better with it and uses it.

A Selection of Explanation.
Image -> $1.5 MM+ of benefice for using design system
50%-20%-52% information for design system
Benefits team & business benefits
What are the benefits for the design system
Benefits for everyoneA centralized design system with validating process
Illustration of UI KIT in design system
Mission 2

Start to collaborate

Work with Developers

→ For our collaboration with the developers, we looked for technical solutions that would suit both parties. After several discussions we agreed to use the salesforce library ng-lighting, because we have a technical complexity as our developer use Angular language to code the product.

Work with Marketing

→ For our collaboration with the Marketing team, we made several meetings about the tone of voice and also about the style of illustrations that we want so for product and publications. We defined a tone of voice style and an illustration style that would perfectly suit the future of Odigo.

Work with design team india

→ In order to make the sorting in our components we made a sorting of card which allowed us to select the components which are optimal to allow us to answer the future need of the product.

People in meeting with screen for talking
Mission 3

Build for the futur

To start to build the Design system, we have to use the methodology “Atomic Design”.

Image on Atomic design

Pioneered by Brad Frost, the Atomic Design methodology is a hierarchical way of organizing design patterns. On the base level (Atoms), there are simple design patterns, like a button, a text box, or a label. An email submission form which combines the button, text box, and label into a more complex pattern is at the next level in the hierarchy (Molecules). Each ascending level in the hierarchy builds upon the simpler patterns found in the levels below. 

The benefits of this methodology is :
-> Save time.
-> Keep a global coherence on the created interface elements
-> Getting along better with developer

In order to create our component library, we did a card sorting which allowed us to select components that sound optimal to allow us to meet future product needs.

A Selection of Design file of design system.
Image of design system odigo Image of design system odigo Image of design system odigo Image of design system odigo Image of design system odigo Image of design system odigo
Mission-4

Focus on Accessibility

Some of odigo's customers have specific disabilities, and we wanted to respond with a specific tool adapted to their needs.

But we were not really satisfied with this solution, so we started to create a topic on this subject. In order to think about the subject and to propose a first summary solution, but which takes into account the first bricks of this vast subject.

A Selection of Design file of design system for Accessibility.
Image of documentation in accessibility
Recommendation for accessibilityIntroduction to understanding  accessibilityImage on Keyboard for shortcuts
Reminder

Learning

Putting more emphasis on accessibility :

I found that on a system design project, the topic of accessibility was not discussed or put forward enough. Which, for me, is an important subject for both the user and the designer.

Constant communication:

Many designers want to undertake projects that are of obvious interest to the company and to the users. However, it is important to involve people from other teams from the start and to continually explain and discuss the progress of ongoing projects. This helps to get buy-in from stakeholders and to get different points of view to create a better product.

Next Project
Make Impact
arrow