Pool Automation
ICD Design
Overview
Fluidra, a company in the pool and wellness sector, provides an array of equipment, including filtration systems, LED lighting, heating, and decorative elements for swimming pools. They also offer connected apps for remote control of these installations, one of them being the ICD (In Can Display). Fluidra came to frog to design a modern experience for the ICD that could coexist within their digital catalog of products & provide value at every stage of a pools lifespan.The task required comprehending the needs of pool owners and professionals while considering hardware limitations in screen resolution. To execute this, we designed a functional, visually appealing interface that provides information at a glance and maintained simplicity. The interactions developed offer smart features & simple one touch controls while also giving the affordance to drill down deeper for more details or complex tasks.
Details
Timeline: June 2022 - January 2023
Role: Interaction Designer & Researcher
Team: 1 Design director, 1 Program manager, 2 Interaction designers, 2 Visual designer
Tools: Figma, Figjam, Miro
Deliverables: 6 Feature concepts, 10 User flows, & Design system
Phase 1 Design
Final Design
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.
Testing Activities
Introduction and Quick Start
We gained insight into each participant's background and initiated the interactive prototype with a focus on Quick Start.
Navigation
Participants carried out tasks associated with exploring the ICD and its main functionalities.
Scheduling
Participants utilized two versions of a scheduling tool, namely a calendar and an event feed, to establish scenes and events.
Comparison Activity
We delved into their preferences concerning scheduling, status, and equipment options.
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.
Feature Breakdown
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.
Maintenance & recreational 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.
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.
Total Program Deliverables
Phase 1
D1. Discovery Summary
D2. Digital Concept Sketches
D3. Product Strategy
D4. Digital UI Direction
D5. Phase 2 Project Plan
Phase 2
D6. Sprint 2 Screens
D7. Final Key Screen UI
D8. ICD Screenflows
D9. Foundational Design Language System
D10. Design Task Backlog
Phase 3
D11. New Feature - Screenflow & UI Screens
D12. New Feature - Screenflow & UI Screens
D13. Screen Prototyping Details & Support
D14. Icon Illustrations
D15. DLS Enhancements & Documentation
D16. Design Backlog Update
