Allerzen is a speculative mobile companion app 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. 

image1_allerzen

ROLE

Product Design
User Experience
Data Visualization
Ideation
Research

TIMELINE

November 2018
[3 Weeks]

COURSE

Advanced Models &
Speculative Interfaces with Borxu

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 anaphylaxis 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. Along with this, I also did visual research and developed a moodboard to inspire the look of the project.

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? 

Allerzen_LabelledKnob

MAIN DASHBOARD —

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. 

allerzen_finalone

ANALYZING INFORMATION —

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. 

allerzen_two

COMPARING STATES —

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. 

allerzen_three

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. 

Overally, although this project was a short 3 weeks and we had limited critique sessions, it was a great way to apply what we learned about data visualization from our previous two projects (an informative website with Javascript modules, and a case study for an existing mobile companion app). It was also my first time using Sketch rather than Photoshop (I know, I'm ashamed too) which was quite valuable for me. Given that we only had one critique of the entire high-fidelity prototype of the app before the final presentation app, I am pleased with how it turned out and hope to push this even further by animating the data elements and reworking some of the colours so that it is fully accessible. 

* 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

Let's chat —
[email protected]

© Heena Chudasama 2020
Dribbble - Instagram - LinkedIn