Architecting OY! Design Language System
Background Story
As alluded to in our previous article (https://medium.com/oyindonesia/evolving-oy-payment-feature-49aa8a150dcb), we were rebranding our app from a chatting to a p2p payment application. At that moment, our design team didn’t have a proper Design Language System (DLS) yet 😅. We began the journey of crafting our own DLS with these questions in mind:
- Why do we need it in the first place?
- What is the expected outcome/benefit?
- How did we start on creating the DLS?
We knew we should have it not only because we were rebranding at the same time, but also because we want to make clear guidelines for our design process.
Design Language System
It is a set of rules or guidelines that heightens the level of harmony in a digital ecosystem. — UX Planet
There are many benefits from having our own DLS; one of them is having a more consistent design. Since we did not have our own DLS, we have this kind of problems:
Only just for our “next” button, we used 3 variations in which sometimes the button use gradient color, sometimes the button has shadows, and sometimes the button has a different height. The worst thing about this is that we did not specify what purpose each button served.
These inconsistencies did not only confuse our designers but also our frontend engineers and our users.
Before we started crafting our own DLS, we want to know every existing DLS from all of the established companies out there. To that end, we visited all of the DLS at designsystemsrepo.com to learn and get inspirations.
The Process
The process did not only involve the design team but also our front end engineering and marketing team. Communicating our intention to create our own DLS with the marketing team is essential to ensure that our DLS aligns with the message that they want to deliver to our users.
Choosing the colors and font styles that we want to put in our guidelines is the center of our focus discussion with the marketing team.
“Simple and Clean”
That is the kind of impression we would like to expect from our user when they see our product. In our previous design, we used blue color and we want to keep using this but with a stronger presence. For our font style, there are many alternatives but we chose “Nunito” because it’s easy-to-read and very attractive sans serif typeface with a wide variety of weights.
In terms of tools, these are the ones we used when we created our DLS:
For sketch, we used plugins that are suited with DLS creation, i.e. runner, symbol organizer, and paddy. One of our favorite tools is Zeplin because they recently announced Global styleguides feature and thus, our DLS can span across multiple platforms & projects. This is very helpful because previously, we could only export one styleguide at a time. Last but not least, not only did we use Abstract as a repository for our sketch files but we also used it to collaborate with other designers since it has a feature that can assign a sketch file to a library file.
Our frontend engineers are very enthusiastic when they heard that we want to create our own DLS because previously there were problems when using assets for our product. One of them is that the assets were not reusable and thus, it caused our app size to increase. For example:
On the above, you see that there are 3 “X” icons with different colors. Prior to having our own DLS, this is wasteful for our designers because we always provide the same icon but with different colors. Thus, we created a workflow in which a designer needs to only provide a single icon and when there is a specific page that requires that particular icon with different colors, our engineers will customize it accordingly. Not only does this workflow has helped in organizing our assets, it has also helped in reducing our app size too.
The Result
As we develop more feature in our app, our DLS will be updated with more foundations, components, and assets; our DLS motto is “Consistent within Flexibility”.
Above is a comparison of our old vs our new interface; it is clear to see how much our interface has evolved to something that is more “simple and clean”.
Every DLS has its own name, ours is called “Fortune” and yes, the logo at the top of this article is the logo of our DLS and the name itself is well-suited for a payment product like ours.
Conclusion
Creating our own DLS was an amazing journey, the collaboration between all teams, through failure and mistake, and how the universe is supporting us. There are many things that we still need to learn and improve to create the best DLS for our product and we look forward to future challenges that require us to iterate on and be more creative with our DLS.
Pssstt…. since we rolled out our rebrand, our DAU, engagement and even our transactions count have since jumped by 16–40%.
Want to experience the most seamless payment experience? Try to download OY! in Google Play and App Store and please feel free to give us feedback about it 👌🏼.
