Atmos Air Quality Index

Hackathon — UX Designer
Project Overview
Our Hackathon theme was to build a product with sustainability and technology in mind. We were put into a random group and had 2.5 days to build a functional product. We decided to build a Air Quality Index with a focus on the Air Quality index with an additional feature that suggest ways to build sustainable habits that would contribute to air quality.
My Contributions
Design Team — Lux, Fran, Sophie
Engineering Team — J.D., Tyson, Troy, Dan, Brandon

Design Process

Research/Define

As we start to gather our data, we chose to do interviews that could help us find pain points or potential opportunities in building and designing the application.

We cited the Environmental Protection Agency (EPA), and their information about the current scale of the AQI. We used this chart to help further our sense of style and language used for our writing. With this chart we also found that it focused more on the "sensitive" groups in comparison to the general public.

Interview Insights

The design team and I conducted 3 interviews to find more information among potential users and their knowledge of air pollution and air quality. The main consensus was that most of the group were aware of an AQI, however did not use this scale on a regular basis. This also resulted in lack of knowledge on what habits that can be practiced based off the air quality on a day to day basis and how it can affect their health. Some quotes from the interviews included —

User Persona

Based on our insights, we created a persona that resembled the 3 users we interviewed. Meet Grace, a 59-year old woman with respiratory issues residing in Chinatown, Los Angeles, one of the more air-polluted areas in the Los Angeles Metropolitan Area.

As UX Designers, how might we suggest outdoor activities considering the AQI while, at the same time, educate users about air pollution?

Ideating—Sketching/Mid Frames

As the design team and I start to ideate concept sketches, we compare our work with eachother's and play with ideas back and forth. We found that all three of us were going for a clean, minimal interface. We believed that the most valuable information was to the AQI score that was extremely legible and would incorporate colors and a style similar to the original AQI chart by the EPA.

These are the main points we chose to include into our design—

  • Activity recommendation on top and collapsible lists of more info and air pollution prevention below.
  • Location on top, with small icons of suggested activities under the AQI score and a collapsible list of recommendations on the bottom.
  • Landing page where user enter's their city of search.

Mid Fidelity Designs/Implementation

We ended up with two versions of the score indicator for the Air Quality Score.

Version 1

Version 2

Initially, the design team was set on using the first iteration. However, after sending it to the developers they expressed it was too complex to code the number and meter with color with our time constraint. Ultimately, we designed another scale that was much more simple, cleaner and feasible for our development team.

Final Screens

We came up with decisions on the UI of our app with soft blues and whites. We also chose to keep the minimal aspect of our design and kept our copy informative but still short. We added collapsible lists for more detailed information if the user feels inclined to learn more.

Reflection and Next Steps

As this was the quickest sprint I have had the opportunity of participating in, it was quite the experience. We had just 3 days to ideate, design and build a functioning application and pitching it to a panel of judges. This was my first time working with a team of developers although with our constant communication, it felt intuitive in our workflow and it was always a learning process.

Next steps would involve usability testing. This would allow us to implement changes and refine our design to make it more seamless and intuitive. We also talked about other features such as having a saved location option and being able to feature more content for a variety of users more specific to them.