Disaster of designing without a style guide
So i joined Kaodim in January 2018 as a Product Designer that in charged in designing all the platforms like mobile apps, websites and admin dashboard.
I still remember my first month was to understand the product, processes and also adapting to the new environment. Yes, less design work. But when I slowly involved myself in designing, my nightmare happens.
Where the fuck is a style guide?! I asked myself repeatedly.
I’m not even expecting a design system, merely just a simple UI guideline. Apart from all the screens design in Sketch, all i got was a chunk of symbols created in Sketch (thank god there’re still symbols). But I’m not kidding with you, the Sketch file is way much messier than my room. 🤮
A style guide is extremely important in large scale and long term projects, especially we have to deal with this on a daily basis.
Everytime when I design, I feel kinda lost because one single component consists of different variations of design. Let me give you an example, there can be more than 5 button designs within the working file, and it’s different from the one in the actual app. Different height, different font size, different radius corner, different colours. When I moved to web, I see another set of different design again. And another very apparent issue was that some of the components are not scalable to cater for the upcoming feature requirements.
So how the fuck should I design? I’m clueless on the rules like what to follow and what not to. You can’t be like “Oh its alright,I’ll just copy one of the component from the other screens and use it” As a designer, you can’t design without understanding your own design.
Designers out there, if you reading this I hope you can feel my frustration at that point.
And after that we got another new team member in the design team. Without any surprise, he faced the same struggle as me and I knew we can’t take this issue lightly and something need to be done no matter what.
So the design team(it’s just two of us) initiated to take this opportunity to do a clean up of the previous design and create a UI components guideline.
We spent quite an intensive day in meeting room, start laying all the existing components out to see which works and which doesn’t.
From colours (we can’t change this as this is already set in brand guideline), to typefaces, buttons, inputs, cards, icons, illustrations, tooltips, modal dialog windows, and so on. We removed all the redundant components, creating rules for the remaining ones and we also took this opportunity to introduce elements that is much lacking previously such as illustrations to provide a more delightful user experience. (My team mate, Prasil wrote an article about this, check it out!)
And this is what we created after a few days. But of course, this is still the work in progress and from time to time the design team is still polishing up and adding more components when it’s necessary.
All the components are already created nicely as symbols in Sketch, and I spent few weeks on and off, to replace all the old components with the new ones. With this style guide, the design work felt so much easier and faster. Because we now have the full visibility on the design in one glance.
Moving forward we are also looking to develop this using Invision Design System Manager (DSM). Tried out other few tools like Lucid, Lingo but so far none of them met our requirements yet.
Before I end this, I would like to share some of the key benefits of having a style guide:
1) Design Consistency
It will provide a consistency across our design. Especially when you have to collaborate among the design team, this is extremely important to ensure all the team members are aligned. Or else you will be seeing various design created by different designers based on their own liking.
2) Faster Way to Design
Creating symbols are not enough because sometimes our Symbols page can be really messy too. With this style guide, all the components are properly categorised and easier to look for the components that we need.
3) Smoother Onboarding Process
This comes from my own experience. Moving forward we can use this guideline to onboard the new team members. At least this will better guide them on how to start. Instead of just irresponsibly throwing them into a jungle and ask them figure out the working files themselves.
4) Handoff for Engineers & QAs
“Hey designers, is it #ffffff or #fcfcfc?” — Engineers / QA
Sounds familiar? With this style guide, we told them to skip the hassle of inspecting every single elements. Always refer to this style guide and you will never go wrong, unless stated otherwise. To ease their work in the future, the engineers also decided to build their own library.
Previously all the components are built differently on every pages, which means if there’s minor design tweak, they would have to revisit all the pages and change it one by one. With that being said, it also contributes to the current problem on our product where you will see the same component but being displayed differently across pages. For example a rounded corner button in Page A, and a sharp corner button in Page B.
But undeniably speaking, this style guide is just a start, ideally it should continue expanding and establish a solid design system that belongs to the company.
Here are collections of some amazing design system: https://github.com/alexpate/awesome-design-systems
I hope you like this article and please feel free to comment to let me know what you think or you have some better suggestions for us to improve on.
Thank you for reading.
