A filtering tool for better purchasing decisions
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 a short time period.
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.
MY ROLE: UX PRODUCT DESIGNER
- UX Research: I led other UX Researchers to interview users and create an affinity map of pain points and trends, before moving on with my own visual design. I used my UX strategy and product development skills to make the most impact possible based on a tight schedule.
- Visual Design: Creating and rapidly iterating all versions of an interactive prototype from paper sketches to high-fidelity digital in AdobeXd.
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.
COMPETITIVE & COMPARATIVE 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.
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:
- 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.
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.
USER PERSONA CREATION
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.
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 in the interest of time and user experience. So user flow became my top priority in my design process.
I created three different paper prototypes that included various modules, affordances, and design elements for different stages of the shopping process. Using this 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.
MEDIUM-FIDELITY DIGITAL PROTOTYPE
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.
HIGH-FIDELITY DIGITAL PROTOTYPE
I created a high-fidelity version and tested it once more—refining very specific design elements before pausing my design process. At this point, testers felt very comfortable with the user interface, the speed of the user flow, and the checkout process.
NEXT STEPS FOR THE WEBSITE
- 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.
WHAT I LEARNED
1. 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."