top of page
Statue with Mask



🏆 Microsoft Imagine Cup 2021 China Grand Winner & World Finals Top 12 Winner


project OVERVIEW

Improve the UX of mask communication

Responsibility: User Research, Data Analysis, Concept Design, Visualization & Usability Testing

Keywords: IoT, inclusive Design, Wearable Devices, Natural User Interface, UX Research

Duration: 3 months


How to enhance the experience of communication under the mask?

In 2020, the impact of the COVID-19 has changed our life and wearing a mask has already become a new normal. People with mask looks colder and less motivate to communicate with others. Wearing mask, the sound became muffled, hard to read emotions from face. For the hearing impaired the situation is worse, they cannot read lip covered by mask. As a result, social interaction and motivation were negatively impacted, inspiring us to seek a solution.



Redesign the mask through AI and emoticon communication experience

AI Mask Based on Semantic Extraction and Emoticon Communication

Situations without Wellmask

Situations with Wellmask



Questionnaire on Mask Usage

In December 2020, We initiated research to better understand how people feel about wearing the mask in social commnucation senario by questionnaire students and professionals.​​​​​​​

In the needs analysis stage, we conducted a questionnaire, and recovered 161 surveies, asking the attitudes of people in all walks of life on the communication dilemma of masks. More than half of the participants said they were troubled. 

41.6% of people wear a mask for about 1-5  hours a day. 46.6% of people reduced the amount of time they spoke because of wearing masks. 34.2% of people spoke less often because of wearing masks. 

Most participants reported when they wear masks, they would face: Difficulty in observing people's emotions, Difficulty in hearing what people are saying, Difficulty in determining whether someone is talking or not.

piechart_画板 1 副本 2.png

Difficulty to tell

if someone is talking

piechart_画板 1 副本.png

Difficulty in hearing what people are saying

piechart_画板 1.png

Difficulty in observing people’s emotion

User Journey Map

Analyzing Behavior & Experiences

We created a user journey map, including a student persona, to see how users might feel when they conduct social interaction with masks and how their tasks, thoughts, and challenges change according to the different stages of social interation.

User Journey Map

Design Synthesis

Painpoints & Design Opportunities
Design Synthesis_Information.jpeg

- The muffled words through facial mask make information uncertain

- Unseen lip movements make speaking status uncertain

Design Synthesis_Emotion.jpeg

- Mask makes people looks cold

- Hardly convey facial expressions

- Cannot convey the extra emotional info of words

Design Synthesis_Communication.jpeg

- Easily missing key information in noisy environment while wearing mask

- Observing emotion is a challenge

- Communication gap amongst the hearing impaired and others

Design Synthesis_Accessibility.png

- Inability to lip read and observe facial expressions while wearing the mask

- The risk of social isolation​​​​​​​


Concept Generation

Design Princips

In this case, we found that Mask is not only a daily protective equipment, but a natural microphone closed to our mouth; And also, the surface of the mask is a perfect interface to present visual stuffs.​​​​​​​

Through voice recognition, the key information is symbolically expressed on the mask, alleviating or even eliminating the hindrance of communication.

Design Princips
Visual Experiments

After deciding how the information will travel through social interaction, I researched the overall visual look and feel of the informative symbols. Based on the corpus of mask usage communication scenarios, Extracted high frequency keyword and analyze the intention and displayed as the global language: emoticons. Conveying key info while extra-verbal emotions. The internationally accepted emoji information crosses the barriers of communication and presentation brought by language, elevating communication from the language level to the intention level.​​​​​ 

“ Emoji is incontrovertibly the world‘s first truly global form of communication…It's even a 'new universal language'...”

                                                                         Vyvyan Evans​​​​​​​

We allow users to customize their own patterns on the mask. To cover most daily usage, I designed three categories of emoticons:​​​​​​​ 

Emotional Expression

Semantic Expression
Functional expressions

Visual experiments

WellMask developed the Online Training and Distribution Model based on Azure Platform. 
New corpus and customized features can be download through the Bluetooth connection.
A built-in voice capture module chip can support the Offline Usage Model. 
Integrating LED matrix without compromising safety and convenience.​​​​​​​



The working flow is: Firstly, the voice chip will record what you said; Secondly, relying on the Azure platform, we use speech-to-text and semantic extraction to convert key information into corresponding visual symbols; And finally, present the visual symbols, the emoticons on LED lattice of mask.

Hardware Design​​​​​​​
Hardware structure
Visual Design

I created a brunch of branding products for WellMask consistent performance. Because it is an user-centered product, the design aims to give WellMask credibility to its users. 

Visual design
UX/UI Design

Welcome to WellMask APP
the easiest and happiest mask 
to wear to interact with people

The onboarding process is designed to connect users from mask of the app's concepts and needs to guiding their account without any tedious connections. When users wearing WellMask, the application will automatically scan and ask the user to connect it. All the data are visiable for users. New pattern package are available on the platform. Users can also create their own patterns on the mask.



Inclusion & Accessibility & Business

WellMask designed for everyone, even the hearing impaired can find a easier and happier way to communicate with others, WellMask can replace reading lip so that it help them absorb information.

For everyone especially
mutiple styles

To test the Accessibility, we used AttrakDiff evaluation.​​​​​​​


The AttrakDiff evaluation shows that the prototype achieves both pragmatic and hedonic qualities well.

We decided to test our concepts on subject experts, who had extensive experience in the field. In this way, we could at least gain some indication of whether our concepts were utilizable and relevant. The applicable concept was evaluated with the help of an interactive prototype and AttrakDiff, a scientific questionnaire measuring the usability, appearance, and design of an interactive product.


Based on the evaluation, the following themes arose as strengths:

- The social features were seen as interesting and novel.
- 16.7% of emoticons need to be understood within the scenario.
- 83.3% of emoticons can be understood correctly.
- 91.7% of participants said they would be willing to buy if the pricing was right.


Also, few areas of improvement were also noted:


- Some testers prefer LED sequins to LED display, especially consider about washable.

Business model canvas
Cost of materials table

what's next?

Functionally: We will optimize the function for different groups, such as adding lip recognition function for the hearing impaired

In visual design: Design more standardized icons for different segmented scenes, such as hospital scenes, buying and selling scenes

Our ultimate goal is to build a wellmask community,a platform which everyone can update the icon they design and sale it to others.

What I have learned?

Consider all the people, processes, and experience involved in one product. Interviewing the users as well as the requester using the current service allowed me to know new information and define how my design should function.

Also, when I think about the experience, I realized that it was only to make the current system a simple app, so I came up with an offline medium which is a chip can stored all emoticons information.

Back banner.jpeg
bottom of page