Staples Template Selection Page Redesign

• 

  

• Problem

  The discrepancies between what customers see on screen vs the printed product they receive start early and are sustained throughout the entire experience.​

  The old Template Selection Page consistently fails to provide an accurate idea of what a customer will receive.

• Goal

  How might we improve the way we display results on our site so that our customers are more successful with the assurance that they have found the right product, options, pricing, and design for their needs?

• Site-wide Experience Upgrade

  The upgrade of the Staples Print Site is focused on offering customers comprehensive product details early in their user journey. As new pages are introduced and old ones are retired, the Template Selection Page has been repositioned within the site's overarching structure.

  

  

• Initial Research & Data Gathering

  The initial step in my process is collecting extensive data on the current product. This includes understanding how users navigate to the page and where they go afterward. This broader perspective aids in identifying the necessary content and features for the Template Selection Page to excel in the customer journey.

  I conducted competitor analysis to assess our site's strengths and opportunities.

  

  
• 

  
• 

  
• 

  
• 

  
• 

  

• Cross-functional Workshop

  I facilitated a 3-day workshop that defined business and user goals, anticipated outcomes, and established hypotheses to guide the project's direction. The workshop involved Product Managers, SEO Managers, Marketing team, Development and Infrastructure teams.

  

  
• 

  

• Workshop Insights

  Business Goal

  Our template selection page was designed to serve design templates as a “catch all” results page for multiple customer use cases. We have observed via analytics, heuristic evaluations, and customer data that the page isn’t serving most of the use cases efficiently, which is causing low conversion to our business.

  How might we improve the way we display results in our site so that our customers are more successful as determined by % of customers going into the builder with assurance that they have found the right product, options, pricing, and design for their needs?

  User Outcome and Benefit

  • Spend less time searching through designs and more time creating content.
  • Have more confidence that the design and product they order will gain positive impact for their work.

  Business Outcome

  • Increase % of “Template Selection Page” visitors who add a project to their cart.
  

  

• User Testing

  To validate the hypothesis we developed internally, I conducted tests on our competitors, focusing on behavior patterns.

  I extracted relevant user insights and used them to prioritize the problems that needed to be addressed for our Minimum Viable Product (MVP).

  

  
• 

  
• 

  

• User Testing Insights and Recommendations

  Observations

  • Choosing between templates took up the most time and effort.
  • Users experienced extensive scrolling.
  • Pricing questions came up frequently, with some users encountering unexpected increases when changing poster materials.
  • Users often relied on filters to ensure they selected the correct poster material.
  • Clearer call-to-action (CTA) needed to specify the next steps, as some users were unsure about proceeding or adding templates to their cart first.

  Hypothesis we are pursuing

  • Implement favoriting feature for templates.
  • Display active filters overview.
  • Enable large previews, including inside/back designs.
  • Enhance product awareness by presenting product options upfront.

• Wire-framing & SEO

  • Design Exploration: Beginning the design process is always exciting. I initiated by sketching low-fidelity wireframes, allowing for early sharing of component ideas with the team.

  • Collaboration: Other designers provided input on how these components could integrate into the overall design ecosystem and be adjusted to fit our design system.

  • Validation: Product managers reviewed wireframes for use cases and provided insights based on user data. Developers confirmed the feasibility of the proposed designs.

  • SEO Discovery: I optimized our filter structure and URL architecture, leading to a significant improvement on our organic search ranking.
  

  
• 

  
• 

  

• Final UI Design

  • I created high-fidelity mockups incorporating all feedback and meeting content and feature requirements.

  • Implemented new and improved breakpoints in designs to better accommodate user needs.

  • New page layout maximizes template exposure. 

  • Redesigned filter sections to enable template favoriting and provide an overview of active filters.

  • Introduced a preview panel for displaying large previews, including inside/back designs of templates along with product options in the configurator list, requiring selection before proceeding to the builder.
  

  
• 

  
• 

  
• 

  
• 

  
• 

  

• Accessibility

  I believe that an accessible interface is crucial, and I ensure that all my designs adhere to accessibility guidelines and best practices.

  When handing off designs to the front-end team, I introduce accessibility documentation as a priority. This ensures that accessibility considerations are addressed from the outset and are not treated as an afterthought.

  

  
• 

  

• UX Documentation & Animated behavior

  Documentation for Hand-off

  Documentation plays a crucial role in facilitating a seamless hand-off to the front-end team. I documented visual elements, interactive states, and animated behavior for each new component in the project. This ensured that all necessary information was organized and accessible in the file.

  Annotations and Descriptive Notes

  Clear annotations and descriptive notes were provided to explain how each component functions. This approach aimed to maintain consistency and prevent misunderstandings during the development process.

  

  
• 

  
• 

  
• 

  
• 

  
• 

  

• Hand-off & Reviews

  After completing all documentation, I conduct a thorough hand-off meeting with stakeholders, including Product Managers, Front-end and Back-end teams, Marketing, and Graphics teams. Conversations are kept open on content and functional requirements to ensure a smooth release. Additionally, I outline future iteration goals and important metrics for tracking.

  Before the product launch, I handle UI and UX reviews. My role involves identifying, correcting, and documenting any errors or updates to ensure a successful release.

  

  

• Impact

  As the new Template Selection page is gradually being rolled out in increments of 5%, 10%, 50%, and finally 100%, we're already witnessing a positive impact on the conversion rate. Users are enthusiastic about the new page and its seamless integration into our site-wide product assurance initiative.

  Among all product rollouts, Posters and Banners have experienced the most significant success with the implementation of the new Template Selection Page, showing a respective increase in conversion rates of 1% and 12%. Additionally, website satisfaction has risen by 371 basis points (bps), and the quality score has improved by 114 bps. 🎉