An eCommerce Digital Experience Transformation

Overview

R.S. Hughes is a North American and Central American industrial and safety supply distributor representing brands like 3M, Henkel/Loctite, GE, Brady, Milwaukee Tools, DuPont, and Kimberly Clark, serving B2B, B2C and B2G customers across aerospace, medical, manufacturing, electronics, and automotive industries. The company's digital presence had grown into three disconnected web properties with no mobile-responsive framework, creating friction at the exact moment customers most needed fast, on-the-go access: placing orders from job sites and warehouse floors. The solution was a full responsive rebuild, a company-wide rebrand, and the introduction of a unified UX/UI design and governance system — the first the company had ever had — paired with advanced optimization tools for data-driven decision-making. All of which continually inform the roadmap today.

SUMMARY

Role

UX/UI Design, Team lead for all UX/UI initiatives cross-functionally, led & mentored a team of 4 designers, user journey mapping, prototyping, conversion-centric UX governance, cross-functional design influence, visual intelligence & data storytelling, WCAG/accessibility, decisions & testing & design standards. Hired initially to fill a digital marketing and branding gap; promoted within weeks to lead web design, then the company's first lead role in UX/UI and digital experience.

Multi-year (2020-2026) ongoing engagement — from the initial mobile-responsive rebuild through continuous feature rollouts and optimization cycles through the year.

Timeline

Tools

Figma, FigJam, Figma Make, Adobe Creative Suite (XD, Photoshop, Illustrator), Microsoft Clarity, Google Analytics 4, Google Ads, Google Tag Manager, Claude, Copilot, WordPress, Bootstrap, Tailwind CSS, Visual Studio Code, Klaviyo, JIRA, Monday.com, Ninety.

THE CHALLENGES

User pain points

Field and warehouse customers needed to place and manage orders from mobile devices, but the existing site was lacking a modern responsive design framework. This forced heavy reliance on desktop or laptop computers typically stationed only in offices and warehouses — meaning customers often couldn't complete an order when and where they actually needed to. Signing in required unnecessary steps, the mobile menu lacked organization, and even a reordering tool of key importance ("Quick Lists") was too clunky and impractical because it lacked search, sort, and site-wide integration.

Reduce checkout and navigation friction to recover lost mobile conversions; unify three separate web properties (U.S., Mexico, and the Saunders division) under one coherent brand and UX standard; and build the first-ever UX/UI research and design governance function at the company so future decisions would be based on data rather than guesswork.

Business goals

Evidence

Google Analytics reporting showed customers were disproportionately completing orders from desktop machines tied to physical office/warehouse locations — a clear signal that the lack of mobile responsiveness, not lack of demand, was suppressing mobile order completion.

(prior mobile homepage menu & navigation)

(prior deskop homepage)

TARGET AUDIENCE & RESEARCH

B2B and B2G procurement and operations buyers across aerospace, medical, manufacturing, electronics, and automotive sectors — many of whom order on a recurring basis and need to do so from the field, not a desk. A secondary audience is internal: sales, marketing, and content teams needing a self-serve way to publish and manage digital content.

Voice-of-customer (VOC) initiatives and surveys, customer journey research and analysis, and ongoing behavioral analytics via Microsoft Clarity integrated with GA4, Google Ads, Google Tag Manager, and WordPress. This combined qualitative and quantitative data source became, one of the single most important implementations guiding the design and development roadmap.

Target groups

Research methods

Key findings

• Mobile users were dropping off due to excessive cognitive load in the navigation — critical tools like order history, purchasing management, and inventory/vending management were hard to locate.

• The existing "Quick Lists" reorder feature had real demand but was underused because it lacked basic usability features (search, sort, cross-page integration).

• A representative user journey analysis (see below) has served as a template to formalize how friction and drop-off points would be identified and prioritized going forward.

Learn more of the research and analysis by reviewing this example which includes the following:

• Performance Summary

• User Flows

• Behavior Patterns

• Site Analytics

• Funnel Analysis

• Campaign Performance

• User Segmentation

• Recommendations

IDEATION & STRATEGY

The homepage and global navigation were restructured to surface the highest-frequency tasks — sign in, product/category browsing, promotions, order history, purchasing, inventory/vending management, and region/language selection — directly from the homepage and primary menu, rather than burying them in secondary navigation.

Rather than treating "Quick Lists" as a static list feature, the flow was redesigned around the reality of how customers actually reorder: recurring, scheduled, and preference-based. Adding search, sort, and page-level integration turned a rarely-used feature into what later became the single highest-traffic user flow on the site.

Information architecture

User flow strategy

Why?

The team grounded decisions in human-centered design and cognitive psychology principles rather than aesthetic preference alone — prioritizing reduced cognitive load and fewer steps to task completion. This was paired with a full rebrand (new logo, brand strategy, and comprehensive brand guide) so that the UX overhaul and the visual identity shift would land as one coherent relaunch across all three properties instead of a patchwork of separate updates.

Cross-functional strategy

Because the properties had been built independently over time by different teams, the strategic priority was governance as much as design — establishing a single design language, a UX/UI design system, and shared standards that IT, engineering, operations, development, and marketing teams could all build against going forward.

EXAMPLE

DESIGN & SOLUTION

The prior design had no responsive framework and an inefficient menu, forcing extra steps in navigating key touch points such as sign in, reordering, and search. The redesign, built on updated Bootstrap frameworks, introduced a fully responsive layout with a reorganized menu giving one-tap access to sign-in, reordering, search, lists, products, categories, promotions, featured items, order history, purchasing, inventory/vending management, the region/language selector and much more.

Rebuilt in parallel with the mobile experience to carry the same information hierarchy, new design system brand identity across breakpoints, rather than treating desktop and mobile as separate design problems.

Mobile homepage & navigation

Desktop experience

Quick Lists feature

Elevated from an underused utility into a fully searchable, sortable, site-integrated reordering tool — directly addressing the biggest usability pain point with the prior site experience.

Regional and divisional sites

The Mexico site (rshughes.mx) and the Saunders division site (a converting service integrated into R.S. Hughes's purchasing process) were brought into the same unified visual and interaction system rather than left as visually distinct sub-brands.

SupplySight landing page

This landing page introduced the site's first video hero banner and entry animations to support the launch of a new inventory management program, alongside reCAPTCHA-based bot protection to secure form submissions and phone dial-in against fraud and account takeover.

Newsletter and CRM integration

Designed the company's first newsletter subscription prompt, integrated with Klaviyo CRM for instant data sync, automated welcome flows, smart subscriber segmentation, and cleaner, deduplicated data collection.

Design choices

Visual and interaction decisions throughout — layout hierarchy, menu structure, and content placement — were driven by the same cognitive-load-reduction principle established in the strategy phase, formalized into a new UX/UI design system in conjunction to brand guidlines to keep typography, color, and layout consistent across every touchpoint.

(prior menu)

(current menu)

RESULTS & LEARNINGS

+23%

All strategies of the UX/UI, DX & brand launch have been key contributors to stock values increasing over 23% YoY since 2022, alongside continued record annual growth rates.

+8.6%

Streamlined the checkout flow from 6 steps to 3, reflecting an 8.6% YoY growth rate in daily sales.

#1

The redesigned "Quick Lists" went from one of the least used features to the #1 highest-traffic user flow within only 3 weeks of release.

+300%

Moving to Klaviyo increased open & click rates by 300% through segmentation, automation, and continuous optimization.

+268%

Launching the new RSH website and subsequent updates drove web sales from $38M to $140M (+268%) from 2020-2024, and accounted for ~30-35% of revenue.

+92%

The RSH redesigned digital experience led a surge from 1.4M to 2.7M users in 2025 representing more than a 92% YoY increase.

+9%

Reduced lost margin and increased profits over 9% with new "Last Call" inventory clearance feature which included an all new UX/UI.

+7%

Growth in subscribers to the first company newsletter within four weeks post launch.

+64%

Open rate of company newsletter increased 64% within the first 4 weeks of launch.

+4%

Newsetter click-through rates increased after the first 4 weeks.

+10%

Blog landing page sessions YoY increase, following the Microsoft Clarity/GA4-informed UX strategy

+63%

Lift in average time on page YoY, following the Microsoft Clarity/GA4-informed UX strategy

CONCLUSIONS

Qualitative feedback

The rebuilt Quick Lists feature and broader site relaunch received strongly positive feedback from customers, partners, and internal teams alike.

Treating the rebrand and the UX/UI overhaul as one coordinated relaunch — rather than sequencing them — meant the new brand identity and the new usability standards reinforced each other instead of competing for attention. Building analytics infrastructure (Microsoft Clarity + GA4) into the process early gave the team a durable, ongoing decision-making tool rather than a one-time research exercise.

Underused, high-friction features like the original Quick Lists tool are easy to overlook until usage data or VOC research surfaces them — a more proactive, recurring audit cadence for existing (not just new) features could catch this kind of hidden friction earlier, before it accumulates across multiple properties and years.

What could still improve

What remains & next steps

Implementing the additional recommendations which have remained medium to low priority pain points identified within the user journey analysis. Such as the form simplification (streamlining steps and reducing cognitive load) as well as those still yet to be uncovered. Additional design, iteration, and testing of those remain as well as further research and analysis of the most recent GA4 reports.

Let's explore how we can remove complexity from your digital experience and turn it into a high-performance system which has measurable impact for your organization.

Crafting experiences that drive measurable impact and invoke a genuine lasting connection with the brand.

SITEMAP

justin@howlettarts.com →

Washington, Utah (remote)

© 2026 HowlettArts - All rights reserved. All other trademarks, logos, and brand names are the property of their respective owners.

Designed & engineered with intent.

CONTACT