DESIGN SYSTEM FOR INTERNATIONAL TEAMS, FOUR PROJECTS IN TWO MONTHS

WUHAN 2020

Learn more about the project

Overview

THE CHALLENGE

I joined this open source project when Covid-19 started spreading in China. Wuhan, the city where everything started, was locked down. On one side, we saw the news and messages from people who needed help. On the other hand, we saw people who were eager to help but didn't know how to.

THE GOAL

We wanted to create an information platform that would allow those who needed help to meet the people who could match their needs. We also wanted to enable more tech workers to speed up their design and develop processes by using the open-source assets: data, design system, information.

WHO WE SERVE

Medical workers, patients, volunteers, and the general public.

MY ROLE

As a UI Designer, I worked closely with other designers, developers, PMs, data scientists over four individual projects.

My part started with the design system for Wuhan 2020. Then, I participated in designing a Covid-19 tracking app, a web page for the Wuhan 2020 Hackathon, and Against COVID, a website that helps U.S. health workers.

As a UI Designer, I worked closely with other designers, developers, PMs, data scientists over four individual projects.

My part started with the design system for Wuhan 2020. Then, I participated in designing a Covid-19 tracking app, a web page for the Wuhan 2020 Hackathon, and Against COVID, a website that helps U.S. health workers.

THE RESULT

We launched the Wuhan 2020 website within two weeks. So far, it had over one hundred thousand unique visits. The project had 6331 stars on GitHub. More than 3000 volunteers from all over the world joined the cause. After the Hackathon, Wuhan 2020 is now an active community.

Start with the Design System

1 DESIGN SYSTEM FOR 8 PRODUCTION TEAMS IN 2 DAYS

When I joined the team, the core funding team had kicked off the project two weeks ago. To speed up the design and development process, we had 8 production teams working on the website simultaneously. For consistency and efficiency, we decided to jump-start the project with a Design System.

I proposed to use Figma as our main design tool. For the sake of speed, we decided to use Alibaba's Ant Design System as our base and customize the components for branding and special needs.

With another designer and a Figma developer, the three of us customized the Design System over a weekend. Then we immediately started to support the other teams for the implementation and kept iterating the system.

When I joined the team, the core funding team had kicked off the project two weeks ago. To speed up the design and development process, we had 8 production teams working on the website simultaneously. For consistency and efficiency, we decided to jump-start the project with a Design System.

I proposed to use Figma as our main design tool. For the sake of speed, we decided to use Alibaba's Ant Design System as our base and customize the components for branding and special needs.

With another designer and a Figma developer, the three of us customized the Design System over a weekend. Then we immediately started to support the other teams for the implementation and kept iterating the system.

We kept collecting feedbacks from designers and developers, iterating and maintaining the system as well as creating new components for particular needs.

In two weeks, the big team launched the MVP of the website. For all the volunteers who worked intensively over the past month, it's both a success and a relief.

The Tracking App

3 ILLUSTRATIONS IN 1 DAY

After launching the information platform, I jumped into the design of a Covid-19 Tracking App inside WeChat. The app aimed to showcase the number of confirmed cases within 5 miles from the user's location.

At that time, the design team had finished the first version of the MVP. They needed some quick illustrations before handing over the design to the development team.

I happily stepped in and created three tailored illustrations in one day by customizing illustration components I managed to find online. The illustrations were used for three scenarios to indicate the chances of getting infected and provide protection suggestions accordingly.

After launching the information platform, designers who wanted to keep contributing moved to individual projects under the big umbrella.

When creating the design system, I had the opportunity to support Yalu's team implementing the components. Yalu was working as the Design Lead for the entire project. I loved her clean and functional design style. So I reached out to her asking if I could help with other projects.

She was leading the design of a Covid-19 Tracking App for the WeChat platform. The app showcase the number of confirmed cases within 5 miles from the user's location. Users could use this as another layer of protection.

Yalu happily took me in and asked me to help with the illustrations. At that time, the design team had finished the first version of the MVP. They were working on illustrations and some small iterations before handing over the design to the development team.

After launching the information platform, I jumped into the design of a Covid-19 Tracking App inside WeChat. The app aimed to showcase the number of confirmed cases within 5 miles from the user's location.

At that time, the design team had finished the first version of the MVP. They needed some quick illustrations before handing over the design to the development team.

I happily stepped in and created three tailored illustrations in one day by customizing illustration components I managed to find online. The illustrations were used for three scenarios to indicate the chances of getting infected and provide protection suggestions accordingly.

Design for Hackathon

3 WEB PAGES & 1 DASHBOARD IN 1 WEEK

In a short time, Wuhan 2020 had attracted a lot of attention in the industry. The team decided to kick off a Hackathon to bring more people in. I have tasked with designing the web pages for the competition.

This seemingly easy task had hidden challenges. When I joined the project, the hackathon team already started recruiting candidates. It's a one-week project, the teams' focus was mainly on social media. To help their work, I switched my focus as well.

In a short time, Wuhan 2020 had attracted a lot of attention in the industry. The team decided to kick off a Hackathon to bring more people in. I have tasked with designing the web pages for the competition.

This seemingly easy task had hidden challenges. When I joined the project, the hackathon team already started recruiting candidates. It's a one week project, the teams' focus was mainly on social media. To help their work, I switched my focus as well.

To better illustrate the Hackathon's impact and progress, I turned the data into a dashboard so that readers can get the information at a glance.

The dashboard visualizes the data of the Wuhan 2020 Hackathon: count down, countries, participants, teams, media coverage, juries, progress, etc.

Against Covid in the U.S.

4 RESPONSIVE WEB PAGES IN 2 WEEKS

In March, the situation in China began to die down. No one expected that New York would become the new epic-center for the pandemic. When Wuhan 2020 had the new idea of bringing the resources and experiences into building a website to help U.S. health workers, I immediately jumped in.

With another designer, we designed the first MVP for the website in two weeks. When we just started to develop the website, our PM told us that the U.S. government had stopped import PPEs from China. I was disappointed to see the product wouldn't be able to launch, but I was happy to see other people had taken the same initiate to help the health workers.

In March, the situation in China began to die down. No one expected that New York would become the new epic-center for the pandemic. When Wuhan 2020 had the new idea of bringing the resources and experiences into building a website to help U.S. health workers, I immediately jumped in.

With another designer, we designed the first MVP for the website in two weeks. When we just started to develop the website, our PM told us that the U.S. government had stopped import PPEs from China. I was disappointed to see the product wouldn't be able to launch, but I was happy to see other people had taken the same initiate to help the health workers.

Key Takeaways

Lessons and reflections

STAY HUMBLE, STAY OPEN-MINDED

The best lessons I learned from this project were from the amazing people I was fortunate to work with. We were united by the same social cause and had become friends over the project. They were humble, hard-working, and open-minded. We gave and solicited feedback from each other and kept raising our bar for quality.

WHEN DESIGNERS AND DEVELOPERS SUPPORT EACH OTHER, IT'S LIKE MAGIC

I attribute the success of our Design System to the way that we collaborated. We learned a lot by looking at how Joey (the Figma Developer) wrote some codes and helped solve a headache here and there. It's like magic. As designers, we helped him to build a better product.

WHAT TO DO NEXT

Since it's a volunteering project, it's a bit hard to control the quality. If possible, I would love to work with a front-end developer to make the end product pixel perfect. I also want to dig into data and see how users interacted with the products and identify pain points for iteration.

Browse More Projects

Decentralised Clinical Trial Platform

Product UX/UI Design

Breethe

Product Strategy, UX Redesign

A Design System for 14 Engineering Teams

End-to-end Design System, Team Collaboration

I'd love to create something wonderful with you, say hi.

Thank you for visiting my portfolio. Have ideas? Suggestions?

Email / LinkedIn / Resume

Thank you for visiting my portfolio. Have ideas? Suggestions?

Email / Linkedin / Resume