Covid Kit - UI/UX - Full Stack

My Role UI/UX Designer, Developer

Demo Video


Tech Stack

Design - Adobe XD, Adobe Illustrator, Adobe Photoshop

Front End - JavaScript, WXML, WXSS

Back End - Python

Development - WeChat Mini Program SDK, VSCode

Visualization - Apache ECharts


In this project, I took COVID-19 as the topic. I started with the HMWs to find problems and design opportunities. Based on the problem’s importance, social impact, and creativity. I chose precautions as my starting point.


Experience Mapping

I drew an experience map to help me establish a baseline understanding of an ordinary person’s experience when searching for COVID-19 precaution information.

Experience Mapping

User Research

To better understand the behaviors and pain points of potential users. I designed a survey based on the experience map, then published it on a survey site. I received 210 replies, of which 193 were valid. Here are some key findings.


Product Strategy

Based on the survey data I received, 78% of survey takers mainly use social media, like WeChat to gain information about COVID-19. So WeChat Mini Program is a good place to share this information. Also, we can use the user’s internal social network on WeChat to promote our app.

Product Strategy

Information Architecture

Before starting to design the interface, I firstly specified the information architecture because it’s going to save more time in the future. I listed all the resources and pages I need to build this app and prioritized them.

Information Architecture

Hi-Fi Prototype

After completing the information architecture, I started to work on the user interface and visual design.

Hi-Fi Prototype

UI Specs

UI Spec


I developed this project using WeChat Min Program SDK. I also used a Python crawler to collect COVID-19 data, such as COVID cases, relevant videos, and FAQs from multiple websites. Finally, I deployed the beta version of this app on the WeChat platform.



  • There are some differences between development and design. Designers and developers should have a basic understanding of each other’s work to collaborate seamlessly.

  • Optimization is very important when fetching and rendering huge datasets.