Olga Khvan
Almaty Urban Air (AUA)

The AUA mobile application helps to monitor air quality and increase public awareness about the issue of air pollution, creating the basis for better city planning and decision-making practices.

Air quality monitoring is needed to determine the sources and measure the extent of air pollution since it directly affects the health of people. Changes in the air quality cannot be traced without a systematic and comprehensive monitoring.

My responsibilities
End-to-end mobile app redesign


Timeline
2017, 2 weeks
Team
1 Designer (Me)
1 Art director

I was working on this project being a designer
in Étage group
Brief

AUA was released in 2015 by non-profit organization Common sense that is based in Almaty, Kazakhstan. At that moment app showed pollution rate and its change over time (graphs) only from one device for one city.
Client wanted to expand AUA's functionality to showing different type of measurements from multiple devices and cities.
Current app assessment

I did assessment of the existing app, including quick usability testing inside our team. It turned that to go to another screen, users had to swipe. So every time they need to switch to another screen, they do swipes. Users said that it is quite annoying, because they had to do a lot of extra gestures.
Informative screens were full of descriptive text, which did not change. So at some point users became blind to it.
Share button was not noticeable for users. So they did not really engage with the content.

Things to improve
1. Navigation
2. Engagement
3. Content
Design
Main screen

We had positive from feedback from users on interactions with main screen, so I kept metaphor of gradient being a sky and overall layout of elements.

I've changed tone of colors to those that better map clear
sky<—>pollution and have higher contrast with text.

Share button

I tried to find more suitable way for share button, so that is noticeable. I moved it over different positions, but based on inner testings, it still was not clear for people what did they share.

Finally, I've put it right next to the pollution rate, so it is discoverable and clear which information is shared.

Changing the city
In previous version city name stayed in the top and users found it convenient at got used to it. I've decided to leave it on the old place and added visual affordance showing that there is a dropdown to access other cities.
Map
Each city has a map with places with measuring devices. Clicking on certain point, user can see other types of measurements and general info about types of pollution particles.

I've decided to not bring static information to the front and keep it as secondary action.
Graph
To see graph for different type of particle now users don't need to switch to different graph: they can just select it.
Now graph can be accessed in multiple ways:
— From main page
— From certain type pollution rate page
— From information page

Less linear structure helps to have "circulation" of user flows and prevent having "dead-ends".
Check out prototype