UI/UX Design

KawalCOVID19 is an initiative made by Indonesians to educate fellow Indonesians about this pandemic situation. I was the first designer on the intiative and was responsible for redesigning the website, both desktop and mobile views.

My first task was to create new color schemes for both light mode and dark mode.

Color palette used by KawalCOVID19

I ended up using #22272C as the base for the dark color, and gradually making a gradient into #FFF. The color for the data was based on KawalCOVID19 logo color. I feel it was too intimidating so I create a new palette that was contrast enough to be used in both dark and light modes.

I also changed the typography. The old one was relying on system fonts. I changed into IBM Plex as they have a complete family and their IBM Plex Mono was really legible to be used as a data font.

The real changes was the information architecture and navigation.

KawalCOVID19 website: Old vs New

In the old website (left), the navigation was put on the top side of the website. It was hard to reach because it was outside of the “thumb zone”. I changed it into a bottom navbar (tabbar) so it would be easier to reach.

The hardest part was to organise the contents. The team wanted to have multiple categories for their articles and wanted all of the categories be visible and clickable. Since dropdown/dropup is too messy and requires several clicks, I decided to make it into scrollable tabs.

There were also several recommendation for the website, such as filtering the data, searching for locations, etc. You can see the details in the Figma prototype below:

Other things I did:

  1. I managed to secure a tool donation from Figma, the Professional plan, to be used by all of the designers and developers of KawalCOVID19. We can now use our own personal account to contribute to KawalCOVID19.
  2. I created the basic styleguide that can be used to kickstart other projects, such as mobile apps and web apps.