Design system for bunch of designers
Design system for a bunch of designers
— Shell
About Shell
You can download Shell app in 28 countries. The app keeps the user up to date with Shell loyalty offers, rewards, on-site promotions, the latest news, and product information. It makes it easier for users to collect points, receive personalized offers, find the nearest stations, and maintain their vehicles.
How do we make teams design coherent?
My role
UX
Prototyping
User Testing
Design
Design system
Challange
While working on the Shell app, I had a chance to work on a few new features and updates for the app and website. When I started working on the app, three design teams were working on the app. The challenge was to keep the designs coherent. Therefore it was essential for all the teams to have a clear set of rules on how to create new features.
Design system
To create a coherent design language, first, there must be a set of guidelines. When I started working in Shell design team, everyone was working in Photoshop. All the designs and modules were made in Photoshop. To build the Atomic UI kit, we first had to rebuild all the components and screens in Sketch. This way, we took old features under a loop and had a chance to set the fundamental rules from the beginning.
My roll in that process was to check all the designs and components on coherency and UX. Coherence means making sure every part of your product feels like it belongs there. This way, the whole app feels the same, while a bunch of designers works on it.
We’re not designing pages, we’re designing systems of components.
— Stephen Hay
Creating a design system
The best way to create a system is on the go, e.g., while developing a new feature, or of course while creating first designs. This way, you can test the system and see how it scales and behaves in different situations.
While creating a design system, I always start with the basics like the colors, fonts, and the magic number for marges. In Shell situation, the app was already there, so it was easy to fill those in. After you set the basics, the designers can start creating new features. Every time a designer makes a new feature, the new components are added or updated in the master document.
Testing
While working on Shell station locator, I had a chance to test designs more extensive than in small companies. At that moment, I saw the real usefulness of testing. I believe that regular testing is good for the product but also personal development.
Learnings
So how do we make teams design coherent? We create a system with enough freedom to develop new features and enough rules, so the whole app feels the same, while multiple people work on it. Then test it and make sure you covered all the cases. Make sure that the product vision is evident in the system. Inspire instead of rule.
