[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.
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.
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
The first thing users see when they open aeris app.
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:
Side menu would slide out from the left when we click the menu icon.
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 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:
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.
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 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.
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.
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.