Case Study: Launching an app for rating the confidence of air quality sensor readings

Karen Donoghue
Feb 28, 2018 · 10 min read

CASE STUDY

Local Haze application for iPhone by HumanLogic, displaying air quality sensor confidence ratings. Available for free on the Apple App Store:
https://itunes.apple.com/us/app/local-haze/id1278998405?mt=8

INDUSTRY

Air quality monitoring

PRACTICE AREAS

Product Planning, UI/UX Design for native mobile app, Product Management, Wireframes, Interaction Design, Visual Design, Product Delivery, Marketing

PROJECT

Design and launch an iPhone application displaying real-time local air quality sensor data and associated sensor confidence ratings, a new and innovative approach to sensor data accuracy.

SUMMARY

Led a highly collaborative approach to product planning, designing, building and launching a data-centric iPhone application displaying data from global connected air quality sensors.

Designed a simple “at-a-glance” user experience for understanding readings from air quality sensors and the associated heuristics and presentation of confidence rating for each instance of sensor data.

Led Go to Market for product, launched application in the App Store, delivered a marketing site and marketing channels for the product.

THE CHALLENGE

How confident are you in the readings of air quality sensors around you? How would you know if they are inaccurate or reporting incorrect data?

The EPA and the WHO have established guidelines for safe air quality, and health risks resulting from poor air quality, pollutants and the presence of particulate matter (PM) are well known. Yet although there are many air sensors monitoring the quality of the outside air, until now there has been no easy to use tool to allow consumers to understand the accuracy of local air quality measurements.

Local Haze solves this problem by delivering accuracy data in the form of confidence ratings for air quality readings from local outdoor air sensors. Local Haze aggregates quality-controlled crowdsourced air quality data and public air quality data and delivers an easy to understand sensor reading confidence value delivered to any iPhone. In a few seconds a sensor’s reading and a confidence rating in that reading can be easily understood “at-a-glance” via a user experience understandable by a wide range of consumers. More detailed data about sensor readings is available with a tap.

BACKGROUND

With Local Haze I set out to design an experience for presenting a quantitative data source — in this case air quality — in an easy to understand format that does not require the user to possess heavy quantitative skills. I wanted to see if it was possible to design a qualitative experience, even an emotional one that could abstract the underlying quantitative data into an easily consumable “on-the-go” experience. I was also curious as to whether a design solution could be found to deliver an air quality reading experience that a typical consumer would consider trustworthy.

Trust is important in data-centric experiences. Some of my recent work has been challenging because I have been tasked with delivering good user experiences in situations where the underlying data is inaccurate, or its accuracy is questionable. Perceived inaccuracy of data does not help build trust with users — it often leads to distrust.

In this project, I aimed to address some of the challenges of perceived data uncertainty while trying to improve the heuristics that lead to increased “data confidence” for the end user.

In terms of technical approach, Local Haze validates the outdoor air quality data for a user’s location by crowdsourcing publicly available air quality data and then applies a rating to the validation data. The app then displays this rating in an easy to understand user experience delivered to a device, so that the user can determine their confidence in the data they are seeing. My hypothesis is that the appearance of the confidence rating should give users a sense of trust (or distrust) in the actual sensor reading, and help to address some of the tensions between accuracy and precision with which I have had to wrestle with in recent design projects.

REQUIREMENTS AND FEATURES

I began the design process by defining and prioritizing requirements for the Local Haze app using Agile development methods, defining use cases, writing user stories and elaborating on features for the MVP version of the app while at the same time documenting the roadmap of intended features. I believe it’s important in product planning to be cognizant of roadmap features to avoid designing user experience solutions that do not scale and enable adaptation when requirements change.

The primary use case is home use allowing a connected consumer to rapidly view confidence ratings and summary data for local outdoor air quality. A secondary use case, allowing search for a specific location did not make it into the MVP but went into the backlog.

We defined one user persona — an Air Quality Enthusiast. This persona featured such characteristics such as a high degree of motivation to track air quality through public environmental data sources and a tendency to purchase home air quality tracking devices connected to a home network. The requirements included an easy-to-understand view of the air quality data and associated confidence as well as the ability to drill down and see the technical details of the data.

FLOWS AND DATA MODEL

The next step was to work with Engineering on the definition of the data model and define the use cases and flows to support the persona. Our use cases were modeled around browsing sensor data at the collection level and then drilling down into specific sensors. Although the app is free for its initial (MVP) release, we also modeled future features for including “in app purchase” of specific types of data and analytics.

The primary flows for the MVP release (not including error flows) of the Local Haze app include:

· An onboarding experience to drive knowledge about air quality readings, introduce the concept of confidence ratings and encourage discovery.
· Launching the app to see a collection of nearby sensors, the default view and associated drilldown interaction.
· Displaying a geographic view of the sensors on a map with active pins and associated gestures for map interaction and drilldown.
· Drilling down to view a summary view of a specific sensor’s data.

We focused on defining a data model for the MVP release that expressed the available data from the portfolio of air quality sensors and would allow us to meaningfully show uncertainty in a mobile experience. We defined a site object mapped to a single data source and associated with one or more sensors. This flexibility reflects that some of the sensors (such as the Purple Air sensor) features redundant sensors associated to a single site, thus provising an additional measure of accuracy.

Air quality measurements are commonly reported in terms of micrograms per cubic meter (µg/m3) parts per million (ppm) or parts per billion (ppb), so we needed to be able to present this information in qualitative ways that made sense but enabled an Air Quality Enthusiast to drill down to the technical details if needed.

The air quality sensor data for the initial release utilizes APIs from PurpleAir, AirNow and the U.S. Department of State.

WIREFRAMES AND MOCKUPS

I produced early rough mockups to determine visualizations of the air quality sensor data that most clearly reflected the status of the sensors in an easy to understand format. Some of the initial mockups included placing actual numerical sensor values on the browsing screen — the list of sensors — an approach that was not included in the final design because it was seen as being too complicated for a consumer user to quickly understand.

Overall app navigation design originated as a tab control at the top of the screen to filter the view of the collection of sensors and a hamburger menu to access other major app areas. This approach felt clunky and involved gestures that required too much screen traversal with the thumb.

The final design using a tabbed navigation controller at the bottom of the screen, an approach that facilitated easier single handed user interaction.

The wireframes reflected requirements for aggregated sensor views and summary views and as drilldown screens for each sensor. The wireframes helped to reflect the MVP requirements in a format that enabled the team to analyze the designs and provide feedback.

BRANDING AND VISUAL DESIGN

Visual design and branding commenced during the early stage of the design process. Since the sensor data is drawn from devices all over the world, one of the design goals included reducing the reliance on words and instead using iconography and numerical values in the core user experience. The color palette was designed to answer brand attributes such as “trustworthy”, “simple”, “accurate” and “vibrant”. It was a design decision to reduce clutter on the Sensors list and instead display more detailed sensor data using drilldown interaction and a summary screen for each sensor.

One of the visual design challenges was how to design a layout for the sensor reading data such that it could be co-mingled with the confidence data, and to have this “read” in the UX as a single composite data element. Multiple iterations of design resulted in the final design of a UI element that visually combines the sensor value and confidence rating into a composite element that works well with the display constraints of a mobile device.

INTERACTION MODEL

The interaction model for Local Haze is based around a single-handed “launch and view” experience — designed to minimize user interactions while quickly presenting rich and useful information “at a glance”. Launching the app should immediately present the most critical information and it should be easily accessible — without any need for interaction.

Part of the design intent for the interaction model for Local Haze includes enabling a good single-handed user experience. It is also assumed that single-handed use of the device would be typical for browsing collections of sensors via the scrolling gesture using the thumb. Drilldown on the sensor collection utilizes the tap gesture to view a summary of sensor data. Navigation among the core app areas utilizes a segmented controller UI component placed at the bottom of the screen and this was intentional to facilitate single-handed use.

Performance is an important issue in the Local Haze user experience, since accessing and preparing the sensor data can be a challenge. We did experience some challenges with performance in the app, especially on first use when sensor data is being loaded into the app. To help with this we employ techniquess such as “lazy loading” to improved the user experience . There are development plans to continue to improve app performance in later releases while delivering a user experience that is perceived to be performant.

BUSINESS RESULTS

I led a highly collaborative product design and development approach for this project that enabled delivery of a new and innovative mobile app for iPhone using publicly available APIs for air quality data.

As of February 2018 the Go to Market effort for the MVP release is in its initial stages but early signs are positive. Ratings are being posted on the App Store and initial reaction is very positive (all ratings so far are 5 stars). Success will be measured on the rate of adoption and engagement of the app, and we are using analytics to track this data. The next phase of work includes gathering user feedback and user research efforts to test users’ comprehension and the trustworthiness of the confidence ratings.

Although after the initial launch the app required some tweaking when one of the sensor APIs was changed, we adapted the code to accommodate the update and posted changes to the App Store.

Concurrently to the app launch, I developed and launched a marketing site for the Local Haze app. Visitors to the marketing site have shared positive feedback in particular the availability of a detailed FAQ explaining the “why” behind the app and the sources of data that Local Haze uses. The marketing site will continue to evolve and can be viewed at: https://humanlogic.com/localhaze/

In addition, I also launched a social media program for Local Haze including a Twitter feed featuring frequent postings of global air quality sensor confidence ratings. Air quality enthusiasts and manufacturers of air quality sensor and other related product are among the early followers. The Twitter feed can be viewed using the @localhaze handle or at: https://twitter.com/localhaze

FOR MORE INFORMATION

For more information on how I can help with designing and improving your digital products please visit my portfolio site at https://www.humanlogic.com or contact me at karen@humanlogic.com.

For more information on Local Haze please visit the Local Haze marketing site or visit the App Store to download Local Haze for free. Please send feedback to localhaze@humanlogic.com.

AUTHOR

Karen Donoghue is an experienced Product Designer who works with product teams to accelerate their digital product development and architect scalable solutions. She works closely with PM and Engineering teams to validate requirements, define user stories, flows and wireframes and build prototypes. Her clients include VMware, T-Mobile, The Associated Press, the U.S. government, SecurityScorecard (where she is also an Advisor), Resilient Systems (acquired in 2016 by IBM Security), and many technology startups. Her client work focuses on enterprise product and platform design for enterprise security, mobile, iOT, healthcare and financial services.

Karen earned a MS from the MIT Media Laboratory in Cambridge, MA and authored the first book linking business strategy to online user experience, published by McGraw-Hill in New York. Karen travels worldwide to work with her clients on user experience challenges and new product designs. To learn more about design planning and enhancing the outcomes of products, contact the Karen at karen [at] humanlogic [dot] com.

For more information please visit http://www.humanlogic.com

Credits:
Apple and iPhone are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc., registered in the U.S. and other countries.

Karen Donoghue

Written by

Interaction Architect and Advisor, HumanLogic

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade