ICD Concept

Fluidra

Role

Interaction Designer, Researcher

Timeline

June 2022 - January 2023

Tools

Figma, FigJam, Miro

Deliverables

6 Feature concepts, 10 User flows, & Design system

Overview

Fluidra, a pool and wellness company, partnered with Frog to design a modern interface for their In Can Display (ICD), a connected app that controls pool installations. The goal was to create a user-friendly experience that aligns with their digital product catalog and supports pool owners and professionals throughout a pool’s lifespan. The design needed to balance hardware limitations, such as screen resolution, with functionality and aesthetics. The result was a simple yet visually appealing interface that provides at-a-glance information, smart features, and intuitive one-touch controls, while allowing users to access more detailed options when needed.

Diving Into the Challenge

Designing for Two Distinct Users

At the core of this project was a diverse user base with vastly different needs.

  • Homeowners wanted a simple, no-fuss way to adjust pool temperature, filtration, and lighting without navigating complex menus.

  • Pool professionals required a robust system with real-time diagnostics, scheduling capabilities, and detailed equipment insights to manage multiple installations efficiently.

However, designing for simplicity without sacrificing functionality presented a significant challenge. The ICD’s hardware constraints, including limited screen resolution, meant every interaction had to be carefully designed to maximize clarity and efficiency.

My Role:

  • Led the interaction design strategy, ensuring that both casual users and professionals could navigate the system with ease.

  • Developed intuitive user flows that simplified navigation while maintaining access to advanced features for professionals.

  • Designed prototypes for usability testing, helping the team validate and refine core interactions.

  • Collaborated with engineers to optimize UI assets for embedded systems, ensuring smooth implementation.

Quick Start

We gained insight into each participant's back- ground and initiated the interactive prototype with a focus on Quick Start.

Scheduling

Participants utilized two versions of a scheduling tool, namely a calendar and an event feed, to establish scenes and events.

Navigation

Participants carried out tasks associated with exploring the ICD and its main functionalities.

Comparison Activity

We delved into their preferences concerning scheduling, status, and equipment options.

Testing

In testing our ICD prototype, we aimed to integrate user-desired features, improve interactions, and tailor visual design. Participants managed to navigate the system, highlighting the need for customization and expressing interest in predictive features. However, some elements, like the "scenes" feature and certain icons, caused confusion. The feedback underscored the importance of clear visuals and revealed a preference for simpler controls among homeowners, whereas professionals favored detailed stats.

Refining the design

Post testing, we incorporated feedback into our iterations to enhance the navigation clarity and ease of discovery, using a mix of words and icons. We defined the 'open world' from an equipment-centric perspective, incorporating tool tips for configuration and using illustrations for swift recognition of dense information. As foundational elements of the ICD experience, equipment and equipment grouping were emphasized. We identified the need for further refinement of the familiar calendar view regarding information density, and saw potential to improve the app's information architecture, exploring scenarios on navigation and flow.

Home

The home screen welcomes the user with a high-level summary overview of the site status, including key indicators such as filter pump flow rate, pH level, and temperature. This screen also offers a custom set of “Quick actions”, that provide quick on/off controls for frequently used features such as Pool mode.

Equipment

The equipment page presents pros with an overview of equipment, the current status of each piece of equipment, with data visualizations to alert them to key equipment readings and aid error diagnosis. This list is dynamic, prioritizing the order of equipment based on what is currently active or has a warning/error.

Scheduling

The activity page is two-fold: 1) The calendar view allows users to see scheduled maintenance and recreation activities for the day, week, and beyond. And 2) The feed serves as a log of activites at the site, including both scheduled and conditional activities, user actions, equipment alerts, etc.

Command & Control Panel

Long pressing on buttons or cards opens a control panel, giving access to more information or actions. This is also where the user may customize specific parameters, task equipment to activities, and view product details (manufacturer, serial number, etc.)

System Preferences

System preferences allows users to program and control any feature on the ICD. It controls everything from the local device features like brightness and account management to programing conditional actions based on weather or time of day.

Activities

Users can task equipment to run in maintenance and recreation-related activities—this flow allows for flexibility in assigning a time and conditions (such as weather or an equipment reading) to trigger the activity.

Smart Features

Across the system, we see opportunities for IQ to be proactive in presenting meaningful insights, intelligently detecting equipment, and suggesting automation activities. There is opportunity for IQ to evolve into a trusted pool assistant.

Feature Breakdown

NGA Design System

The Fluidra’s NGA Design System’s patterns and components provide a unified language and consistent look-and-feel for designing products within the Fluidra Future iAquaLink ecosystem. The design team has kept and expanded these principles throughout the 3rd design phase and added new guidelines to better comply with contrast and arms length readability.

Wrap up

This project was a unique and fun test that required a mixed skillset to support the development of the digital briefcase. Overall my contributions in feature support aided in reducing information overload, improved workflow efficiency and dynamic client engagement. 

While the updates to the design system assure a responsive experience across devices with improved flexibilty breaking away from the iOS library. Centralizing every reusable element to one library streamlines the design process promoting consistency and effortlessly maintaining brand alignment across the experience.