Covid Kit - UI/UX - Full Stack
Duration - 1 month
My Role UI/UX Designer, Developer
Design - Adobe XD, Adobe Illustrator, Adobe Photoshop
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.
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.
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.
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.
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.
After completing the information architecture, I started to work on the user interface and visual design.
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.