AIR

Application & Service Concept

  • Client: Class Project
  • Role: UI/UX Design & Front-end Dev
  • Timeline: 2 Months, 2014

About The Project

How can we organize the air quality data within a home in a clear and visually interesting way? In the exploration and understanding of the data and the users we can create an application that takes the houses air quality data and presents it in a clear and meaningful way. My solution to this problem was to design an application that organized the home air quality and allowed the user to protect their family.

User Persona

Katie & Robert recently bought a home to move their family into. They have two young children that they want to keep safe by monitoring the air quality.

Sketches

I worked through multiple ideas on the UI, layout and flow of the application, trying to find the best possible way to attempt to solve the problem.

Wireframes

With the wire-frames I was trying to get an understanding of how the app flowed and how some of the animations happen. After doing this I had a solid idea of how everything worked.

Interaction Design

I worked through all of the possible interactions to make sure that the system made sense and that it would be intuitive to the user.

  • Gesture for switching between any icon array page and the timeline / chart view of the data.

  • Gesture for selecting the floor you want more information on and how to get back.

  • Gesture for selecting the data that you want more information on and how to get back.

Moodboard

With the mood board I was going for a comfortable, homey, and simple feeling. I wanted the user to feel safe and comfortable.

Final Design

Prototype

For this project we were tasked to create a prototype to show how the application flowed. I decided that I wanted to program my app with html,css, and javascript. I was unable to finish the prototype completely but I learned a lot. Looking back on it now I wished I had used Jquery and that I used a mobile framework. But I am glad that I attempted it, this helped me better understand javascript. Link to the prototype

Final Thoughts

This project was a long and hard process that challenged me to think about the user and how the interactions would happen. In the end I was happy with the way the data was presented in a more interesting way.

Next

Previous