Mobile-first Ariat.com Refresh That Cut Cart Abandonment 32% and Turned Marketing into a Partner

I led a mobile-first site refresh and the start of a design system that improved discovery, lifted mobile conversion, and repaired a fractured relationship with marketing.

32%
Reduced cart abandonment
45%
Increased product discovery
58%
Increased mobile conversions

Executive Summary

I led a mobile-first refresh of Ariat.com and kicked off a design system that fixed glaring UX/ADA failures, raised product discoverability, and materially improved conversion. The work reduced cart abandonment, improved product discovery, and turned marketing from a territorial blocker into a regular collaborator — which unlocked follow-on homepage and category work driven by the marketing team. A byproduct was that our design team became a respected extension of creative rather than an implementation shop, which changed how product and marketing worked together going forward.

The Challenge

Ariat’s site had used the same design patterns for almost eight years, was optimized for desktop, and no longer reflected the quality of the product or the commercial direction the business was taking — a gap that widened as e-commerce accelerated during COVID. The core technical problem was obvious: the site was not mobile-ready and contained basic UX and accessibility failures. The political problem was equally high-stakes: marketing saw the site as their turf and resisted an overhaul, so any redesign risked becoming a cross-functional standoff rather than a business upgrade. Fixing the product experience therefore required changing how teams worked, not just how pages looked.

My Role

I owned the end-to-end product and design strategy for the refresh: I led the exploratory design, created core components, and guided two designers to start the design system. I coordinated across marketing, site merchandising, development, and product and converted the effort into a roadmap item that rolled out across three sprints. That scope included both the craft work (components, UI patterns, ADA fixes) and the political work (earning marketing’s trust and negotiating scope).

Research & Discovery

Rather than long upfront usability studies, I started with a rigorous site audit and light experiments. The audit exposed numerous UX and ADA failures — contrast and font-size issues, poor spacing and tap targets, and missing alt text — which gave us immediate, defensible fixes to prioritize. We also used quick A/B tests (for example, button color changes) and Baymard benchmarking to translate best-practice findings into a coherent set of recommendations that the team could act on. Those artifacts changed the conversation from opinion to evidence and made the case for a mobile-first approach.

Strategy

My strategic bet was pragmatic: instead of proposing a full brand overhaul that would stall with marketing, I re-skinned the existing homepage and phased in mobile-first UI and UX changes while starting a separate design-system project. I prioritized cleaning up margins for mobile, rolling out brand fonts used in marketing, and building reusable components so further pages could be iterated quickly. The approach bought credibility with marketing while delivering measurable improvements to conversion and discoverability.

Tradeoffs & Tension

The hardest choice was how far to push the brand versus how much of marketing’s existing structure to preserve. I decided to meet marketing halfway: we kept their site structure and visual approach to avoid scaring them off, but applied a new mobile-first UI and components. That compromise cost us the chance for a bolder homepage and funnel redesign in the short term, but it removed the biggest barrier to execution — marketing’s resistance — and enabled the team to ship.

Execution

I did the exploratory design work, created the core components, and guided two designers to assemble the start of a design system. Practically, we cleaned up page margins for mobile, rolled out typography from marketing assets, applied a new skin, and shipped component-driven updates to PDPs and PLPs. I coordinated with merchandising for category and navigation changes, worked with product on richer PDP content, and ran the rollout across three sprints while holding weekly alignment meetings with creative to rebuild trust.

Impact

The redesign delivered clear commercial lift: after launch we saw a 32% reduction in cart abandonment, a 45% improvement in product discovery, and a 58% increase in mobile conversions — outcomes I tracked as primary signals that the mobile-first approach and usability fixes worked. Beyond raw metrics, the project established our team as design experts: marketing began relying on our data and requested further homepage and category work, and the design team was treated as an extension of creative rather than an execution vendor. That shift unlocked subsequent redesigns for key segments and PDP content.

Reflection

In retrospect I would have pushed harder on the brand refresh. I played it safe to secure buy-in, and that cost us an opportunity to elevate the site’s style more aggressively. If I did it again I would introduce more bespoke brand flavor — for example, leveraging print and product-tag design language — while preserving the pragmatic, component-first rollout that made the work executable. The lesson was clear: political constraints sometimes require a phased approach, but you should plan the follow-on work upfront so the team can capture the stylistic gains once trust is established.

Recovered from 26 adaptive interviews, referencing 35 evidence-backed claims.

Every claim is grounded in real work. Nothing was invented.