Pentair Water Solutions

About

See how Impekable’s design and development services helped Pentair quickly and easily deploy cutting-edge enterprise apps to support diverse user groups.

Project length
Several Years
Technology Partners
ReactNative, ReactJS, Storybook, Jira, InVision, Zeplin, Adobe XD

Services

UX Design
UI Design
Design Systems
Mobile Development
Web Development
ReactNative Development
SaaS Development

Overview

Pentair is a leading provider of residential, commercial, municipal, agricultural, and industrial water solutions, with business lines encompassing pool and spa products, water softening and filtration units, and water supply and disposal systems.

Pentair was an early adopter of the Internet of Things (IoT) movement, recognizing that both its personal and professional users would benefit from better connectivity between its products and their smart devices. But although the company had initially attempted to create these mobile connectors internally, the resulting apps were slow and were not designed with user experience (UX) in mind, leading to complaints.

To better organize the apps and improve their overall usability, Pentair engaged Impekable through a connection with a former employee.

The project began with our recommendation to normalize their scattered application design language into a unified component library, using React Native. This approach aimed to reduce redundant code and create a consistent design language across different applications.

The Solution

Given the size of its organization, the scope of the project, and the number of distinct user groups involved, Impekable advised Pentair to first invest in the creation of a new design system that would form the building blocks of its future apps.

The extensive design system created by Impekable encompassed:

  • An overall UI style guide
  • A library of design components that could be drawn on quickly to create new apps and experiences
  • Design guidance on where and how to deploy these components
  • An icon library
  • Additional content and accessibility guidelines

The design system was developed from scratch, starting with the smallest conceptual elements (known as atoms) like the Pentair color blue and shades of gray. These atoms formed the basis for more complex components (known as molecules and organisms) like buttons and card components.

The design system followed the Atomic Design methodology, which organizes components into atoms, molecules, organisms, templates, and pages. This structured approach ensured a cohesive and scalable design system.

The component library’s theme defined the entire design language: including colors, spacing, font weights, and sizing across different platforms. This theme served as the foundation for all components, ensuring consistency and reusability.

Ultimately, these and other elements enabled our team to create visual consistency between Pentair’s different apps and experiences, in addition to speeding up subsequent design processes.

Tailored Experiences for Distinct User Groups

Following the approval of the new design system, Impekable was able to quickly spin up design concepts for new web and mobile apps to support Pentair’s various user groups — each of which has vastly different needs and requirements.

For instance, a few of the initial concepts created included:

  • A Home App for retail consumers of Pentair’s solutions, which allows users to monitor the status and activity of their pool units, showers, water softeners, sump pumps, and other connected devices.
  • A Dealer Portal, from which Pentair Partners can view all the tools and resources needed to effectively sell and service Pentair’s different product lines.
  • A mobile field service app so that Pentair’s technicians can access customer devices and detailed troubleshooting information when working on-site. 

Component Development Impact

Key components developed for the design system included buttons, cards, checkboxes, chips, dropdowns, and headers. Each component was designed to be flexible and customizable to fit different use cases.

An example of a complex component is the card component, which is used to present data in a structured format. Using the design system and Storybook significantly improved the speed and efficiency of the development process.

By focusing on reusability, the team was able to eliminate duplication and streamline the creation of new applications.

Implementation of Storybook

Following the approval of the new design system, Storybook played a crucial role as a live sandbox for developing and testing components in isolation. It allowed for real-time visualization and interaction with components, making the development process more efficient.

Components were developed using Storybook, starting with basic elements and iteratively adding features and variations. This process enabled rapid prototyping and testing of components before their integration into applications.

Moving From Design to Development

Following our work on Pentair’s design system and app concepts, Impekable stepped into a development role in order to fill experience gaps on Pentair’s team and build both web and mobile applications for iOS and Android platforms. In particular, Pentair appreciated our team’s agile, yet thorough approach. According to one Pentair Product Manager, “Impekable has now become our trusted partner. They’ve been developing apps for top companies, so they’ve adopted the right processes to deliver fast and stable solutions.“

The Results

Impekable delivered a unified library that simplified app development for Pentair. With a smooth transition, Pentair’s team quickly adopted and enhanced the system. Engineered for scalability, it accommodates future web application development with the same mobile components.

Not only did Impekable’s work deliver modern, sophisticated app experiences for Pentair’s multiple user groups, but the design system we built for the company also ensures that future products can be built quickly, in a visually consistent way.

Further, the new functionality and streamlined user interfaces found within Pentair’s new apps, have empowered the company’s customers, Partners, and personnel to develop deeper relationships with the brand and its products — contributing positively to Pentair’s business results.

Testimonials

What our clients
say about us.

“Their team has delivered only reliable and fast solutions, and are a valuable partner for all mobile and backend development work. Impekable is a proactive and trustworthy company that not only over delivers but also pays close attention to detail, producing nothing but successful results.”

Product Manager, Pentair

How Can We Help?

Whether you’re a major enterprise player like Pentair or a small, funded startup with big ideas,

Impekable’s flexible design and development solutions can help get your next project across the finish line.

Reach out for more information on our leading-edge solutions.

Please enable JavaScript in your browser to complete this form.

Explore More Projects

See the Impekable Difference in Action

We help companies achieve their digital dreams, whether you’re an ambitious startup or a Fortune 500 leader. Contact us to see the impact our Impekable services can have on your next digital project.

Get In Touch