Web App Development

What are you Breathing?

Achieved the Industry Awards 2021 Shortlist

For my final university project, we designed an empathetic air pollution simulation that aims to bring an acute awareness to individuals about how both outdoor and indoor air pollution pervades every aspect of our lives.

Webapp Access

My Responsibilities

Aside from shared responsibilities such as documentation and project management, here are some areas which I was specifically in charge of:

Design Process

3. Develop

Early Iterations

To have a better grasp on the direction we wanted to go in for our project, my partner and I each generated a few sketches and early iterations. We experimented with a few ideas before honing in on our final concept. Our first thoughts on the initial concepts was that Concept 1 was too shallow in it's functionality, whilst Concept 2 would be quite hard to build. To resolve this, we reimagined Concept 2 to be a contained simulation as opposed to a reactive environment, allowing us to rationally plan out our product's development within the 12 weeks allocated.

Concept 1 was a snapchat filter in which users could have the ability to visualise the air pollution around them, and send photos with these applied filters to spread awareness. Additionally, users would be able to view particular pollutants in the air and trace their sources.

Concept 2 was a live air pollution source tracker, which would portray a dynamic environment that would change depending on the user's location and air pollution sources near them. Users would be able to pin-point these sources and gain awareness from them.

Iteration 1

Once we had a good idea of the kind of project we wanted to pursue, we moved to making properly interactable prototypes on Figma, which allowed us to conduct user testing and rapid prototyping.

We also decided to build our platform on Unity at this point, so I focused on functionality over aesthetics, as they would be highly dependant on model packs provided in Unity.

User testing methods and results are shown further down

Very early prototypes were rough and sketchy. We focused more on getting all the functions on the table first, then building upon the aesthetic later

Iteration 2

Focus on creating a basic experience that could be built off of

Iteration 3

Steady refinement on asset aesthetics to allow for a less jarring user experience during testing. Functionality expanded upon.

Iteration 4

Implementing changes based on feedback, which included making information more accessible (less clicking to reach)

User Testing

Between each iteration, we ran 5 user tests with distinct people, conducting usability testing with the think-aloud method and system usability scale, then collated our insights onto an affinity diagram to implement productive changes.

Findings

4. Deliver

Once the prototyping and iteration phase was complete, we began to build our concept on Unity, whilst continuing user testing. My partner was in charge of coding, and I managed the scene creation, and as we were both new to using Unity, we learned more about the platform as we built our product, becoming more aware of its limits. We began to make more conscious design decisions, and refined elements of the interface such as the buttons and the logo.

Final Product

Main Functionality

Interactive Environment

Allows users to see how different factors can affect air pollution rates in different settings

Educational Content

Provides information for each factor combination, highlighting sources and health risks

Confronting Imagery

Uses qualitative imagery over quantitative statistics

Final Screens

Challenges