Two smartphones displaying scheduling and management app screens, with a blue background.

Before

After

Improved the Fluidra Pro app to enhance functionality and modernize the user interface, focusing on both aesthetic appeal and overall user experience with a sleek, intuitive design. This resulted in a 40% increase in user engagement and a 25% boost in service efficiency.

Fluidra Pro App Redesign

Role

Product Designer, UX Research, System Designer

Tools

A colorful abstract design with overlapping rounded shapes in red, pink, purple, blue, and green.
Blue speech bubble icon with a white right-pointing triangle in the center, resembling a play button.
Colorful, abstract shapes resembling a stylized logo made of rounded rectangles and semi-circles in blue, green, pink, and yellow.
Blue geometric 3D shapes with black shadows on a white background.
Orange letters spelling 'Ai' on a dark red gradient background.
Icon with the letters 'A' and 'e' in purple on a dark blue background.
Yellow sign with black text and icons listing 'Information Architecture,' 'User Flow Optimization,' and 'Mobile.'
Yellow sign with black text reading '4 Sprints For Project.'
Yellow background with black text reading '6 Weeks of Work'.
Yellow sign with black text that reads, '42 Screens In Project.'

🌱 Introduction

The purpose of this project is to redesign the Fluidra Pro app for pool professionals, aiming to enhance efficiency and speed in completing tasks.

The revamped app features an improved information architecture and a faster user flow, starting with the schedule page and leading directly to the service page for logging services and inputting values.

This streamlined design ensures intuitive navigation, easier access to critical features, and significantly boosts productivity for pool professionals.

View Live App

👀 The Problem

“Pool professionals need a more efficient way to manage and log services to save time and increase productivity while on-site.”

❓ How Might We

Text on a blue background asks, "How might we improve the information architecture to ensure intuitive navigation and easier access to critical features?"

🔭 Exploring the Pre-Exisiting App

By using user feedback, data analytics, and analyzing the existing app, the goal was to find areas of friction and opportunities for improvement.

This process is essential for improving the app's functionality, building user loyalty, and meeting business goals.

Smartphone displaying a cluttered schedule app with dark blue and gray interface, using dark colors and excessive information hierarchy, with annotations highlighting poor label visibility, screen space issues, and inefficient expand/collapse functionality.
Comparison of two smartphone screens displaying a service log app with annotations highlighting interface issues. The left screen shows a collapsed feature with missing information, and the right screen shows an expanded feature with a service status indicator.

👩🏼‍🎨 Rebranding & Design System

Three cards showcasing different styles of the Open Sans typeface: regular, semi-bold, and bold, with a description about Open Sans font.
Display of five color swatches labeled Primary, Stroke, Text, Warning, Success, and Error, with the description about the color palette designed to evoke professionalism and water essence through shades of blue.
Screenshot of a design system user interface with a calendar for May 2023, a 'Start Service' button, a timer set to 0:00:00, and a section indicating no scheduled events.

🧩 The Solution

I started the redesigning with the schedule screens, as it is the starting point of the user flow. Our primary goal was to enhance usability and streamline the scheduling process. Here are the key improvements made.

Mobile app screen displaying scheduling interface with color-coded appointments, navigation menu, and annotations highlighting modern minimalistic design, user-focused features, and admin navigation elements.
Mobile app interface showing a schedule for technicians with details such as names, addresses, and appointment times. Includes navigation icons for dashboard, schedule, customers, and resources at the bottom.

💫Uncovering usability issues

To evaluate the redesigned screens, I created two prototypes: one of the existing app and another featuring the redesigned screens.

A circular logo with a light blue background and dark gray text that says 'Type Unmoderated.'
A light blue circle with the words "Tool" in smaller font and "Userlytics" in bold font inside it.
A light blue circular graphic displaying the text '#Users 12' in dark gray font.

For a comprehensive usability test, we focused on the following aspects:

  1. Task Completion Time

  2. User Feedback

  3. Error Rate

  4. Satisfaction Level

  5. Task Success Rate

📈 Results

From the feedback gathered, changes were made to allow users to have a more seamless experience.

Two smartphones displaying the Fluidra Pro app. The left phone shows a service log for a pool service appointment with details and options like Log Details, Notes, Images, and Analytics. The right phone shows detailed service information, including address, contact number, schedule, and a Start Service button, with a similar layout to the left screen.

  1. Removed Breadcrumbs: Saved real estate by using a navigation back arrow in the header.

  2. Organized Content with Widgets: Replaced cluttered status and service information with widgets for better clarity.

  3. Updated Tab Design: Aligned the look and feel of tabs with the overall screen design.

  4. Simplified Navigation: Removed the bottom navigation, focusing on the primary "Start Service" button.

Prototype Link

Existing App
Redesigned Screens

📱 The Final Designs

Several smartphones display screens of a customer service app, showing schedules, customer details, service logs, and claims management interfaces, arranged on a white surface.
Multiple smartphones displaying the FLUIDRA PRO app interface with features like scheduling, customer information, work orders, and status updates.

The Fluidra Pro App was launched January 2024

☀️ Reflecting on the Project

Admittedly, I encountered challenges along the way.

  • Ensuring accessibility in various working conditions, such as under direct sunlight. Extensive testing and iteration were necessary to achieve optimal contrast, readability, and usability in bright conditions.

  • Additionally, balancing functionality with a user-friendly interface was crucial to ensure the app was intuitive and efficient for busy professionals.

  • Other significant challenges included integrating real-time data and notifications to ensure timely updates without overwhelming the user, maintaining performance and responsiveness across different devices and network conditions, and implementing offline functionality to ensure key features were accessible even without an internet connection.

Despite the hurdles, each phase of this journey was meaningful.

🔅 More of my Projects 🔅

2023・Fluidra・Product Design I Design System・B2C I B2B I Automation

A component library built for both designers and engineers for a cutting-edge pool automation, currently under NDA, and with the deep belief that rules are made to be broken!

Illustration of people working on a website that is displayed on various devices including a computer monitor, tablet, and smartphone. Three characters are interacting with interface elements, such as charts, icons, and settings, with a background of gears and abstract shapes.
Digital dashboard for Backyard Paradise Pool website showing account perks, rebate statistics, and promotional offers.

Feb 2023・Fluidra・UX/UI Design I Design System・B2B I Dashboard I Onboarding

Seamlessly integrated Fluidra's rewards program into the Fluidra Pro B2B app and web platform, delivering a unified single sign-on experience for access to the complete suite of pool professional services and solutions.

A digital illustration of a friendly robot surrounded by finance and technology graphs, charts, and icons representing financial technology and AI-powered finance tools.

Working with financial data analyst experts I created the visual foundations, interactions and experience for a suit of AI-powered tools.

May 2024・Stealth Startup・Product Design I Design System・B2B I SaaS I D2C

2022・H&H Solutions・Product Design I Design System・B2C I Ecommerce

An Ecommerce website and app that offers the "Smart Pet Crate," an innovative crating solution that combines convenience, safety, and technology for pet owners. This product enhances pet care by integrating health monitoring features and ease of use.

Website screenshots for a smart pet crate product, showing a woman with a dog on a laptop and smartphone screens with product information and purchase options.