Design System Revamp

Duration
6 Weeks

Role
UX/UI Designer / Researcher

Platform
Android, iOS, Web

This is a project I did while I worked at Wongnai (Thailand's Yelp).

Problem

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. Changing the theme, creating sub-design systems should be easy.

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.

Breaking down Facebook App's Buttons, Text Size. Diving deep into things such as which text size is used in combination with a certain button height etc.
Breaking down Facebook App
Breaking down Dianping App.

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.

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

We used to make things small, to cramp as much stuff into users’ eyes. It makes the UI messy and clustered. We’re changing that philosophy. Each element can and should take as much space as needed. The UI can be bolder as well. This makes it clearer to the users about what we want to say with the design.

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.

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.

Design System 2.0 in Action

Sample Designs


Desktop Web