B2B Replatform

Enterprise Experience Design

Resideo is primarily a B2B company that drives the majority of its revenue selling products through a complex digital ecosystem. The legacy platform, developed in the early 2000s, managed everything from negotiated pricing and private labeling to warranty returns and invoicing. However, decades of technical debt resulted in a high-friction experience for distributors.

The replatform initiative focused on two core pillars: eliminating operational friction and modernizing the visual and interactive framework. Given the scale of the site, we divided the architecture into strategic workstreams. I led the design for critical high-revenue areas, including Quick Order, Private Label, Order Center (Warranty & Returns), Order History, and the Digital Pricebook.

Project Info

Role:
UX/UI Designer
Service:
Web
Context:
Resideo (Honeywell Home)
Focus pro device on a wall: lifestyle image.
Focus pro device along with a firstalert Mobile app, showing its wifi capabilities.

Research and Strategy: Mapping the Friction

We began by engaging directly with the primary users of the site, including internal Resideo admins and external distributors who rely on the platform daily. Through comprehensive user testing, we identified how these professionals navigated the legacy system.

We categorized our findings into a priority matrix to identify "quick wins" and long term structural improvements. These insights allowed us to build an expedited Customer Journey Map. By visualizing the real world friction points, we ensured that every design decision was rooted in solving a specific user pain point or business inefficiency.

Focus pro device mockup with all segements turned on.Shows an entire segemented sections of a screen.

The Design System: An Atomic Approach

To ensure consistency across thousands of pages, I was heavily involved in building a robust design system from the ground up. We adopted an atomic design methodology to create a scalable and maintainable framework:

Design Tokens:
We defined the foundation through styles for typography, color, and spacing.

Atoms: We built individual UI components such as navigation links, buttons, and input fields.

Molecules: We combined atoms to create functional sections like page headers, complex data tables, and cards.

Organisms and Templates: Finally, we compiled these into standardized page templates that allow for rapid deployment of new features.The result was a modern, minimal UI that functions as a high-performance tool, allowing B2B users to accomplish professional tasks with speed and precision.

Focus pro device mockup with all segements turned on.Focus pro device mockup with all segements turned on.Focus pro device mockup with all segements turned on.

Core Workstreams

Private Label: Boosting User Confidence
Private labeling accounts for over 50% of our sales, making it the most critical feature of the site. I designed a guided, multi-step experience that generates a live preview of the label as users enter data or upload images. This immediate feedback loop significantly increased user confidence. We also streamlined the connection between a physical device and a custom SKU, while creating a robust admin dashboard for Resideo staff to manage parts and labels globally.

Quick Order: Efficiency at Scale
I developed a streamlined, table-based interface for high-volume ordering. Users can enter products manually with dynamic suggestions and error handling, or they can upload a spreadsheet directly to the page for near-instant processing.

Order Center: A Connected Ecosystem
We broke down the silos between different departments by connecting the Order Center. Returns are now directly linked to order history for easier documentation, and every order is tied to its specific invoice. This interconnected architecture allows users to jump from a tracking number to a financial record in a single click.

Design to Development: Ensuring Integrity

Design only represents half of the product journey. I worked in lockstep with the engineering team throughout the development phase to ensure the final build matched our high-fidelity specifications. I was deeply involved in the Visual QA and Functional QA processes, verifying that the interactions and logic derived from our initial research were executed perfectly in the live environment.

The replatforming of the Resideo B2B site has transformed a legacy utility into a modern, competitive commerce engine. By focusing on the specific needs of professional distributors, we reduced the time required to complete complex orders and simplified the management of private label brands. As the site nears its full public launch, early feedback indicates a significant reduction in support calls and a measurable increase in user satisfaction across the professional channel.

Next Project

Focus PRO

VIEW DETAILS
VIEW DETAILS
VIEW DETAILS
View Case Study