Covid Kit - UI/UX - Full Stack

Jilie included in UI/UX Full-Stack

2020-07-07 363 words 2 minutes

Contents

Duration - 1 month

My Role UI/UX Designer, Developer

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

Problem

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.

/posts/covid-kit/2-map.png — `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.

/posts/covid-kit/3-stats.png — `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.

/posts/covid-kit/4-strategy.png — `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.

/posts/covid-kit/5-inforArch.png — `Information Architecture`

Hi-Fi Prototype

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

/posts/covid-kit/6-proto.png — `Hi-Fi Prototype`

UI Specs

Developement

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.

/posts/covid-kit/8-dev.png — `Development`

Takeaways

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.