Problem and background

When I started at Wongnai. Aesthetics and visual design were never a priority. Then during one dinner event, the CEO mentioned to me that our design isn’t as good or nice when compared to another world-leading app. I took this as an opportunity to revamp our whole design system.

Wongnai has never had an app-wide UI revamp. There are many limitations to the existing pattern and the makeshift design system. To take the app to a new level. I created the new Design System by taking aesthetics, usability, consistency, and scalability into account.

Aesthetics: Our products should look nice and well crafted.
Usability: The products should also be easy to use.
Consistency: Aesthetics and usability take precedent but consistency will simplify our work. There are fewer decisions to be made since we follow the established standard defined by the design system.
Scalability: Adding new features should not break the design system. Changing the theme, creating sub-design systems should be easy.

Mini App Support
Wongnai is a super app that has several mini-apps inside the app such as an on-demand massage service and cooking recipe platform. Each comes with its own brand identity and brand color. Creating a design system for each mini-app would have been impossible to maintain. To manage the design at the scale we need one design system that can switch accent colors easily.

Dark Mode Support
At Wongnai we pride ourselves as a leading tech company in Thailand. Supporting dark mode is our ambition to showcase technical know-how. In the previous design system, we keep the number of colors in the palette minimum to make the design system robust. But we found that those colors are not enough to support dark mode.

Research

I study leading world-leading apps in what I would call a personal training montage. To learn how they make their products look so neat and pleasing. I look at how leading apps use typography (the weight, the sizes). I observed the sizes of buttons they use, how round they are, and the spacing they use. I study down to the pixels by using screenshots at 1x resolution. I suggest all aspiring UI designers do this to learn about the typical sizes of the elements on the screen.

Here’s a list of apps I looked at :
Facebook, Instagram, Twitter, Spotify, Google Maps, App Store, Uber, Uber Eats, Airbnb, Yelp, Pinterest, Dianping, Waimai

Basic building blocks

I started by experimenting with color palettes, spacing, button sizes, and text sizes. Once I have all the basics stuff I start experimenting.

I went through 5 iterations of grayscale colors. Creating the steps and testing it out to make sure the colors fit our need to support dark mode.

Accent colors have fewer steps.

I also experiment with icon size, text size, and spacing combinations. Every font is different in terms of size, line height, ascender, descender spaces. So there is no one rule that fits all.

Building and experimenting

To make sure all the pieces work and the selected color palettes and spacing system support all desired UI components and structure, I test the design system with actual designs. Making adjustments to make sure the basic building blocks provide enough flexibility and choices to make the system easily scalable. All the while, I try to limit variations and choices to make the system easy to use. I also ensure that all decisions are logical and systematic.

Outcome

Philosophy change

“I want to be above the fold!”
“Let’s add some more info to that card UI”
When designing these comments can lead to cumbersome UI. Stakeholders want their product to be above the fold and take precedent.

So we changed our philosophy, we used to make things small, to cramp as much stuff as we can into users’ eyes. This makes the UI messy and clustered. Each element can and should take as much space as needed. The user will scroll if they find the content interesting.

Giving ample and sufficient space to each section and element will help it shines the best and keep users interested.

The UI can be bolder as well. This makes it clearer to the users about what we want to say with the design.

Now the next time someone wants to be above the fold or add some extra text or badges to “increase their livelihood of success” we have this philosophy to govern that.

Theming the system

The new color table is robust and systematic. Giving us the capability to do a major thing like changing the corporate branding color with minimum effort. Also, opening up new domains by creating a sub-design system in different themes is now a breeze. The system can be themed to build other apps such as Wongnai Merchant App as well.

Revamped Dark Mode Support

There are many reasons to support dark mode. One being, it is what’s expected from top tech companies. (You would expect Twitter, Pinterest, Youtube, etc to support it.) With Design System 2.0 Dark mode support has been rethought from the ground up.

Flip Table

Dark mode support is done by using a color flip table. New colors if needed can be generated in the same pattern. This wasn’t as simple as reversing the color scale. Customizations are needed to ensure that the dark mode works but the table is here to help make dark mode support easy and scalable.

Extensive Dark Mode

Semantic colors and domain colors use the corresponding color flip tables. This allows us to supports dark mode at scale in a systematic way. A new sub-design system can follow the same formula without having to reinvent things.