Pure Connect
Tablet-optimized, pipeline inspection application for tool configuration, field operation tracking, and automatic data analysis.
Early UI flow for Done app.
Design System
Conducting audits, optimizing, and expanding design systems to enhance efficiency and scalability.

The Challenge

Xylem's software lacks consistency in usability and design continuity. Solution teams need UI components adhering to optimal UX/UI standards for consistent experiences across the software suite.

Design System Audit

Xylem's design system is continuously evolving, albeit at a slow pace due to a lean design team relative to the organization's size. There's limited bandwidth for adding and documenting new pattern components to the library. UI audits reveal that solution teams using design library components frequently encounter usability and interface issues in their products. Discussions across teams reveal a consensus: while the existing documented components are beneficial, their optimal utilization often remains unclear.
Xylem UI Audit.

Design System Common Templates

To enhance teams' understanding of utilizing design library components for unified, optimal UIs, I created a set of templates based on the most commonly repeated user flows and features found within Xylem solutions.

Common user flows surfaced during a Figjam brainstorm session.
Various template variants are established for common features, including object lists, map views, dashboards, workflow management, alarms, messages, notifications, asset detail views, and object detail views. Figma design files for these feature templates are organized within a centralized Figma project accessible to all solution teams.

Object list template variants.
Object list with map view toggle template.

Generic Application Design and Prototypes

A generic application, built upon common feature templates, is designed for both desktop and mobile solutions. Figma clickable prototypes are created and presented to enterprise-wide product teams. Existing teams adopt these elements as reference points for aligning current UI designs with the latest design system best practices. Strategy groups initiate the use of the generic prototypes as "starter applications" to expedite the development of new solution proof of concepts.
Generic App Figma clickable prototype.

Expanded Design System Collaboration

As the design system administrator, I expanded editing privileges to more designers. Discussions, inquiries, and audits of existing patterns and components flourish on Figma, with increased participation from the global design team. As designers acknowledge their shared ownership of the design library, the pace of contribution and collaboration on design system components rises consistently.
Design system collaboration.
Next Project →

Insights

© 2024 All rights reserved.
Thanks for dropping by!