Allerzen is a speculative mobile companion app for a smart mask that seamlessly provides time based data for various exposures of user specific allergens. 

Allerzen is a speculative mobile companion app for a smart mask that seamlessly provides time based data for various exposures of user specific allergens. 

Role

Product Design
User Experience
Data Visualization
Ideation
Research

Timeline

November 2018
[3 Weeks]

Course

Advanced Models &
Speculative Interfaces

Tools

Sketch
Illustrator
InVision Studio

Design Objective

The goal of this project was to explore the limits of data visualization through the implementation of speculative design. 
 

The goal of this project was to explore the limits of data visualization through the implementation of speculative design. 
 

Identifying the problem —

Allergies are caused by the immune system being triggered by harmless substances, or allergens, and often times, this can hinder on a person's life choices. Some people may completely avoid going out just so the possibility of an allergy attack or even anaplhaxic shock is not likely. 

Symptoms that individuals with allergies may have to deal with include respiratory, skin, sinus, nasal, and eye related issues, as well as fatigue. 

objective

Proposed Solution —
Allerzen

Due to the symptoms and restrictions that individuals with allergies must face, it is important for allergens to be tracked and regulated so that people can live freely without having to deal with symptoms and possible inconveniences. 

Allerzen is a product that tracks a user's allergies and provides them with meaningful information to help regulate how much they're being exposed to the allergen. 

Ideation

The beginning of this project involved brainstorming possible concepts for an application that is capable of collecting immense amounts of data.

While initially wanting to design an app that would help track air quality levels in cities — especially for those that experience pollution or the aftermath of forest fires, I felt that making my main focus as allergies would be able to target and benefit more consumers. 

Early Concepts

Different methods on how knobs and progress bars can be visualized were explored and developed through critique. A major challenge that was present as the design was developed includes the overcrowding of elements on the dashboard and visualizations not being as clear as they should be. In order to further develop the UI/UX of the app, a couple of questions were proposed  —

+   What elements can be transferred to the onboarding to reduce the overall clutter within the dashboard?
+   How can one take advantage of colours without overcomplicating the data visualization? 

knobdevelopment

Radial Allergen Concentration Model

The first visualization is a knob based radial chart that displays allergen concentration counts in a gradual manner. It tracks the user's specific allergies and represents them through colours.

Adjusting the knob by dragging on the tab on the top of the wheel will either zoom in or out of the time selection. The gradient ring on the end displays different risk levels with all the allergens combined during specific time periods. 

vis_1

Allergen Breakdown Model

The second visualization is more abstract, and offers an allergen specific breakdown of the allergy the user has tapped on. The user can change the date on the top to view allergen breakdowns for other days as well.

The visualization itself uses the colour of the allergen, and uses different shades of said colour to represent each specific breakdown. The width of each of the visualizations are also used to determine the intensity of the user's exposure to the allergen. For instance, with pollen, there are many elements that contribute to it, such as grass, flower, tree, etc. and this data can help determine what exactly triggers the user's allergies. 

vis_2

Allergen Breakdown Callout Model

The bottom of the visualization includes callouts that state the safe pollen exposure count for the specific allergen, as well as the average exposure count for the day. There is a concentration risk level bar with 0 being the lowest and 12 being the highest, and two markers were implemented in the design to help display the user's exposure to the allergen.

The green marker shows the safe pollen count exposure, and the other marker (differentiated by colour) displays the user's average exposure to the allergen concentrations for the day. On the top right, there is also text that displays the highs and lows for the user's exposure for the day. 

vis_3

Project Takeaways & Final Prototype (InVision)

This project explored how continuous and collected data can be visualized differently from typical techniques that most existing apps today tend to utilize. With the implementation of speculative design, these visualizations were pushed further away from their boundaries so that a more meaningful user experience can transpire. 

* Due to InVision limitations for the "tap and hold" feature, the user must tap on the left side of the listed allergen to toggle its visualization on and off, and tap on the right side to view the breakdown.

scenerevised

Additional Projects —

Travelr (In Progress)UI/UX Case Study

Zepp Play SoccerUI/UX Case Study

JungleeEditorial Design

Warranty WalletUI/UX Case Study

© Heena Chudasama 2019
Dribbble - Instagram - LinkedIn