Ye Han's portfolio
square.jpg

aeris app 1.0

UI/UX Design

[aeris app] is an app designed for products by Aeris Cleantec AG.
Primarily this app is designed for using aeris aura, the first generation air purifier. I closely worked with my co-workers to start designing this app from scratch (from pencil sketches, to paper prototypes, to final UI decisions, to programmers really making this thing happen) we got lots of feedbacks from colleagues, friends, and of course customers. There have been lots of failures, and lots of learnings. and this is our final result on our app 2.0 release - a more thoughtful, detailed, and health-oriented app.

Background
aeris app is trying to bring a smart solution to the traditional way of controlling an air purifier, making it easier for the user to control their device wherever and whenever they want. The focus of the app is switching from only controlling an air purifier to a more comprehensive perspective - a health-oriented life style app.

Designing the app
I was mostly in charge of the UI and part of the UX for this project. I worked closely with Kevin Steiner, the project lead for aeris app, and software team to make this app come true. Tools being used are: pen & paper, adobe photoshop, adobe illustrator, and sketch.

Conceptual model/ Objective
Providing the easiest and the most intuitive way for customers to control their air purifier while offering customers valuable options to improve their living quality and health standards.

Background introduction
aair is an innovative air purifier that delivers unparalleled performance in an elegant and stunningly quiet package. Combining cutting-edge air purification technology with proprietary intelligent software, aair sets an unprecedented benchmark for the highest air cleaning rate amongst same-size competing products. This app we are making is the smartness of the device, aeris app offers customers an opportunity to control their device and check the air quality whenever they want, and wherever they want.

Design of the App
Signing In
The first thing users see when they open aeris app.

UX flow of the signing in process: 1. phone number and password as the entry page of the sign in process, with sign in button at the bottom, and create account option for users who are new to aeris. Forget password option is available for users to retrieve their password. 2. new customers use phone number to get an account, which is easier for us

UX flow of the signing in process:
1. phone number and password as the entry page of the sign in process, with sign in button at the bottom, and create account option for users who are new to aeris. Forget password option is available for users to retrieve their password.
2. new customers use phone number to get an account, which is easier for us

Setting Up

When users first log in to aeris app, they need to set up their device, either aura or aair (aura is the first generation aeris air purifier), and after the setting up process, they will be able to get access to all the functions that I'll introduce later in this post.

Troubleshooting UI shares the same look as the device UI, users can get a direct link to the device and they know where the issues are:

Menu
Side menu would slide out from the left when we click the menu icon.

Summary
Summary page is a in-general gathering page for the entire app, the purpose of this page is to give the user a overall overview of the entire app, from device control, to air quality check, to insight of the status, to some health tips. 

Control
Control function is a direct and intuitive way for the user to interact with the physical device of aair. There are 3 modes included in aair:

Sleep Mode:    This is a low fan speed mode in which enables a low noise level of aair, customers are encouraged to set the device into sleep mode at night time or when they are sleeping, aair is still able to ensure the air quality in the room.    Smart Mode:    Smart mode offers a smart solution for customers according to the air quality, there's no need for customers to manually control the device, it will automatically switch through different fan speed levels to clean the air and to ensure the best performance.    Manual Mode:    There are 6 levels of manual modes involved, manual modes simply means that users can control the fan speed of aair, from the lowest, in which equals to Sleep Mode, to the highest fan speed, which can cleans 70sq meters area in 12 minutes.

Sleep Mode: This is a low fan speed mode in which enables a low noise level of aair, customers are encouraged to set the device into sleep mode at night time or when they are sleeping, aair is still able to ensure the air quality in the room.
Smart Mode: Smart mode offers a smart solution for customers according to the air quality, there's no need for customers to manually control the device, it will automatically switch through different fan speed levels to clean the air and to ensure the best performance.
Manual Mode: There are 6 levels of manual modes involved, manual modes simply means that users can control the fan speed of aair, from the lowest, in which equals to Sleep Mode, to the highest fan speed, which can cleans 70sq meters area in 12 minutes.

The UI of the control page is pretty straight forward, we don't want to create extra thinking process for the users when they are coming to this page, the ring design is to match the device UI on aair (please see pic below). We designed it in a way that reminds people about the device, so users would directly know how they are controlling the device right away. Inside the ring, we discussed to show the indoor and outdoor comparison of the air quality data, so that users would know directly whether or not their air quality is good, and they can control the device the way they want. For manual mode, we show 6 levels on the ring, again, straight forward to the users. All we want is simplicity, we don't want to bring confusions for the users.

device UI of aair

device UI of aair

Analytics
Analytics shows a history curve of the air quality, with comparison between outdoor and indoor data, giving users a straightforward and visual response toward the air quality. 

Options of PM2.5 and AQI are being offered since they are the most important ones that people actually care about in China, for Mexican market, we offer O3 as well because O3 pollution is more severe in Mexico. Users can easily scroll through the timeline in order to view the history or to check the current status.

Color choice

air quality index color of aeris app

air quality index color of aeris app

app UI color set

app UI color set

Color choice for the air quality index draws studies from the official air quality index, but we found it too bright for aeris branding, and we make the entire color set for air quality more subtle and more close to aeris app UI color set.

Device Management

User can see a device list which includes the devices they are controlling, the status of each device, and the remaining filter life. Filter life estimation gives users alerts and let them know when it's about time for them to change the filter. Original icons are created specifically for this app (please keep reading). Main page of device management is using the principles of card design as a basic, and users get to edit device name and device icon, to view device status and filter life estimation, and to order filters when the filter life is about to end. 

Program

Users can use program function to let aair know their daily schedule and living routine, so that aair can perform in the way that provides the best service to users. For example, users can set a program saying that they normally would be sleeping from 23:00 - 7:00 from Monday to Friday, and aair will automatically turn itself to sleep mode at the specified time range.

Setting

System setting of the app, users are able to change their user name, change notification settings, and switch language options.

System setting of the app, users are able to change their user name, change notification settings, and switch language options.

Icons