Project Image Schlumberger.png

Schlumberger Design System

Overview:

Designing and documenting a design system for Schlumberger’s internal business tools. 

Problem:

All design teams at Schlumberger had their own versions of a style guide or component library when it came to mobile products. This was leading to inefficiencies during development, discrepancies between visual design among products, and lack of clarity on the brand. 

Timeline: 3 months        

 

Role: Visual Designer        

Team: Jason Holmes (UX Design Manager), Rohan Jasani (UX Architect)

Solution:

Design reusable customizable components and patterns in PowerApps UI and document them so it can be shared throughout the organization. 

Research

01.

Immersion

I first did research on successful design systems and why they were working so well for other organizations. From there, I reviewed some of the currently existing internal design systems for useful artifacts. This study also gave me an idea on how to document the final design systems file. 

Design System of external organizations

Internal Design Systems

Scope

Since design systems are so vast it was important to define the scope before jumping into designing the system. Based on my research, every design system focused on mainly on the following 7 broad categories, which could then be broken down into sub-categories.

My 7 research areas for creating the Design System

02.

Explore

Designing components

I created hi-fidelity specs on sketch and worked through regular visual feedback sessions and design reviews with senior designers across the organization. I used Miro for this purpose, using its voting tool and comment sections to create an open channel of communication across design teams through the company.  

Teams voting on Miro

Testing

I started out experimenting on a pre-existing internal product that the system would be applied to, discovering, establishing and stress-testing a style and library of components and patterns. 

1. Designing for multiple states: For example, a form input has a placeholder, hover, focus, filled out, error and disabled state.

2. Accessibility: I tried to make design system more inclusive for people with visual disabilities like color blindness. I made sure that critical changes in the system are communicated effectively to the user through change in color AND by change in display labels or patterns.

Accessibility: The toggle button has an added visual cue apart from color

Testing

03.

Final Designs

Framework

I started by breaking the entire interfaces down into fundamental building blocks and work up from there.I followed the atomic design to frame all my UI’s starting from Atoms, molecules, organisms, templates and pages. 

Atom

Components

Molecule

Organism

04.

Document

Creating a Style Guide

My initial goal, was to create a sharepoint website that documents the specs, showcasing use-cases and specify guidelines for all patterns and components. It would act like a detailed study and a go to place for the design systems which could grow and develop. 

But due to time constraints, I ended up making a shareable document on InDesign which can be shared on Sharepoint internally to all teams. 

A few pages from the style guide document

Developing components 

Since I was working on PowerApps, it was relatively easy to code the components which can be reused into any local Powerapp in the company. With the help of other student developers I was able to  flush out components like date pickers, multi select, radio buttons etc. 

Key Takeaways 

Understanding the Business Requirements is important but Users are more important 

During the Stakeholder meeting we understood the goals and needs through the eyes of the business. Though research was not part of the job we went ahead and conducted Interviews, keeping it more open ended to try to understand the holistic experience of the product. This gave us substantial insights into how the product actually integrates into the users life, their frequency of use, their preferred medium, that helped in not just making the product better but also to think outside the box that was set by the Stakeholders

Facilitating effective design meetings is hard

As we all know, design discussions can go on for long. Some might be fruitful and others can leave you more perplexed than before. I soon realized after I facilitated my first meeting that writing things down on the whiteboard as people talk is a more efficient than just throwing ideas around with no fruitful results. This improved my sketching skills and in the process organized my thoughts and the thoughts of the participants in the room.