Teacher Lists: Streamlining Back-to-School Shopping
Summary: I designed a feature for OfficeSupply.com that simplifies the chaotic back-to-school shopping process. By integrating with the Teacher Lists API, the design automatically populates a student's entire supply list, eliminating the need for parents to manually search for each item.
Role: Sole UX/UI Designer, UX Researcher
Timeline: September 2024
Project Status: Live
The Challenge
Every back-to-school season parents face the same tedious process; sifting through multiple school supply lists and manually searching for dozens of items across different stores, often unsure if they've found the right products.
My challenge was to leverage the Teacher Lists API—which digitizes and aggregates school supply lists—to create a seamless and intuitive shopping experience for busy parents. The design had to proactively guide users through potential pain points, such as finding the correct list and handling out-of-stock items, ensuring a frictionless process from start to finish.
Research & Competitive Analysis
Due to budget and timeline constraints, traditional usability testing wasn't possible. I also found that existing research on wishlists and favorites wasn't directly applicable, as this feature involved pre-curated content from a third party rather than user-created lists.
To gather insights, I conducted desk research on wedding and gift registry experiences, which share the similar characteristic of curated, third-party lists.
Competitive Audit
I conducted a comprehensive analysis of five major e-commerce competitors that already offered Teacher Lists functionality: Walmart, Target, Office Depot, Staples, and Meijer.
Key Findings:
Widespread technical issues: Frequent glitches including cart addition failures, quantity discrepancies, and delayed out-of-stock notifications
Inconsistent user flows: Varied approaches to handling edge cases and user guidance
Opportunities for differentiation: Clear gaps where superior design could provide competitive advantage - each site seemed to have something wrong with their design.
Design Process
Sketching & Wireframing
After reviewing competitive analysis with the product manager and aligning on preferred approaches, I began wireframing. The user flow was conceptually straightforward, but the specific layout and interaction details required extensive exploration. The most complex challenge was designing the supply list page itself, where users would view and interact with the student's complete list.
Critical Design Decisions
I focused on three key areas that would significantly impact the user experience:
1. Presenting Out-of-Stock Items
How prominent should out-of-stock items be? I considered two different designs: placing out-of-stock items at the bottom of the list with a warning by the "add to cart" button, or placing them at the top of the list.
I chose the second option because it significantly reduces cognitive load. Users immediately see what needs attention, eliminating the need to scan the entire list first. This follows the principle of progressive disclosure, where critical information is presented up front. By placing these items at the top, the design creates a clear visual hierarchy—"Handle these issues first, then proceed with the rest." This proactive approach is more helpful, as it lets parents know about potential issues immediately rather than discovering them later.
2. Cart Behavior: Redirect vs. Stay on Page
One of the most critical interaction decisions involved determining what should happen after users click "Add All to Cart." I weighed two primary approaches: redirecting users to the cart page (traditional e-commerce pattern) versus keeping them on the list page with AJAX functionality.
The case for staying on the list page was compelling from a user experience perspective. Teacher lists serve as reference documents that parents often need to verify against, and maintaining that context would allow for easy quantity adjustments or item substitutions. This approach would be particularly valuable for complex lists where users might want to double-check they'd captured everything correctly.
Ultimately, we chose to redirect users to the cart for both technical and user experience reasons. Our existing cart infrastructure didn't support AJAX additions on this page, and building that functionality would have significantly extended our timeline. More importantly, the redirect approach eliminated the risk of duplicate additions and followed a familiar e-commerce convention that users already understand. While users lost the list context, the trade-off provided a more predictable and error-free experience.
3. The "Replace Item" Process
I knew from the competitive analysis that many competitors failed to provide a way to replace out-of-stock items, creating a poor user experience. I advocated for the importance of letting users easily replace these items without ever leaving the list. This functionality was a key part of the final design and helped us address a significant user pain point that competitors had overlooked.
Final UIs
For the final mockups, I prioritized a clean, minimal design. At the time, I was also working on a comprehensive site-wide redesign and logo refresh, so I chose design elements that would seamlessly adapt to the new brand guidelines while maintaining visual appeal and functionality.
Results & Reflection
This project successfully launched a streamlined Teacher Lists feature on schedule. It gave OfficeSupply.com customers a friction-free back-to-school shopping experience by addressing key user pain points. We did this by proactively solving for out-of-stock items and allowing seamless replacements—issues competitors had overlooked.
The minimal design was a huge win. It easily adapted to the company's brand refresh, saving us significant redesign work later on. This project taught me that even simple concepts require thoughtful execution to truly serve users, especially when working with external APIs and tight deadlines.
