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.
Problem
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.
Solution
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.
Tools
Figma
Illustrator
InVision
PopApp
Team
1 UX/UI designer
2 product managers
3 developers
3 researchers
1 graphic designer
My Role
UX/UI design
UX research
Workshop facilitator
Timeline
Overall: 10 weeks
Discovery & Research: 4 weeks
Design & testing: 6 weeks
My Design Process
Discover
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.
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.
Unmotivated
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.
Unplanned
Our users might see the installation by mistake and only interact with it for a short time
Unexcited
Our users don't want to read pages upon pages of dry, difficult, and dense data about air quality
Interviews
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.
Key themes derived from talking to users
Two themes emerged from the affinity mapping exercise.
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.
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?
Define
personas, experience mapping, user stories, primary & secondary tasks, task flows
Personas
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.
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.
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.
Design
sketching, wireframes, user testing
Sketches
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.
Wireframes
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.
Deliver
inspiration, typography & colour, Hi-fidelity prototype
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.
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.