2019-2020, Product Designer @Plumelabs
Role: art direction, user experience, visual design, user tests and research.

Cross-functional collaborations: iOS, Android developper, data and athmospheric scientists, marketing team, hardware team, head of design.

Flow, a connected device that helps you track and fight pollution.

visu_flow_001

General Overview

A New Way To Visualize Air Quality Data

In 2014, Plume labs was created to make air quality information accessible and empowering for everyone by simply connecting a device called Flow to your smartphone.
Flow makes air quality transparent by showing you what pollutant you are exposed to. After Flow got commercialized, it naturally occurred to the team to implement pollution maps inside the application: maps are universal products that everyone is aware of, what better than having maps to visualize air quality data?

Our maps product was released before I joined in 2019. I was then part of the redesign of the new Plume labs maps experience. I partnered with data and athmospheric scientists, developpers, the design team and project managers during this project

  • Our longer term goals were:
    1. Create the most visually appealing and actionable maps on the market.
    2. Give our users more control of the air they breath by bringing value to our maps.
    3. Build and gather a community that is engaged towards air quality issues.

To comply with my non-disclosure agreement, I have omitted confidential information in this case study.

case_flow_002

Back To When It All Started

Understanding The Context And The Current Situation

Understanding The Context And The Current Situation

Our team developed the "Street Level Maps" in order to provide a better granularity for our users so they could see what the pollution looked like every hour and street by street. 

Although being innovative, our maps were losing their charm shortly after it was released. At that time, displaying street by street pollution of a few cities felt more like a gadget rather than a feature that could be serving the purpose of thousands of our customers. 

Our application also struggled to grow alongside our users' expectations. From technical issues to too few features. I was in the urge to think of a way to make these Street Level Maps more actionnable, intuitive and useful.

Artboard

Street level maps in paris after it was released.

Research Phase Kick-Off

Initial Insights And Early Objectives

My initial objective was to understand how to align the maps product with both the company's mission and users' needs. Ideally, I wanted to be able to stay in sync with the team by taking account the business side of things as well as the users' requirements.

I interviewed our stakeholders so I could get a view of their thoughts and objectives.
I also took a look back at all user interviews conducted the past 6 months in order to unveil any possible insights about our maps and how they were used.

EARLY INSIGHTS:

  • FOR PLUMELABS: Create a community around the maps in order to keep the initial promise made to the customers but also to reinforce their trusts towards the brand. Make of Plume labs maps the reference in terms of air pollution and therefore create more engagement and potentially bring in new customers. Also, this could lead to more visibility and coverage from the media.

  • FOR FLOW USERS: The way our maps are currently shaped isn't enough for them to get a useful value out of it. In fact, the data displayed on it are only representing the previous hour in the past There is no clear way to get a precise idea of what the air quality is in terms of value. The only piece of information our users can rely on is the colour. additionally, the map is pretty crowded and hard to read visually. To finish with, a lack of actionable features inside the maps is generating frustration to our users who are expecting way more from it.
artboard_2

For example: from 2:30PM to 2:55PM, data shown on the map remains the same. The map will be only updated at 3:00PM.

Research Phase Development

Getting To Know Our Users Better

I have begun by taking a look at our established personas. Having a grasp of their objectives and needs would facilitate my interviews with them later on. It would also help in situating myself better regarding what they wish to accomplish.

Digging into our NPS from the last 6 months:

Rather than just giving us a simple score related to customer loyalty, our NPS was associated  with closed-ended questions regarding specific topics of the product and an open-ended question allowing users to express their opinions.
I first focused on regrouping insightful feedbacks about our maps and started filtering and classifying them into groups of common subjects. I managed to order them in terms of priority based on the amount of requests made.


NPS_NEW

Assessing feedbacks and comments from our FR and ENG users. 

nps_new_graph

Based on their nature, feedback found in the NPS resulted in a graph classification.

An important lack of actionable data within our maps:

The main feedbacks suggested that our maps were lacking features to fully exploit the potential of our pollution street levels. But how could we translate it in terms of needs or objectives?

NPS FINDINGS

  • Our users' feedbacks were majorly pointing towards the same direction. What I call "Actionable data" are ways that can help the users act on the data we provide to improve their exposure to pollution: predictions, pollutant breakdown, "decision making" tools. I had my initial hypothesis regarding their objectives that I had to confirm during user interviews. It was also interesting to see how engaged they were when it came to contribute their data to the community.
  • Our users' feedbacks were majorly pointing towards the same direction. What I call "Actionable data" are ways that can help the users act on the data we provide to improve their exposure to pollution: predictions, pollutant breakdown, "decision making" tools. I had my initial hypothesis regarding their objectives that I had to confirm during user interviews. It was also interesting to see how engaged they were when it came to contribute their data to the community.

Research Phase Development

Discovery Through User Interview

Thanks to the NPS study, we reached out to the list of users who provided us their feedbacks regarding our maps product.

The short term objective here is to first focus on the active users we currently have.
They are part of our main target since we need them to keep using our apps and coming back to it. However, it would also be interesting to talk to churned users.

We have recruited users based on the following criterias:
- Power users who are opening/using both the app and maps everyday for the past month.
- Opened the app at least once per week for the past month
- Did not open the app for a week or more during the past month
- Used the map feature at least once a week for the past month
- Did not use the map feature for a week or more during the past month

USER RESEARCH FINDINGS

  • We interviewed 8 users in total to validate our assumptions.
    Surprisingly, users were most of the time talking about having a crowdsourced map with the possibility to see other users' data like we have on the Waze application. Most importantly, they were really eager to have access to shared data from others.
    The main reason is that they are looking to anticipate, optimize and therefore improve their health by lowering their exposure to pollution.
    To conclude, our users are looking to get ahead of pollution and hoped our maps could help in achieving these goals.

LOOKING AT THE BIG PICTURE

I mapped out the essential pieces of information retrieved from NPS and user interviews with keywords. There is in fact much more than the simple use of our application. I had to make sure I was taking into account the technical constraints as well as the personal contexts of our users. In fact, they might be on their way to work in the subway and have a lower reach in terms of network: so in this specific case, how are we displaying data through our maps if there is no connection for instance?

I mapped out the essential pieces of information retrieved from NPS and user interviews with keywords. There is in fact much more than the simple use of our application. I had to make sure I was taking into account the technical constraints as well as the personal contexts of our users. In fact, they might be on their way to work in the subway and have a lower reach in terms of network: so in this specific case, how are we displaying data through our maps if there is no connection for instance?

keywords_mindmap

Mapping users' environment: space, time, personal context & tech specificities.

OVERALL FLOW

Our mobile application was pretty simple to use. In terms of flow I wanted to situate where the "global" friction points were happening during the use of it. The interviews also helped me unveiling further insights regarding how we could improve our users' experience with the personal data they track. There are mainly two areas where we can improve our products: one is located right after the home screen with all the personal data on the timeline. The second one is when users are landing on the Street Level Map Features.

Our mobile application was pretty simple to use. In terms of flow I wanted to situate where the "global" friction points were happening during the use of it. The interviews also helped me unveiling further insights regarding how we could improve our users' experience with the personal data they track. There are mainly two areas where we can improve our products: one is located right after the home screen with all the personal data on the timeline. The second one is when users are landing on the Street Level Map Features.

flow_frictionPoints

Visualizing where the friction points are being met for our users.

Visualizing where the friction points are being met for our users.

FOCUSING ON THE JOBS

WHAT JOBS TO BE DONE?

I composed these 'jobs to be done' based on the interviewees' feedbacks. Most of these statements will help in estimating if the solutions proposed are leaning towards the right direction. I wanted to focus more on the outcome of these jobs since they are unlikely to shift or evolve quickly over time. At some point, the outcome will remain similar but maybe the tools or usage employed to reach these outcomes will differ in the longer term.

I composed these 'jobs to be done' based on the interviewees' feedbacks. Most of these statements helped in estimating if the solutions proposed were leaning towards the right direction. I wanted to focus on the nature of our users' needs. By addressing the jobs to be done, we are likely to design for something that will remain subsist in time. At some point our users outcomes would remain similar but maybe the tools or usage leading to these outcomes would differ in the longer term.

I composed these 'jobs to be done' based on the interviewees' feedbacks. Most of these statements will help in estimating if the solutions proposed are leaning towards the right direction. I wanted to focus more on the outcome of these jobs since they are unlikely to shift or evolve quickly over time. At some point, the outcome will remain similar but maybe the tools or usage employed to reach these outcomes will differ in the longer term.

Jobs

Jobs to be done based on our personas

Reframing The Problem

How might we help our users plan and optimize their days when it comes to air quality?

  • There is a subsisting issue for our users when it comes to taking actions to deal with pollution. At this time, they rely on personal data which is either focused on the present moment or already passed. It leads to frustration as they find it quite difficult to act on it since they have to do most of the work by themselves when it comes to studying it, and understanding it. We have had users who documented their everyday data so they could keep track or distinguish patterns from it.

Competitive research

Conducting a functional benchmark

I have established a benchmark of all our competitors on the market based on the functionnalities they would offer regarding their pollution map. The idea behind is to first assess what we offer and how our data is being used versus others. What was pretty clear here is that the whole competition was more or less offering the same value. The only difference is that some might have more precise data or offer better forecasts for instance. In our case it was getting clearer for me to keep building our engagement around the Street Level Maps.

bench1

Competition functional benchmark

I narrowed down my benchmark to a few main actors that had high quality maps product and a great presence on the market. These were competitors with an important amount of engaged and active users based on their reviews and score on the stores. 
I went into testing their products and managed to discern two main issues and opportunities we could work on:

  • Pollution Heatmaps are often confusing in the way they are presented. We have aggregated data representend by a 'bubble' and each time we click on it, it keeps on zooming. We are not sure what it is the nature of what we are looking at: is it a city? A group of cities? A region? What if we had an easier way to understand heatmaps?

  • Pollution heatmaps are good, but way too general. They just give an overview of the situation while our users need more context. When we talk about context, we talk about granularity and precision: how high is the pollution in my neighborhood? How high is the pollution in the park I usually go for a run? 
    What if we could offer forecast on our street levels so ours users can both plan ahead and anticipate their day?

ben2

Narrowing down the functional benchmark to a few pertinent competitors

Time & Resources

Prioritizing and planning

After I gathered the necessary insights and information, I wrote down the potential ideas we would focus on to craft a better experience. I set up a meeting with the data scientists and development team in order to assess what could be done due to our constraints in terms of time but mostly development resources. Based on it, we ended up classifying per order what would be implemented in top priority first.

After I gathered the necessary insights and information, I went onto writing down the potential ideas we would focus on to make the experience better. I set up a meeting with the data scientists and development team in order to assess what could be done due to our constraints in terms of time but mostly development resources. Based on it, we ended up classifying per order what would be implemented in top priority first.

timeVeffort

Impact VS Effort map to situate discussed ideas.

Solution & Conception

Designing A New Flow & Structure

From sketches to initial wireframes, I started to picture what the flow would look like and what elements on the interface we wished to integrate. From that, I started to collaborate closely with the partner teams to make sure everyone was aligned with the initial objectives set earlier. 

SOLUTION DESIGN PROCESS

  • Low-fi wireframes to validate the initial flow internally

  • Visual research and inspiration for Street Level designs
  • Street Level Redesign and implementation:
    Improving our Street Level design was an absolute necessity. We had to make sure our maps were both well thought and visually engaging.
  • Mobile design with newly integrated Street Levels
wireframes

Initial wireframes of the flow.

Visual research and map design

Creating The Maps Guidelines And Design

Gathering inspiration over the web was the first step. Thanks to these, I started to elaborate my design of our maps and began redesigning our Street Levels based on specific elements such as the width, color, opacity, the zoom level and other parameters on Mapbox.

They were many iterations made on the map design in general, by the end we have had two types of modes for our maps: one light mode and one dark mode. It took some time to design and iterate on the Street Level maps as we needed it to be coherent through every city we had data for.

visual_research

Map design inspiration moodboard (Street Levels & Heatmaps)

mapsStructure_img

Designing the base of our maps: colors (cities, sea, countries, borders..), labels..

design_Map

Designing the core of our maps: the Street Levels (Zoom levels, Width, Color scale, Opacity..)

Capture d’écran 2019-12-19 à 01.11.25

Paris Street Levels

Capture d’écran 2020-02-23 à 18.26.03

San Francisco Street Levels

case_flow_portland

Mobile Maps Design

Initial Concepts And Exploration

Final part was elaborating our mobile interfaces so we could conduct user tests later on. I started by working on the heatmap and along with the design team, we came up with the idea that it would make more sense to map the air quality as we currently have in weather stations.

Final part was elaborating our mobile interfaces so we could conduct user tests later on. I started by working on the heatmap and along with the design team, we came up with the idea that it would make more sense to map the air quality as we currently have in weather stations.

map_oldApp

V1 - From left (global view) to right (street level view).
We majorly provide air quality data for the large part of the world's cities in general. Accessing them allows our users to get a view of the street level when available.
The bottom slider is the forecast for both the Street Levels and Heatmap.
Having this is a real key differentiator among the market as we are able to see what the air quality is at least two hours before and two hours after.

V1 - From left (global view) to right (street level view).
We majorly provide air quality data for the large part of the cities in general. Accessing them allows our users to get a view of the street level when available.
The bottom slider is the forecast for both the Street Levels sand Heatmap.
Having this is a real key differentiator among the market as we are able to see what the air quality is at least 2 hours before and 2 hours after.

V1 - From left (global view) to right (street level view).
We majorly provide air quality data for the large part of the cities in general. Accessing them allows our users to get a view of the street level when available.
The bottom slider is the forecast for both the Street Levels sand Heatmap.
Having this is a real key differentiator among the market as we are able to see what the air quality is at least 2 hours before and 2 hours after.

V1 - From left (global view) to right (street level view).
We majorly provide air quality data for the large part of the world's cities in general. Accessing them allows our users to get a view of the street level when available.
The bottom slider is the forecast for both the Street Levels and Heatmap.
Having this is a real key differentiator among the market as we are able to see what the air quality is at least two hours before and two hours after.

In order for our users to have access to more practical information, we decided to design air quality spots instead of aggregating or regrouping air quality data like our competitors did.

RULE OF THUMB

Understand the pollution level of an area with a simple glimpse.

Understand the pollution level of an area with a simple glimpse.

In fact implementing rules as calculating the average of a region, department, city or else felt way too confusing for us since we would have had to understand how each place in the world is structured and therefore apply it to all countries from different continents.

In this case, rules were simple: the more we scrolled in, the more pollution spots we could see. Thanks to our data team, we could populate this information through our heatmaps based on calcucations and algorithms.

Final Concepts

Introducing Plume Air Quality Maps

After I have initiated the first concepts, the team priority shifted on redesigning our current apps with a brand new style and design. We adopted the dark mode as we worked towards a new art direction. Therefore, this new style applied to the map exploration.
The final result is a polished and clear design of our air quality maps

After I have initiated the first concepts, the team priority shifted on redesigning our current apps with a brand new style and design. We adopted the dark mode as we worked towards a new art direction. Therefore, this new style applied to the map exploration.
The final result is a polished and clear design of our air quality maps

map_design

Final design exploration for our map product.

(1)MapProduct_screen

I explored another design concept for the heatmap preview. The idea is to give a more uniform aspect to the pollution instead of "hotspots".
Ideally, the development and data team will try to mimic as close as possible the current heatmap design. The more we zoom in, the more air quality value we have.

I explored another design concept for the heatmap preview. The idea is to give a more uniform aspect to the pollution instead of "hotspots". Ideally, the development and data team will try to mimic as close as possible the current heatmap design. The more we zoom in, the more air quality value we have.

I explored another design concept for the heatmap preview. The idea is to give a more uniform aspect to the pollution instead of "hotspots". Ideally, the development and data team will try to mimic as close as possible the current heatmap design. The more we zoom in, the more air quality value we have.

I explored another design concept for the heatmap preview. The idea is to give a more uniform aspect to the pollution instead of "hotspots". Ideally, the development and data team will try to mimic as close as possible the current heatmap design. The more we zoom in, the more air quality value we have.

(2)MapProduct_Screen

Paris Street Level map view.
We can now have four hours forecast and history of air quality data. However, this is not as precise as the initial idea we had. Forecast and history can only be seen every two hours.
From a performance perspective, it would be too much data to load if we had a lower gap between each step.

Paris Street Level map view.
We can now have air quality data from 4 hours back in the past and 4 hours in the future. However this is not as precise as the initial idea we had. Forecast and history can be seen every 2 hours. From a performance perspective, it would be too much data to load if we had a lower gap between each steps.

Paris Street Level map view.
We can now have air quality data from 4 hours back in the past and 4 hours in the future. However this is not as precise as the initial idea we had. Forecast and history can be seen every 2 hours. From a performance perspective, it would be too much data to load if we had a lower gap between each steps.

Paris Street Level map view.
We can now have air quality data from 4 hours back in the past and 4 hours in the future. However this is not as precise as the initial idea we had. Forecast and history can be seen every 2 hours. From a performance perspective, it would be too much data to load if we had a lower gap between each steps.

(3)Maps

When zooming into the city, users can trigger what we call the 'proximity forecast feature'. This is an added exploration I have decided to integrate since I thought it would be pretty interesting to scan specific areas of the map.
In fact, as it is not yet possible to get a detailed value for each street, so this would potentially serve in the meantime. 
The idea is to give our users an average value of a displayed zone inside the city itself.
These perimeters have determined size that we have established previously. At the same time, our air quality data is filterable by pollutants and we have added a color scale to help them understand better the information displayed.

When zooming into the city, users can trigger what we call the proximity forecast feature. It is not yet possible to get a detailed value for each street. 
The idea is to give our users an average value of a displayed zone. These perimeters have determined size we have established previously. Once again, our objective is to give enough precise data so ours users can act on it. At the same time, our air quality data is filterable by pollutants and we have added a color scale to help them understand better the information displayed.

Further to implementation

Measuring Success

Measuring Success

I paired with our product manager to keep track of our product's performance after it will be released. Making sure the product is healthy in order to iterate on it if needed.

I paired with our product manager to keep track of our product's performance after it will be released. Making sure the product is healthy in order to iterate on it if needed.

  • Engagement rate

  • Time spent on the product
  • Retention rate
  • Churn rate
  • Improved NPS
  • Search tool usage
  • Forecast tool usage
  • Most visited cities
  • Data syncing enabled/disabled
  • Proximity Forecast feature
  • Pollutants filter