Case Study | Why and how to implement a design system within your company
World of Digits / Explore
Working smarter, not harder, is possible for your developers and designers thanks to the right collaboration tool such as a design system. Whether you’re working on a rebranding, a product launch, or re-challenging the user experience, it is important to organize yourself well with design elements to save time and money. No more meetings to discuss with teams how things should work. A well-implemented design system predefines all the uses and functions of your components.
Consistency in your design projects is a major focus for your users. Even a small mistake could weaken your brand image and credibility. Reproducing every element of your graphic designs is a tedious task that can take a monstrous amount of time. An amount of time that you could invest in improving other details of the user experience.
Wouldn’t it be easier for you and your team to collaborate efficiently on your design project without having to worry about consistency between your assigned tasks? Wouldn’t it be gratifying that your work has not been in vain and that it will even benefit people who will take over your work?
If those are your concerns, the solution is nothing simpler and easier than the design system. The design system is a library of all your design elements that is accessible to all your collaborators.
The way the design system works is very simple to understand. The basic elements are called ‘atoms’, including colors, fonts, icons, and shapes. When these elements are assembled, they can create more complex elements, called ‘molecules’, such as buttons, pictograms, input fields, checkboxes, etc.
The library stores all the components and assemblies created when used frequently. Key components of interfaces are retained, and their use and function are indicated for reuse in your products and business. Indeed, the design system ensures that, when a team creates a new product or website, they implement it in the same way as the content type previously created.
The big plus of this solution? The design system evolves with the needs of the company and all the components can be updated individually without having to modify the entire content. It adapts to changes and rapid development cycles. It can also reduce the technical debt accumulated by development teams due to successive changes.
The 8 steps we follow to develop a design system
1. Auditing | Define why you need a design system, what you want to achieve with it, and what design elements are already available.
2. Defining an approach | Design the Design System structure, the guidelines, and the UI Library, and assess the tool needed.
3. Understanding the brand strategy | Review the brand charter, the mission statement, and the target audience.
4. Creating a visual design language |Choose the colors, typographies, icons, sizings, grid, and imagery.
5. Checking accessibility
6. Creating web guidelines | Develop a graphical charter and guidelines to create new elements for the design system.
7. Briefing development and designers teams
8. Training on maintenance
In this case study, find out how our experts went about creating a coherent ecosystem for one of their client’s projects and how this solution made their efforts sustainable over time.
They are providers of multi-energy and mobility solutions to individuals, professionals, companies, and local authorities.
In May 2021, TotalEnergies (formerly known as Lampiris) announced their rebranding. They needed to redesign both their websites, including Lampiris (designed for B2C as a Power and Gas supplier) and Total (as a B2B website for small and large companies).
Until then, Lampiris B2C and Total B2B were very different from each other, with all their complex price simulations and customer zones. These two brands needed to be rebranded into one. As a result, a coherent and consistent look for all these different projects had to be provided.
As the rebranding had already started in France, basic guidelines were already available. However, these basic design elements were not sufficient to carry out these assignments.
We take a broad view and ensure that we offer solutions tailored to our client’s needs while anticipating future challenges. This aims to enable them to be self-sufficient with their products and to fully enjoy the long-term benefits of our innovative solutions.
Thanks to our comprehensive and practical approach to this task, it quickly became clear that effective and efficient tools needed to be put in place to complete this rebranding. Regarding the lack of graphic elements and designs available at the time, it was necessary to start from scratch. This would ensure the successful creation of a complex website that met every expectation of TotalEnergies.
The use of a design system makes all projects have the same look and feel, even if their functionality is very different.
Before the rebranding, they used Sketch to format the designs. However, after auditing the development context and setting the final objectives of the new website, our experts decided to switch to Figma. This tool is more suited to the demands of such a major rebranding. In fact, it was on this new editing platform that it was possible to create an entirely new design system and component library for the project. Knowing that several designers would be working on the task, it was important to ensure that this design system was complete and well documented, as well as developed on a support that was accessible to the whole team.
Initially, the design system included the few elements from the first rebranding that they needed to keep, such as colors and typography. Then, they continued the work by following the Atomic Design approach. This approach is a method based on a biological metaphor. It allows the creation of modular component systems adaptable to any type of support. Thus, they started with the “atoms”, like the use of colors, typographic rules, spacing, grids, icons, etc. Afterward, they created the intermediate components or “molecules” like buttons, links, and form fields.
With the design system achieved and the incredible power of Figma, TotalEnergies has now a full list of mobile and desktop components fully prototyped and foreseen for every circumstance.
Whenever a design needs a new component, it must be first validated if this component will indeed be used on multiple platforms. If yes, it is then implemented in the general design system. If not, the component is only included as a local component for that specific project. A design system makes your branding consistent and allows any new designer to take over your future projects easily.
“A year ago, I had never worked with Figma before, and I had never created a design system. I turned to fellow designers at World of Digits who’d already done it before for advice and tips & tricks which really helped. Besides that, working with multiple WOD consultants at our client makes it so easy and fun to work together. We can count on each other’s knowledge and experience to create value in short-term notice.”
Each company that has a website or an application needs a design system. Indeed, it is the only way to maintain consistency throughout projects.
For small and biggest companies, you need guidelines to ensure strong branding and optimal user experience. Moreover, the design system also has the advantage of simplifying communication between teams, as they all have access to this collaborative tool that allows them to quickly assess the branding.
When it comes to combining two independent websites into one, it is essential to establish a solid consistency and homogeneity. Therefore, the creation of a design system is the solution which ensures that the combination of the two websites has the same look and feel, despite their divergent functionality and target audience. Moreover, you maintain this consistency between desktop and mobile. Thanks to a design system, you guarantee an optimal user experience regardless of the device.
Dirk, Head of Digital at TotalEnergies
Why did you choose WOD to move forward with your project?
WOD gathers several types of profiles that complement each other’s. By having PO, UX and UI leads collaborating, we are confident that their mission will be accomplished from start to finish. This project also benefits from being approached under the gaze of several experts.
When it came to creating our new website, they used the tools available to them and created the ones that were missing, such as the design system.
How did it help you?
Their high level of expertise made it possible to accomplish good qualitative work. They were able to share and implement their knowledge within TotalEnergies Team. Their spirit of collaboration and adaptability are real assets in their approach as reflected in their customer-centric way of working. They came up with innovative methods and techniques to tackle this challenge that made this joint project a success.
Now that you have your design system what’s next?
This rebranding represents an opportunity to take a new step in the TotalEnergies digital experience. With the ambition to constantly improve the experience of our users and customers, we hope to count on WOD to guide us towards our evolution of performance in the digital universe, thanks to their expertise and customer-centered solutions.
The design system is without a doubt the tool for the teams of developers and designers involved in a design process. It is however important to implement it at the beginning of a new project, especially when you are in a team of several. Essential to speed up the design process, it maintains the style consistent across all designs. Therefore, the final product is designed consistently despite the fact that new designers are taking over the project.
Do you need any support in building and implementing a design system?
Are you a designer who specializes in this field or who is keen to learn more about it?
Read this article
Working smarter, not harder, is possible for your developers and designers thanks to the right collaboration tool.Read this article
Many UX designers are familiar with the problem of a creative block. But how do you make the most of this moment of low?Read this article
Read this article