Schlumberger DS

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

Year

2019

Timeline

3 months

Team

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

Role

UI Designer

Project Overview

Systems thinking for a large enterprise

Building a design library for Schlumberger's Powerapps mobile platform

Challenge

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.

Solution

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

01.

Research

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.

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.

Testing

I started out experimenting on a pre-existing internal products that the system would be applied to. I did by 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.

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.

Single Project

Displays all requests, messages, and activity for each project in both list and gallery layouts to accommodate users preferences.

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. 

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 toflush out components like date pickers, multi select, radio buttons etc.

Key Takeaways

Understanding the Business Requirements are 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. 

More Case Studies