Julian Jensen

Burlington Coat Factory

A filtering tool and faster checkout for better purchasing decisions.

aidan-meyer-179685 copy.jpg

The Challenge

I tasked myself with a 4-day sprint to redesign the Burlington Coat Factory website to promote a shopping experience that is more intuitive and faster. For this challenge I pushed myself to learn AdobeXD—a new design tool specializing in rapid digital prototyping—to create a high-fidelity solution in just a few days.

What is burlington coat factory?

Burlington Coat Factory is one of the largest discount retailers in the U.S. with over 560 physical stores across the nation. They sell a wide variety of clothes, home goods, and other extraneous products in-store and online. In fact, they sell over 120 different types of items, making searching and refining filters to find a specific item an critical part of the user experience.

 
 
Burlington Sells Over 120 Different Types of Products

Burlington Sells Over 120 Different Types of Products

Research

 
 

User Interviews & Affinity Mapping

Working with a group of UX researchers, we interviewed nearly a dozen individuals regarding their experience with Burlington Coat Factory both online and in-store. We also parsed through online reviews of store locations in the SF Bay Area and their e-commerce experience. Lastly, we collaborated on a heuristics analysis and a content audit which revealed multiple UI problems to address.

We compiled all of this data in an affinity map to find common patterns and themes. Although we found a lot of user frustration, a critical area of interest for me was general navigation through the website. So after our research work was complete, I drilled down further with my own detailed research process.

Notes From User Interviews & Online Research

Notes From User Interviews & Online Research

Affinity Mapping with UX Researchers

Affinity Mapping with UX Researchers


Competitive Analysis

Competitive Analysis

Competitive Analysis

I analyzed three direct competitors, focusing on heuristics and homepage layouts. Surprisingly, Burlington underperformed in nearly all heuristic areas:

  • Tough to understand search results page
  • Search filtering interface was incredibly difficult to use
  • The global navigation bar was too cluttered and complex

This analysis highlighted specific areas to improve upon to match the level of design quality found on competitors' websites. In addition, the analysis pointed at the things future users would expect from a redesigned online experience for Burlington. 


Usability Testing

I tested the current Burlington website with three different users to investigate pain points and concerns as they moved through the user flow from start to purchase confirmation. I learned that:

  1. Testers found the homepage to be extremely cluttered and distracting from their end goal of buying a coat or jacket.
  2. Not one tester could complete the process without my help. Most became stuck searching for a specific coat.
  3. Testers did not understand the branded navigation at the very top of the page and found it extraneous to their end goal.
  4. Most testers were confused by all the homepage advertising.

It became apparent that the problems of this web experience was greater than I initially expected and I needed to come up with a design that would eliminate these problems and simplify the user flow.

Current Burlington Homepage and Global Navigation - December 2016

Current Burlington Homepage and Global Navigation - December 2016

Current Burlington Sitemap - Very Complex and +120 Item Categories

Current Burlington Sitemap - Very Complex and +120 Item Categories


Prototype Personas

Prototype Personas

User Persona

Based on the previous research, I developed four prototype personas to find a user persona that I would base my designs around. Eventually I chose one proto-persona based on their interest to shop at a discount retailer and their strong experience shopping online.

Tara is looking for a specific winter coat online and is open to shopping at Burlington if she can find a nice deal. I listed her backstory, goals/needs, and interests to make sure my new design reflected her priorities. Much of my future design would lean on her biography to deliver a refreshing experience for Tara and meet her personal expectations.
 
User Persona - Tara

User Persona - Tara

 
 

Design Process

 

New User Flow

The current website had 12 individual pages users had to navigate through in order to eventually search, select, and purchase an item. I set a goal to eliminate half of these pages (6 total) in the interest of time and user experience. So user flow became my top priority in my design process.

Old User Flow - Over 12 Different Steps To Purchase An Item

Old User Flow - Over 12 Different Steps To Purchase An Item

New User Flow - Shortened to 6 Steps

New User Flow - Shortened to 6 Steps

 
Comp 05.jpg

Paper Prototype

I created three different paper prototypes that included various modules, affordances, and design elements for different stages of the shopping process. Using this agile mix-and-match strategy, I tested them with potential users and received feedback that informed what my medium-fidelity prototype would look like. Users mentioned:

  • They wanted a simple filtering option on the homepage that guided them through various choices step-by-step.
  • Users also wanted a grid-style search layout with the ability to adjust filtering parameters on the left side of the screen. Some also mentioned seeing filters as "tags" (to not only see their choices but remove them as well)
  • Lastly, users wanted to see their shopping bag items on a sidebar during their checkout process.
Creating Paper Prototypes

Creating Paper Prototypes

Paper Prototypes for User Testing

Paper Prototypes for User Testing

 

 
1st Iteration of Prototype

1st Iteration of Prototype

User Testing Digital Prototype

User Testing Digital Prototype

Digital Prototype (Medium-Fidelity)

I then created an interactive digital prototype that users could test the general functionality and provide design feedback. I learned that:

  • Testers didn't understand the home screen. They preferred any extraneous functionality to be removed from the high-fidelity if their ultimate goal was to purchase an item.
  • Testers also found the individual product page to be overly complex and preferred it to be simplified.
2nd Iteration of Prototype

2nd Iteration of Prototype

More User Testing

More User Testing

 

The Final Design

I tested the prototype with more users and continued to edit detailed elements—learning new features in AdobeXd. This included exporting interactive prototypes directly to the Adobe Cloud without external plugins or paid subscriptions.

 

Link to Interactive Prototype 

(May take a few seconds to load)

Comp 21A.jpg

Conclusion

 
 

Next Steps For Coast App

 

More Product Types

Integrating all 120 other product types into the homepage filtering module. This would be in alignment with possible business goals and other stakeholder groups.

Mobile App

Creating a mobile app catered to purchasing coats rather than all store items. This would make it easier for users to purchase coats and jackets faster and expand the current e-commerce user base to a younger market.

Global Navigation

A/B testing of a new global navigation bar for better clickthrough rates. This would build upon my design goal of simplifying the currently complex nav bar and header area on the website.

 

 

What I Learned

 

A 4-day design sprint requires downsizing certain aspects of the UX process (like usability testing) into agile formats (testing with the same users over and over) in order to make the best use of time.

2. 4 days goes much faster than initially expected. To make the best use of my time, I focused on the core components of the UX process: user interviews, affinity mapping, user persona, rapid prototype iterations, and agile user testing.

3. When frustrations arose, moving towards the next step in the UX process was beneficial in making the best use of time. "Pencils down, eyes up."

 
 
Working With UX Researchers (Left: Elijah Martin, Right: Anthony Filantres)

Working With UX Researchers (Left: Elijah Martin, Right: Anthony Filantres)

 
 

More Case Studies

 
Comp 09.jpg

BravePup is an organization in Seattle that brings rescue puppies to corporate events. We turned this idea into an app for on-demand puppy delivery.

Comp 13 copy.jpg

"Coast" is a new service in the Bay Area that provides car maintenance at your place of work. We improved their user flow for faster sign up and scheduling.

Comp 24.jpg