MOS Design System
Role
Design System
Overview
Ever since the making of the application has kicked off four years ago, we've been all into a mission to build the dream software for our customers, trying to bring tones of ideas to life and we've been really hard at it. During the course of years, we've shipped the MVP, followed by features after features, and the number of users were growing. But as the app grew in scale, we've started to notice problems being emerged here and there. That's where Design System would come in to play.
Problems
Among others, there were the big issues that not just designers including myself, but every team members were facing:
- Inconsistency on UI elements and languages
- Inefficiency on designing - We were creating same solutions over and over again
- There was no rules and principles to defend from constant request to change
- Lack of system also resulted in an inconsistency on feature workflows
Some of buttons from the app. Inconsistency on UI elements are evident.
Bringing Orders To Chaos
From a couple years ago, my co-designer and I started to notice that the term 'design system' started to be top discussion among design communities and blogs so we paid attention to it. The idea was not new - bringing orders to chaos. It's the diligent attempt to sort all design elements and arrange/categorize them and back them with guiding principles. We've immediately realized that this is what we needed. It may not be 'the solution' for all our change, but it would greatly aid our design process and make positive impact on our team and the product.
From Foundations To Components
So I've began by studying design systems and researching how other established companies built them - say Lighting System from Salesforce, Cargo system from IBM, Atlassian design system and even from Starbucks. While I was doing the research it felt like it was only our company that lacked the design system 😓. I then began by building the foundations of design systems: colors, typography, icons and grids. While doing it, I've had an opportunity to review all our designs and, boy what a mess, everything was everywhere and too much. Following this quote, 'best design is not when there's nothing more to add, it's not when there's nothing more to take out', I've started to eliminate what's seemingly unnecessary colors, font sizes and icons, and organized them. Sure I would be asked to add some of them back but I would then use the design system as a weapon to defend my choice.
After establishing foundations, I've started to construct components. I would apply foundations on components and I've immediately felt 'secure' and 'neatness', as opposed to randomness, on UI elements. I had a guiding principle to put 8px spacing between the two buttons, not 'make this spacing wider because it feels better' kind of thing anymore. Paying close attention to all the design details, laying out all user's interaction states and in-app messages were what felt like real service to the people, which gave me a sense of big accomplishment.
Foundations of Design System
(Some of) Components
No Design is Too Small
While I worked on the design system, I've learned a lot from them but here's my take: no design element is too small. There's a guiding principle on what's been seemingly seen as 'designer's sense'. Sure UIs need to be aesthetically pleasing to users but all design elements are carefully structured by thoughtful considerations of all aspect of 'people': emotions, context of usages, their conditions and their needs. User interfaces exist to serve the best user experience. They can't be separated.