Award badge icon

RGD Honourable Mention for the Quake Award for Innovation

Mobile App
Web Design
Product
Branding

Kumo

Monitor your breathing experience.

png of Kumo home page app screen and the kumo mask

My Role

Team Lead, Ideation, Research, UI/UX Designer, Web Designer,  & 3D Video Animation

Timeline

October to December 2020

Tools

Figma, Adobe Illustrator, Maya Autodesk & Premiere Pro

Team

Benya Sutyanyong, Jessica Dou & Jasper Tu

Brief

In a world where most people interact with pollution, dust and pollen every day, taking care of your respiratory health can be difficult. Prolonged exposure to airborne particles have been linked to many potential health problems and can trigger people with underlying conditions such as asthma.

The Problem

Blue bullet point

Pollution is a global issue

Blue bullet point

The past pandemic

  • Mask-wearing and good respiratory health awareness has become the new norm.
Blue bullet point

Wearing a mask is difficult for children and people with respiratory difficulties.

Solution

Kumo aims to help people with respiratory concerns, by providing them with a convenient and easy-to-use duo mask and digital medium to monitor its use.

Research

Through secondary research and analysis, my team gained an initial understanding of the target user and a breath of possible users. Our main problem was analyzing how people that: lived in polluted areas, worked in factories, had respiratory barriers, or allergens interacted with their environment.

While considering our users’ goals and barriers, we strove to brainstorm possible materials that were also environmentally friendly. We also sought to understand how users would use the mask with and without the app.

Branding

Before we began prototyping and developing the app and website, we developed a style guide to ensure that all our design elements were cohesive.

The colour scheme centred around a user-friendly blue to establish reliability, which is often associated with health products. Our complementary colours tended to be neutrals with brighter colours for urgent notifications.

Kumo branding palette i.e., colours, logo and font choice

Product

Kumo is a smart mask that streamlines your breathing experience. The multi-layered customizable filtration system protects against pollen, debris and viruses.

animated gif of kumo mask
Blue bullet point

Comfort for all

  • Mask edges are made out of biocompatible silicone with high elastic strength.
  • The soft, malleable material offers a tight and flexible fit.
  • The masks domed structure sits a secure distance from your face.
  • Three mask sizes with customizable straps.

Packaging

Kumo packaging designKumo packaging designKumo packaging design

Companion App

Site Map

The app’s site map focused on usability and simplicity.

Kumo Application Site Map
Blue bullet point

Key features

  • The target audience for this app is both individuals as well as people with dependents.
  • Monitoring and keeping track of the medicine/supplements you have in your home.
  • Provides alarms and/or notifications for upcoming supplements or prescribed medications.
  • Notifies you when your medicine/supplements expire.
White Bullet Point

Key features

  • The target audience for this app is both individuals as well as people with dependents.
  • Monitoring and keeping track of the air quality and pollutants in your area.
  • Tracking your breathing rate.
  • Provides notifications for daily health alerts, such as high concentrations of pollen during allergy season.

Onboarding

The first time a user opens Kumo, they are prompted to set their concerns and input their (and any dependents) masks or devices.

An animated gif of a user going through the Kumo application onboarding
Two still images from the Kumo application onboarding

Home Page

Your home page lets you easily customize cards such as: tracking breathing rate, pollen, dust and mold quality, the flu and reported Covid cases/news.

An animated gif of a user going through the Kumo application Home Page
2 Stills from the Kumo app Home page

Devices, Notifications & Account Information

View the battery health of your filters or masks, add dependents and edit your mask information. Share exposure or breathing rate insights. Check your daily notifications and warning reports.

An animated gif of a user going through the Kumo Devices, notification and account information section
2 Stills from the Kumo app Devices, Notifications and Account Information section

Promo Website

A promotional website is key to the success of a product. It builds a connection with the customers, increases brand credibility, and attracts the interest of a global audience.

Static image of Kumo's promotional website

Reflection

Kumo was my first paired physical product and application that relied on close teamwork. It showed me the importance of understanding the context as a group and brainstorming as many ideas as possible.

As this project was designed remotely, due to COVID, it was a challenging experience, especially when testing and experimenting with materials.

Blue bullet point

Make sure everyone is on the same page

An important aspect of teamwork and management is making sure that everyone takes part in and is aware of decision making.

Blue bullet point

Explore as many solutions as appropriate

Test out as many options as possible and push your ideas as far as you can.

Finding solutions relies on heavy testing and understanding how the user interacts with the product in different circumstances.