Using Modular Design for Consistency and Predictability

Dickies.com

Overview: 

Dickies is an interesting brand with unique initiatives and innovative technology. They have varied clothing lines ranging from practical work gear, trendy streetwear, and edgy skate clothes. 

But the story of Dickies was not coming through on their site. When a new clothing line was released or new technology announced, there was a scramble to get it up on the site wherever it could fit. This created a disjointed, confusing experience for the users. 

Using repeated modules and templated pages, we will create a consistent, predictable experience for the users.

The Mission: add organization and consistency to this major e-commerce site that was built from an adhoc approach 

 

Unfortunately, there was not time to take a deep look at the organization and structure of the site navigation. Instead, we would need to create a consistency in page structure to help the user understand and navigate the site.

 

Deliverables

Site map and user journeys 
Wireframes
Visual Designs

Timeline

We worked under an ambitious timeline to get the new site experience up and running in time for the holidays. 

We built over 30 pages from September 2021 to December 2021.

My Role

UX Design, Oversee Visual Design

Existing Site Experience

Dickies was still deciding who they wanted to be… and this showed in their site. They could not decide if they should lean into the new popularity in the lifestyle clothing space or stick to their core consumer purchasing work gear.

Therefore, each new page was made with a different structure and different goal in mind. This made the site experience disjointed and confusing.

Users could end up in parts of the site that were completely disconnected from other parts of the site, with no idea how they got there.

Our Approach:
Modular and Tiered Structure

In order to make the site feel more organized and consistent, we needed a defined, modular - and tiered - structure that can be used across all the various pages of the website for existing and new pages. 

We could not reorganize the site from the ground up, so we needed to create a framework for going forward of clearly defined modules and pages to use in any situation.

Content Framework

Tier Structure

The website is structured into a tier system that creates a series of landing page templates that allows for consistency across the site.

This structure helps the user to navigate through the website to find what they are looking for. 

It also simplifies and codifies the creation of new pages for the organization. 

 

Building Blocks

Across the website, each individual page is built using a mix of modular components. 

These building blocks can be used in various configurations to build new pages. 

Every module and page that was created needed to be flexible enough to be reused and repurposed. 

 

Home Page Modules

Interior Page Modules

 

Standards for Mobile

Because of the tight turnarounds, we did not lay out every single mobile page. Rather we created standards and guidelines to help the development team make smart decisions when developing for mobile. 

 

Explorations

Large Hero vs. Small Header?

Large Hero

WHEN TO USE

  • The primary use of the large hero module is on the homepage.
    The large hero module will not be used on interior pages, but can be used on campaign landing pages.

  • Hero carousels can be used to highlight any feature products or story.

HOW TO USE

  • Hero carousels consist of a large image and headline always.

  • Headline can go directly on the image (as long as it is legible) or color blocks can be used.

  • A Call to Action button is included on the homepage hero carousel

 

Small Header

WHEN TO USE

All Tier 1, 2, 3, 4 & 5 pages on dickies.com have a header module at the top of the page. 

HOW TO USE

  • Headers can be formatted in two ways

  • Tier 1 and Tier 2 pages have a large “creative” headline in the header module. Plus a smaller label with the name of the page.

  • Tier 3, Tier 4 and Tier 5 pages do not have a headline. They only have the name of the page.

Large hero for homepage

Small header for all interior pages

Buttons

Our call-to-action buttons are simple, clear and to the point.

  • They are not cute. And they do not need to be different just to be different.

  • We do not want the user to have to think about what they mean. We just want them to click to them.

CTAs:

  • Shop Now

  • See All

  • Learn More

We created clear guidelines for when to use each of the three call-to-actions and each of the three button sizes. 

Colors

Simplified color palette

The Dickies brand uses a large variety of colors, but for their website we needed a simplified color palette. We save yellow for headlines in the hero and all buttons so users eyes are drawn to the most important elements on the page.

Headlines on a white background are set in bold, black type for maximum contrast and weight.

Pulled colors

Certain hero modules use color blocks. These colors are pulled from the images used in the hero module. This builds in flexibility for the color system, but limiting this to only the hero modules keeps the site clean and colors simple.

Continued Support

The final step of the project was to set the Dickies in-house team up to take over the website. We created a guidebook covering every aspect of the new site design– copy, site structure, modules, PDP, visual design and photography.

Credits

Rebecca Smith
UX Designer

Todd Slutzky
Creative Director