CHALLENGE AND OBJECTIVE
Create a coherent digital ecosystem for the SBM Offshore brand A Design System is a repository of reusable components in various digital applications and a documentation of best practices for designers and developers of these digital products and services.
This solution allows to:
- Facilitate the work of the teams, which can then draw on ready-made components written in a common language (which facilitates communication);
- Reduce the “technical debt” (time and budget) of digital projects;
- Create a consistent brand ecosystem that respects the company’s identity to provide a better experience for users and end customers.
This last point was the initial objective of SBM Offshore.
Duration of the project
- Agile project management (8 sprints)
- User journeys analysis
- User tests
- Creation of components librairy on Adobe XD
- Creation of documentation pages on Sharepoint (with Adobe XD iframes)
- Support processes writing
Lack of consistency
In contrast to the SBM Offshore print communication, the digital services lack a graphic and experiential coherence that can damage to the brand’s image. The goal of this project was to reduce the inconsistencies between the different applications by creating a Design System that will be the basis for all new application developments for end-customers.
The project was managed in Agile. The first sprints were dedicated to the realization of 4 workshops to allow me to better understand the users of 2 web applications and 1 platform representative of the brand’s activity. Thanks to the involvement of the participants, this study allowed me to define needs, expectations and motivations of the current users. The reporting was done with Personas and the analysis of the user journeys of the studied tools.
These workshops concluded that:
- The current users were experts, with a strong engineering profile: their needs are centralization of information, confidence in the tools and the data they present.
- Users have learned to master these interfaces by themselves (by interacting with them, without training) and they are satisfied with this: they do not notice that they sometimes waste time searching for information, they are not aware of the interest of a fluid experience (display adapted to the screen, easy and pleasant interface to use).
- This observation did not reconsider the good operational results of the applications studied, however their experience could be improved.
- Users did not feel legitimate and able to appreciate the image represented by the interfaces: image not representing the identity of the brand (colors and experience level not optimal).
- Note that these different interfaces were not designed for end-customers, and in their current state they could not be: from a visual point of view (brand image) and from an experience point of view (ease of use, speed in finding information) these interfaces would not meet the requirements of end-customers.
This research phase allowed the project team to confirm the need for a Design System with a consistent brand image and to better define this Design System based on needs, behaviors and motivations of current and future users (end-customers) of SBM Offshore applications.
« [The Design System] will professionalize our developments, it is the future of our communication. »
Inventory and Design
In parallel to the workshops, I made an inventory of the components used in the studied applications to adapt the scope of the Design System.
The definitions and components were created in Adobe XD (to match SBM Offshore’s software ecosystem): a library to be shared with the designers of the group’s projects. Designers simply request access to the library so that it is automatically added to their Adobe account and they just pick up and choose from the pre-defined components to build their interfaces and create interactive prototypes.
Design System Documentation
The documentation of the Design System was written on SharePoint: the different pages were illustrated thanks to exports of canvas linked to the Adobe XD library. Thus the SharePoint illustrations are synchronized with the Adobe XD library for an easier maintenance.
A Design System is a living tool: this Design System will therefore evolve to meet the new needs and challenges of users and the evolution of SBM Offshore. Governance rules have therefore been established and integrated into the company’s project management model.
Delivery of the Design System and its documentation
« As part of SBM Offshore’s digital transformation, Adeline set up a design system. The project mode was 100% remote, in an international environment and in a new context for SBM Offshore. It was a great pleasure to work together! Adeline showed professionalism, using Design Thinking to understand the users’ needs and Agile methodology to keep in constant contact with them and the sponsors. The result was immediately adopted by the users. The elements of the design system are quality and exhaustive. A big thank you to you Adeline for your great work and your good mood throughout the project! I hope we will have the opportunity to work together again soon. »
« I had the chance to work recently with Adeline on our Design System project, her expertise and technical skills allowed us to progress quickly and above all very serenely, which is essential for me in this kind of project where dozens of people are involved. Adeline also knew how to be extremely educational and available to transmit her knowledge in the digital field to people who, like me, were discovering this universe and these new ways of working. In short, nothing but good things happened during this project, Adeline is a person I trust and who has a real mastery of her subject. »
Is your digital ecosystem consistent?
The digital services offered to your customers must represent the image of your company and remind the confidence that connects your customers to your brand. A Design System brings this rigor and rules of use needed by teams and suppliers to achieve the quality expected by your customers in your digital services. Let’s discuss your needs.