The Container Store
Responsive Design Case Study
I researched and developed solutions to increase the usability of the container store website and redesigned it for responsive web and mobie design.
Role
UX Researcher | Product Designer
Year
2018
Project Scope
We were given two weeks to research and redesign the The Container Store website. Initially the project began in a group of three researchers (myself, and two others). During the first week the team conducted interview and user tests alongside other analysis to better understand the websites current usability.
In the second week each team member prepared a proposal for a redesign of the site, based of of primary user groups, identified by personas, and backed up by testing and research findings.
Understanding the Opportunity
The Container Store provides specialized products and services to a loyal user base that is concerned with design, detail, and organization in every aspect of their lives.
Screener Survey
In preparation for user testing our client’s product, we conducted a screener survey to identify participants that would be best-suited for the testing process. We screened for behavioral insights as well as demographic information, allowing us to filter out unsuitable candidates early on and evaluate certain trends amongst our more appropriate participants.
After sending the survey out, we received 37 responses within a 32 hour window. Of said responses, 18 were located in the Greater New York Metro area. To identify our usability testing participant base, we further narrowed down this number by availability status and the type of feedback they provided. In particular, we followed up with users that:
1. Purchased something to help organize their space within the last 6 months
2. Browse Online and buy in store OR Browse in store and buy Online when shopping for home goods/ organization supplies
From here, we followed up with those that met these key demographics and were able to select 5 well suited participants for our user testing.
Market Analysis
Business Model Canvas
The purpose of a business canvas is to help us, as UX designers, understand how to balance the needs of both the business and the users. We created a business canvas on behalf of our client, the Container Store, to help us better understand the value of the services that the company provides for its customers and what makes it stand out in the market. We found that the Container Store’s primary services center around organization and project inspiration for those looking to invest in structure and creative efficiency.
Competitive Matrix
The Competitive Matrix helps to identify the unique niche in the market that The Container Store fills. We compared The Container Store to nine other stores that carry similar products, based on how specialized they are and their price range. According to our analysis there are no stores similar in specialty and price. The nearest competitors are much more general in their product selection. Many of the other retailers are less expensive, until you get to the high end furniture specialty retailers.
Competitive Feature Analysis
Feature Analyses
Feature analyses are a form of business research that helped us better understand what the market looks like, what competitors are doing, and what customers are being offered by our client compared to elsewhere. The Container Store has all the typical features shared amongst similar businesses’ websites, but compared to its main competitors, it also provides items and services that other sites do not, key features that set it apart and give it a competitive advantage. The analyses helped us get to know the industry our client is a part of, highlighting content and functionality that we might not have otherwise considered.
Comparative Feature Analysis
Competitive Feature Analysis
Heuristic Analysis
We conducted a heuristics analysis to test the usability of our client’s site. We navigated the Container Store’s website and identified usability issues using the Abby Method. We then honed in on key issues and outlined recommendations on how to address each problem.
Key Insights:
• The website meets best practice standards for the most part, but the Home page and Product Detail page are repeat offenders
• The Home page is average and meets basic functions but has many flaws, as made apparent by its unclear organization and navigation
• The Product Pages are overall informative and clear, but lacked character and fails to delight
• Accessibility view is helpful, but still has room for improvement
• Despite positive performances in the pages from Add/View cart all the way to Checkout, the numerous serious/critical ratings we gave to the Home and Product Detail pages averaged the overall rating of the site to “Minor Problem”
Recommendations:
• Restructure layout of homepage to better display hierarchy
• Improve the findability of features and pages so users don’t have to rely on the search function
• Better connect to customers by adding personality to product descriptions
• Highlight services like the Blog, Gift Registry, “Contained Home” for user satisfaction
• Accessibility view could make buttons like “Check Out” more noticeable/bigger for better findability
Contextual Inquiry
To better familiarize ourselves with our client, we made a trip to The Container Store as a team. The purpose of our trip was to observe shoppers and conduct informal contextual inquiries of their experience in store. We were able to observe 5 shoppers, first asking a set of standard questions about their habits, the purpose of their trip and their decision to shop in-store vs Online. We then observed them as they went about their shopping, asking them to follow their typical routine and questioning them on anything that stood out to us. The shoppers also talked through their shopping process, giving us insight into their thought process as well as their behavioral patterns.
Key Observations
5/5 picked up items that they were not shopping for at some point in the process
5/5 commented on how expensive The Container Store was and how they typically shop elsewhere
4/5 got lost or were unsure about where to go
3/5 were purposefully shopping for items specific to The Container Store
3/5 felt that The Container Store met their aesthetic
3/5 had window shopped Online before coming into store
2/5 were shopping at The Container Store for their renovation or home improvement project
Key Takeaways
Tactical experience was a big motivation for shopping in store vs Online
Shopping in store provided feeling of instant gratification
In-store layout was confusing and shoppers were left unsure how to navigate
Shoppers all found The Container Store to be pricey and only came for specific purchases
The Container Store was a source of inspiration and a resource for projects
Usability Testing
Findings
Key Takeaways
After completing usability testing, we evaluated the data and responses gathered from our participants, highlighting any usability and accessibility issues they faced when completing the tasks.
• All users were able to complete the given tasks.
• Across the board, Task 1 on the desktop was rated as the most difficult to complete, with an average score of 4.
• Task 2 was rated as the most difficult to complete on mobile, with an average score of 2
• Task 3 was rated the easiest on both devices at an average score of 1, respectively.
• This data correlated with our findings on how participants solved the tasks.
• 5/5 users were unable to complete the first task on the desktop via the direct path, ultimately optimizing the search function instead.
• At no point did 5/5 users complete a task on desktop directly. Participants faired better on mobile than they did on desktop.
• For 5/5 users, tasks 1 and 3 were completed via the direct path.
• Task 2 saw 4/5 users (80%) utilize a direct path to complete the task, which supports task difficulty feedback where users ranked Task 2 the most difficult on mobile.
The data, observations and feedback we accumulated have helped us better understand the usability of The Container Store’s site and highlighted particular issues with the flow and functionality. We will use these results to improve our client’s website on both platforms, with special consideration to the following insights:
• 5/5 participants agreed that finding the Gift Registry felt impossible; when users were shown the location of this feature on the desktop after testing was completed, they all expressed frustration at the color, typography and placement of the Registry.
• 5/5 users all agreed that sorting through the many categories felt overwhelming and that there were too many distracting options. This did not stop them from completing the task, but each user commented that it complicated the process, both on desktop and mobile.
• This feedback is supported by the Site Map we created in our research, which shows how densely categorized its Product Department is.
• 3/5 users say they would have expected to see the option to select the time/date for pickup at the same time that they picked the location of their preferred store, not during the checkout process. No user commented that this flow complicated their usability test, however.
Overall, participants faired better on mobile than desktop. One note that we made after testing is that our order of presentation should have been counterbalanced amongst an equal number of participants. This would have allowed for us to see if introducing a particular device first might affect the data differently.
Primary Persona
Card Sorting
The purpose of this study is to provide a practical usability guideline that could help The Container Store to design and measure usability of their ecommerce website. Although a wide variety of usability evaluation methods have been developed and applied, most methods focus on finding usability problems and comparing usability between products in terms of performance and preference. In general, this study aims to answer the following Research Questions (RQs):
- How well do users interpret the classification/categorizations of products on the existing ecommercesite?
- How can we better categorize these products to increase findability?
- How findability can increase sales and revenue?
Results and Findings
The use of the Standardization Method and Popular Placement Matrix provided an opportunity for us to compare their categorization and utility on how the products are labeled on the Container Store’s ecommerce site. Different dimensions of usability should also be highlighted when designing and evaluating the e-commerce site. Thus, there are 4 contextual factors that should be considered within the usability dimensions: user, environment, technology and task/activity. Identifying usability dimensions based on these contextual factors is seen as sufficient as they are comprehensive and support closely Human-Computer Interaction principles.
Interpretation of Data
We ran two sets of studies with 5 remote participants doing a open card sort and 5 remote participants doing a closed card sort through a User Testing platform. After both studies were completed by these 10 individuals we came together to synthesis the insights. As we facilitated we were able to collect Quantitative data which includes card sort and category ranking metrics as well as the general frequency of similar terms used.
Card Sorting on Existing Site
Card Sotring on Propsed Site
What We Learned
The Challenge
The container store provides an opportunity for people to find inspiration to organize their lives, however, the website and mobile site currently do not provide an organized way for people to search for and find products to help them in their storage quest.
The Problem Statement
How might we enable people looking to organize their lives take an organized, intentional, and efficient approach to their shopping experience?
Putting it All Together
Moving from Research to Design
Site Mapping
Existing Site Map
Proposed Site Map
I redesigned the site map based on the information we learned. Below is the updated site map, which shows the consolidation of several categories, and the relocation of “more ways to shop” to its own dropdown tab.
Keeeping things Flowing
Aftetr
The reason we created flows was to test the usability of the web-site’s e-commerce experience. We did this by creating:
Scenario/ task Goals:
- Navigation (user goal)
- Checkout (Business goal)
- Areas of improvements: layout/ Design (User goal)
- Highlight new tech (persona example)
- Design inspiration process (persona)
Research Inquiries:
- What are the top 3 ways a person might do that task: user flow
- Task flow: would be the happy path
- User flow: variations of the happy path (3)
Objectives:
In order to create a user flow you need to know 2 things:
- Business objectives: The action you want visitors to take on the site is to make a purchase.
- User objectives: Inspiration, Find registry, Check-out.
Task:
The task was for the user to go to the Container Store’s ecommerce site on their desk top and search for a friends registry, purchase an item from the registry, and checkout. Some of the questions we kept in mind when designing these scenarios and tasks were:
- What needs or desires do your visitors have? Which problem do they want to solve?
- Why do they need it?
- What qualities (about your product or service) are most important to them?
- What are all the questions they have about the product?
- What are their doubts or hesitations?
Cleaning Things Up
