← ARIAT PORTFOLIOSITEWIDE REFRESH

ARIAT.COM / SITEWIDE EXPERIENCE TRANSFORMATION

I led Ariat.com’s redesign, from homepage to checkout.

I earned executive approval for a new design direction, then led workshops and coached designers as we applied it across the shopping experience.

ROLE
UX/UI Manager and function lead, working as a hands-on player-coach
INITIAL REFRESH
January to June 2023, followed by ongoing product evolution
EXECUTIVE AUDIENCE
CMO, Chief eCommerce Officer, Brand, and Creative leadership
SCOPE
Homepage through checkout, across six audience and category experiences

THE EXPERIENCE IN PRACTICE

Shared patterns carried into product pages and checkout.

The refresh established patterns for product discovery, Save for Later, and purchase.

Three Ariat mobile experiences showing a product page, Saved for Later, and checkout
MOBILE-FIRST PRINCIPLE / PRODUCT DETAIL, SAVED INTENT, AND CHECKOUT

01 / FIND THE REAL OPPORTUNITY

I kept the homepage familiar so the new UI was easier to evaluate.

I applied the new UI to Marketing’s existing homepage layout so leaders could evaluate the visual changes on a familiar page.

Earlier redesign proposals had changed the homepage layout and the UI at the same time. That felt like too big a departure and made it harder to gain support.

The CMO, Chief eCommerce Officer, Brand, and Creative leadership approved the direction, giving me support to extend the work across the broader commerce experience.

02 / ESTABLISH THE DIRECTION

Four interface rules guided the refresh.

The approved homepage established rules we could use on other pages.

TYPE

Calmer typography

A thinner global type pairing and less reliance on all caps improved scanning and gave the brand more range.

RHYTHM

Consistent spacing

An 8-point grid brought repeatable rhythm to modules that had previously been composed one page at a time.

TOUCH

Clearer actions

Larger controls and clearer button treatments made important actions easier to see and use on mobile.

STORY

Flexible storytelling

Responsive image formats and modular layouts gave Marketing more expression without breaking the customer journey.

Ariat homepage design direction showing the previous experience beside the proposed visual refresh and its design principles
THE 2023 PROPOSAL MADE THE NEW VISUAL AND INTERACTION RULES CONCRETE

A SYSTEM WITH RANGE

The direction was designed to hold together across product launches, brand stories, seasonal campaigns, and different customer missions.

A range of Ariat homepage hero treatments across product and brand campaigns
SELECTED HOMEPAGE EXPRESSIONS / ONE RESPONSIVE FOUNDATION

03 / EXPAND ACROSS THE ECOSYSTEM

One direction had to support every way into the brand.

The same patterns needed to support six audiences and categories, from product discovery through checkout.

  1. 01

    HOME

    Brand and product discovery

  2. 02

    NAV + SEARCH

    Intent and wayfinding

  3. 03

    CLP

    Seasonal category stories

  4. 04

    PLP

    Product discovery systems

  5. 05

    PDP

    Confidence and decision support

  6. 06

    BAG

    Review and return paths

  7. 07

    CHECKOUT

    A clearer finish

CLP / CATEGORY STORYTELLING
MEN'SWOMEN'SKIDSWESTERNWORKEQUESTRIAN
PLP / CONFIGURABLE DISCOVERY

Multiple templates, merchandising modules, category patterns, filters, and promotional systems

EDITORIAL CHANNELARIAT LIFE

Stories that connect brand, product, and discovery

SHARED EXPERIENCE FOUNDATION

Responsive behavior / accessibility / research / experimentation / UX governance

04 / KEEP THE WORK ALIVE

The refresh became an ongoing product practice.

After the 2023 release, I used workshops and performance data to guide the next rounds of work.

  1. 012023

    Establish the direction

    I used the homepage to make the larger experience tangible. The proposal introduced a calmer type system, an 8-point spacing grid, larger touch targets, clearer calls to action, more flexible imagery, and a stronger treatment for Ariat Life.

  2. 022024

    Extend the operating model

    We clarified each page’s purpose and agreed on metrics with partner teams. UX became more involved in experimentation and in-season improvements.

  3. 032025 +

    Keep learning and evolving

    I led another homepage workshop and wireframe sprint when the page became crowded again. The new test cut its length nearly in half, increased content engagement, and gave the team better evidence for what to adjust next.

WORKING SESSION / 2025

A workshop set the next homepage priorities.

I facilitated the workshop and translated the team's priorities into the wireframe that shaped the next homepage test.

Whiteboard from the cross-functional Ariat homepage workshop, showing early content hierarchy and mobile wireframes
WORKSHOP WHITEBOARD / 2025 HOMEPAGE WIREFRAME

05 / TEST THE NEXT VERSION

By 2025, the right move was to make the homepage do less.

The page had become crowded again. I led a cross-functional workshop and wireframe sprint to agree on a clearer content hierarchy before we designed the next test.

Fewer than 3% of visitors reached content below the old category funnel, giving us a clear reason to shorten the experience. We cut the homepage nearly in half, added stronger category entry points, and moved useful actions forward. The test produced a statistically significant lift in homepage content engagement.

BEFORE / LONGER HOMEPAGE The earlier structure had accumulated more stories below the primary shopping path.
Full earlier Ariat homepage showing the longer page structure
AFTER / SHORTER HOMEPAGE Representative Figma designs shown at the same width to compare page length. These illustrate the evolution, not the exact A/B variants behind the engagement results.
Full revised Ariat homepage showing the shorter page structure
81%
STAYED FIVE SECONDS OR LONGER, UP 3 POINTS FROM THE PREVIOUS HOMEPAGE
~½
THE APPROXIMATE PAGE LENGTH IN THE TEST

THE OUTCOME

The refresh gave UX a broader role in Ariat.com.

The shared patterns now support category pages, checkout, Save for Later, bundles, and continued homepage testing.

I maintain the shared component library and am preparing it for agent-assisted design and a planned headless migration. That work is still in progress.

VIEW THE FULL ARIAT PORTFOLIO
Privacy