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 keep its minimalistic to make the system easy to use. I also ensure that all decisions are logical and systematic.

Updating ! This post is being updated. It might take a while since creating a design system has been a long process.