Need for speed
Creating a faster shopping experience
My goal was to build a better user experience that makes purchasing decisions faster, and therefore, easier.
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.
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.
I conducted initial research through a competitive analysis, with a focus on usability and interaction design.
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.
Warming up with research
User interviews and affinity mapping
Working with a group of UX researchers, we interviewed a dozen users, tested the current website for usability, and compiled our research.
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.
I tested the current Burlington website to investigate pain points and concerns as they moved through the user flow from start to purchase confirmation. I learned that:
- Testers found the homepage to be extremely cluttered and distracting from their end goal of buying a coat or jacket.
- Not one tester could complete the process without my help. Most became stuck searching for a specific coat.
- Testers did not understand the branded navigation at the very top of the page and found it extraneous to their end goal.
- Most testers were confused by all the homepage advertising.
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. I ran a card sort with testers and found no specific trends in organizational patterns, due the sheer amount of >120 product categories. So after our research work was complete, I drilled down further with my own detailed research process.
Understanding the complexity
Examining how a large e-commerce site fails to make a good user experience.
I created a site map to help visualize the information architecture of the site, and in doing so it explicated the relationship between a large complexity of product categories and how a user is likely to navigate their way through the website. 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.
Site map from homepage to checkout confirmation
Burlington sells over 120 different types of products
In search of savings
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.
With this singular persona in-mind, I focused my design work around the goals and needs of my user to:
- Find a stylish winter coat
- Have a better-than-average shopping experience
- Find a good deal
Proto-personas & final user persona
Compressing the existing 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.
User flow became my top priority in my design process. My user persona already knew the product she was looking for (a winter coat), so I focused on making it easy to search for a specific item, instead of focusing on ways to discover a product by roaming around. I also removed all the visual burdens and frustrations that usability testers found in the current Burlington website.
I shortened the user-flow in half using a bookended strategy:
- On the homepage, removing extra steps required to actually find a product — creating a very strong filtering and search feature
- At the final checkout process, consolidating individual checkout pages into a simplified step-by-step process
Old and new user flow
Ready to go
Paper prototype and user testing
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 prototype
Paper prototypes for user testing
Digital prototype in adobe xd
Making it digital
I created a medium-fidelity prototype in AdobeXD to inform specific design changes to affordances, layout, and the checkout process.
During testing, 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.
I tested my design with more users—refining very specific design elements along the way. In addition, I applied a flat design language to the user interface to standardize our affordances and layout.
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.
Wrapping it up
Next steps and takeaways
My new design successfully cut time spent searching for an item on Burlington Coat Factory in half.
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.
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.
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.
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.
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.
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 (Elijah Martin, Anthony Filantres)