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:

  1. Inconsistency on UI elements and languages
  2. Inefficiency on designing - We were creating same solutions over and over again
  3. There was no rules and principles to defend from constant request to change
  4. Lack of system also resulted in an inconsistency on feature workflows
DS_Img-1@2x

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.

Port-Foundation

Foundations of Design System

Port-component

(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.