When Air Takes Shape

app designed to interact with data-based art installation, raise awareness about pollution and create empathy-driven behavioural change

When Air Takes Shape is an interactive sculpture developed by ATTA Society to show global air quality. It will be displayed in public spaces, with the aim of raising awareness about air pollution and creating empathy-driven behavioural change by giving shape to air, which is usually invisible.


ATTA has been working on their sculpture and gathering research data for 2 years. Because most of their focus has been on engineering a moving sculpture that is linked to data, ATTA had not thought of how the user could interact with the installation, and how to present the dense data to them. 


I helped the ATTA team design a clear, intuitive app that is linked with the moving sculpture, as well as whittle down their text-heavy data.


  • Figma

  • Illustrator

  • InVision

  • PopApp


  • 1 UX/UI designer

  • 2 product managers

  • 3 developers

  • 3 researchers

  • 1 graphic designer

My Role

  • UX/UI design

  • UX research

  • Workshop facilitator


  • Overall: 10 weeks

  • Discovery & Research: 4 weeks

  • Design & testing: 6 weeks

When Air Takes Shape

My Design Process

When Air Takes Shape


primary & secondary research, assumptions, interviews, affinity mapping

Over half of the world's population has no access to official government data on air quality, making it difficult to hold our leaders accountable.

Image alt tag

4 Million

people worldwide die prematurely each year due to poor air quality (1)

Image alt tag


of the world population lives in an area where air quality does not meet WHO standards (1)

Image alt tag


is one of the many organs damaged when exposed to air pollution (3)

Creating assumptions about users

In the beginning, stakeholders at ATTA had difficulties envisioning who their users would be and simply referred to them as general public. However, designing for everyone meant we were designing for no one. It was essential that we crystallized the vision of our potential users to make sure that our design was headed in the right direction. 

Together as a team, we each shared our assumptions about our users. This ensured that we had a shared understanding of our target audience, as well as how our project would address their needs and goals.

These assumptions were later validated through user interviews.


Our users are too busy with their day-to-day lives and think improving air quality is unachievable, difficult, time-consuming, and out of their reach.


Our users might see the installation by mistake and only interact with it for a short time


Our users don't want to read pages upon pages of dry, difficult, and dense data about air quality


I visited public art installations and interviewed people to understand what attracted them to the art, why they were interacting with it, if and what they gained from the art, and how they felt. The interview also included questions about people's thoughts on educational material regarding the climate crisis. The results of the interview would be used as a foundation for building the personas.

The results were analysed using the affinity mapping process, through which the pain points, motivations, and behaviours were listed and grouped in order to understand the key themes my research should focus on.

When Air Takes Shape

Key themes derived from talking to users 

Two themes emerged from the affinity mapping exercise.

Image alt tag

Limited Time

7 out of 10 interviewees were viewing the art during lunch breaks or stopping by on the way home and stayed for no longer than 30 minutes maximum.

Image alt tag

Evocative Experience

Interviewees stated they dislike reading lengthy texts, as they found it dull. They wanted the installation to shock and stir them.

How might we...

encourage the users who are drawn in by the sculpture want to stay, interact, and learn during their busy day?

When Air Takes Shape


personas, experience mapping, user stories, primary & secondary tasks, task flows


We wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, we created 3 personas for each of our user segments based on user interviews. We used these personas whenever we wanted to step out of ourselves and reconsider our initial ideas.

Experience Mapping

To focus on our main priority, we created an experience map of one of our personas. This was to build a better understanding of how users find and interact with the product and to discover opportunities for improvement. The map revealed low points and opportunities, acting as our focal point that the app will need to resolve.

When Air Takes Shape

User Stories

Two key themes emerged from the mapping exercise, which highlighted the functional features a user might need to undertake within the app. These themes focus on the need for users to interact with the installation and view interesting data, both within a short timeframe. The two user stories below helped me frame the user task flows.

When Air Takes Shape
When Air Takes Shape

Mapping out the task flow

I chose to show the primary and secondary task flows in one, as they complement each other. The task flow highlights the screens that needed to be developed in order to complete the tasks and helped me focus on these two core tasks. 

When Air Takes Shape


sketching, wireframes, user testing

When Air Takes Shape


Exploratory hand sketches are the key to starting the solution design. I have chosen to develop these by the core screens, described as the location within the task flow. I developed several variations for each until I found the right one that I could then start developing as a wireframe within Figma.

My sketches were based on the initial user interviews.


Based on the selected iteration pages from the sketch exercise, wireframes were developed in Figma for every page of the app. The wireframes were at mid-fidelity, which meant that items such as text boxes were filled out rather than left as abstract lines. This allowed for a better user testing experience further down the line, as the user understood the functions of the buttons and menus better when they have the relevant labels designated to them, and was also able to comment on the appropriateness of the content. 

Usability Testing

Testing the initial prototype with 5 users allowed me to clarify various usability issues and ensure a smoother and easier user experience. I have highlighted below the key changes implemented which led to the final high-fidelity prototype. 

When Air Takes Shape
When Air Takes Shape
When Air Takes Shape


inspiration, typography & colour, Hi-fidelity prototype

When Air Takes Shape

UI Inspiration Board

I explored a range of apps, from education apps to health and wellness apps, to understand the best ways the UI has been designed.

Typography & Colour Scheme

The inspiration board images reflect warmth, clarity, and approachability that were translated with sans-serif typography and a friendly colour palette.

When Air Takes Shape
When Air Takes Shape

Hi-Fidelity Prototype

Once the usability issues were resolved, I moved on to design the final screens in Figma.

Next steps

The app and the art installation are not limited to Vancouver. It will travel around the globe and be displayed in public spaces.

The app will need to support the various languages worldwide and keep increasing its database. By creating partnership opportunities with researchers from different backgrounds, there is room to take the app to the next level.

Also, we want to reach a wider audience, not just those who view the installation unplanned. In order to generate interest, and also create a long-lasting impression, we would need to put an effort into branding and marketing the product.

Want to hear more about this project?

Or hear some terrible dad jokes? Feel free to contact me!