Creating a Design System in Sketch
Softonic.com had accumulated years of legacy design. There was no consistency between the main UI components, and this was affecting user experience and delaying design & development time to market. Our goal was to dramatically increase the appearance of unity to the end user and speed up the time to design new features, pages, etc, while we experiment with Sketch and the creation of a Design System.
DEFINING THE GUIDELINES FOR OUR DESIGN SYSTEM
We started defining why we were doing this. The business was working well, but we really needed to justify time investment in this area. So we defined three main goals:
- Promote UI consistency and cohesion: From the visual design side (what will our users see) and from the internal design process (How we will work internally as a design team).
- Faster way to go to production: Roll out more features and iterations faster than ever. People from product and business really liked this benefit from a design system.
- And finally, have a shared vocabulary: With the vision to spend more time collaborating with engineers in building new features and less time in meetings defining specifications.
"The objective of our design system is UI consistency & cohesion, faster way to go to production and to have a shared vocabulary"
PARAMETERS OF THE SYSTEM
The work really started reading the book Design Systems: A prctical guide to creating design languages for digital products by Alla Kholmatova. Thanks to the book we realized that first of all we should define the parameters of the system we wanted to design.
We used three attributes: Strictness of the rules, Modularity of the parts & Distribution of the organization in order to define some basic guides/parameters to have always in mind when designing any new component.
Strict vs loose:
- We are still creating the design system so we need to be flexibles.
- If we are too loose, we’ll not be agile.
- We need to build modules for specific context.
Centralized vs Distributed:
- UX/UI Design team centralized.
DESIGNING FUNCTIONAL PATTERNS
We started conducting an interface inventory following the process described by Brad Frost, and noticed more inconsistencies than we expected. In this step we were working together with Engineering team because they were also unifying their components and migrating them to Marko.js.
DEFINE SHARED LANGUAGE
We continued by describing a shared language based on BEM naming (unless we were not strict with it) in order to allow every member of the team to easily understand the structure of any UI component we design and then we use in production.
We also have been very stricts with the layers; naming every layer and using emojis in order to make easy to identify the content of every layer: Image, text, etc…
DESIGN ALL SYMBOLS IN SKETCH
Finally we started to work with Sketch to create all the symbols. It has been time-consuming, a little bit frustratting but really enjoyable. We decided to have a master file hosted in Google Drive were all the team can work with (previously we also tested tools like brand.ai but they were very unestable and we decided to go with more solid solutions).
We designed all the defined components using symbol overrides and designed a UI Framework file with main components, ready to be used in any new feature, page, etc.
WHAT WE LEARNED
- To Create a design system is something hard and something always in progress, we still have to define design Principles, font-family, etc..
- To have a shared design language helped all the team to work faster and better. Also the development time has improved.
- It has been an amazing experience, we all had the feeling that we were doing a MUST DO job for any digital design department,and that it was the way to work.