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.

Design System

Intervention

Responsabilities

UX Designer, UI Designer

Duration of the project

5 months

Client

SBM Offshore

Applied methodologies

  • Agile project management (8 sprints)
  • Workshops
  • Personas
  • 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

DELIVERIES

Deliveries of the Design System

CONTEXT

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.

Videoconference workshop on Miro

METHODOLOGY

Workshop research

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.

Workshop conclusion

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.

Customer testimonial

« [The Design System] will professionalize our developments, it is the future of our communication. »

Group Transformation Director
Initial perception of the users Initial perception of the users
Adobe XD components
Zoom

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.

Some SharePoint pages from the Design System documentation
Zoom

CONCLUSION

Delivery of the Design System and its documentation

Design System Project Deliverables
Zoom
 
The Design System was delivered: * A SharePoint website of more than forty pages illustrated with the components including best practices and concepts of the UX approach; * An Adobe XD library of components and assets to share with designers for use in their various projects; * Governance rules to support the team in charge of the Design System; * Illustrated support procedures for the team in charge of the Design System.
Customer testimonial

« 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. »

Aline Gallo
Digital Transformation Manager
Customer testimonial

« 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. »

Jean Caraglio
Communication Director

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.

Contact me

🌱 This website is eco-designed.
It is sustainable and low-consumption.

  • Its A average rating is maximum, obtained according to the environmental performance tool www.ecoindex.fr. For an order of magnitude, 100 visits per month consume 2.02 l of blue water and emit 135 gCO2e of greenhouse gases.
  • The average weight of the pages of the website is less than 500 Kb.
  • Lighthouse Scores: Performance 95%, Accessibility 94%, Best Practices 100%, SEO 92%.
  • Green hosting at www.infomaniak.ch.