UX/UI
Duration: Feb 2020-Present
Figma, Sketch
Team:
Jen Strong
Kristen Sewell
Nic Echeverri
Kate Samuelson
SaaS:
Bontouch
Mission:
Filtrete Smart App pairs with the Filtrete Smart Air Filter and Filtrete Smart Air Purifier to help the user understand and manage their home’s air quality.
It provides useful tips and alerts to their home’s environment and will notify the user when it’s time to replace their filters based on air flow, usage and time.
MY ROLE
I was tasked with giving the app a complete overhaul in aesthetics by modernizing the visual system/identity, creating a clear hierarchy of information, improving the UX and making sure accessibility standards were being met.
Original Design
The original design was set up with cards that represent each product/device owned by the user and locations added by the user. The screen on the left is the My Air screen which is the home screen on the app. The My Air screen consists of cards that align with specific devices or locations. When you tap on those cards you are brought to a detail screen of the coinciding subject.
USER RESEARCH
The layout and the overall UX of the app was updated based on what users were saying in the app reviews and based on the findings from past user testing. The key issues discovered were:
01. Horizontal Scroll
The horizontal scroll seemed to be the biggest issue that came up in the user testing. Seventy-three percent of the participants did not realize the h-scroll existed.
02. Screen Layout
A big complaint from the users in the app reviews was not understanding which device they were looking at when viewing the cards.
03. Confusing Information
During testing, when users were asked to explain what they were reading on each card, many of them didn’t understand what was being communicated.
04. Accessibility
Some users found many parts of the screen to be illegible such as the date in the top left corner and the headers when placed on top of the blue color.
MY AIR (Home) Screen
Updated the home screen to a more digestible layout with the following changes:
• Remove horizontal scroll
• Combine all devices into one list
• Simplify card design
• Pass accessibility standards
CARD/LAYOUT REDESIGN
Updated the filter, device and location card components to be consistent but dynamic for development purposes and readable/digestible to the user.
FINAL ITERATION
The background was updated so, as the user scrolls, it gradually transforms the air waves into a straight bar which took care of the accessibility issue and allowed for a cleaner layout.
The product cards were standardized and a dynamic layout was created with the use of icons to visually show the user what product/device they were viewing.
Detail Screen
Updated the details screen to have a clearer info hierarchy with the following changes:
• Create a separate screen for the graph
• Design graph to be interactive and use color scheme
• Create card components for digestible layout
CARD/LAYOUT REDESIGN
Tapping on any of the cards will bring you to a detail screen for the specific device or location. When you tap on a location or device card, the detail screen will give you an in-depth look at the current air quality, allow you to control your device, tell you the remaining life and allow you to re-order filters. The graph that was shown on the old design has been re-designed and is accessible by tapping the circle at the top or the pollutant cards at the bottom.
GRAPH REDESIGN
The graph was redesigned as a separate screen and allows users to interactively “scrub” through an infinite amount of time to see their air quality in a hourly, daily or monthly view. The colors aligning with the air quality scores were used as a way to bring visual interest and delight to the user.
Activity Screen
Updated screen to be more engaging and educational via the following changes:
• Combine tips and alerts into one feed
• Create standardized card components
• Create visual interest by using images and icons
ALERTS CARD UPDATES
One to three alerts will be shown in the standard view, however, the user has the ability to “see all” on the top right of the screen. Alerts are in chronological order. Alerts will expire and disappear depending on the type. Ex: an offline alert will have a shorter shelf life than a filter replacement alert. Any alert that has been addressed/tapped on will be greyed out.
TIPS CARD/LAYOUT REDESIGN
Layout 1 leads to an article view. The “read more” leads to the article (and so does the entire card). Layout 2 leads nowhere. The card is not tappable and is indicated by a non-white background. Layout 3 leads to a web page. The link to an external url is marked with an icon.
FINAL ITERATION
Redesigned the Tips and Alerts screen to make it more engaging and educational, thereby increasing overall app retention. Combined tips and alerts into one feed to improve visibility and to bring editorial content front and center. Created a standardized layout for editorial content to make the design more efficient to develop and flexible to use. Added visual interest by showing images and icons in the feed.
QUANTITATIVE OUTCOME
The new feed was rolled out in September of 2021. Since then, the user activity on the alerts has increased by 3,904% and the user activity on the tips has increased 867%.
