Bridging the gap between digital and printed results
The goal of this project was to improve user confidence in the online product customization process. I achieved this by executing a holistic redesign of the user flow, focusing on clarifying and enhancing the presentation of critical customization options.
The resulting solution successfully increased user trust and improved conversion, while also establishing a scalable foundation of a reusable framework for future product pages.
ROLE
Sr. Product Designer
Category
E-commerce
timeframe
1.5 months
01
The assurance void
Uncovering the main pain points
A comprehensive UX audit to identify the roots of a low NPS (Net Promoter Score), pinpointed that many customers were having issues with the post-editor upsell page. This page was creating a confidence deficit because crucial customization options lacked clarity, actively eroding user trust and hindering conversion.
Screenshot of the old upsell page
02
Shifting focus
Transitioning from upselling to the forefront
As a first step, the Product Manager and I identified a key opportunity to boost customer satisfaction by strategically moving key customization options (materials, finishings, and accessories) from the pre-checkout upsell page to the product landing page. This shift would simplify the purchasing journey and ensure pricing clarity.
Old Flow
Product SKU
Customization
Approval
Upsell
- Materials
- Finishing
- Accessories
Cart
New Flow
Product SKU
- Materials
- Finishing
- Accessories
Customization
Approval
-
Cart
03
User insights
Conducting user interviews to refine imagery and messaging
To define the most effective content and layout for the new product page, I conducted ten customer interviews focused on a direct content comparison between our platform and competitors. By observing how users processed product imagery and descriptions, I gathered crucial qualitative insights that would support the decision-making needs of new and experienced customers.
Screenshots of user interviews on usertesting.com
Screenshot of user interview on usertesting.com
04
Exploring solutions
Defining a scalable interaction model to craft the experience
Leveraging insights from customer interviews and competitive analysis, I explored various interaction models to structure the configurator. This phase required a careful balance between user needs and strict business logic, all while keeping the architecture flexible enough for future products.
Non-linear customization
Replaced sequential steps with, non-linear control drawers, allowing users to directly jump to and modify any customization category, maximizing efficiency and perceived control.
Visual decision support
Integrated image-based previews for every selection, empowering customers to visually build their product and eliminating guesswork about the final appearance.
Contextual clarity
Enhanced the understanding of complex materials and finishes by adding descriptive text to radio buttons and utilizing key visual callouts on images.
05
Seeking feedback
Prototyping to communicate and test design ideas.
Throughout the iterative process, the prototype helped me effectively convey design decisions to stakeholders for feasibility checks and scoping. I also used it for usability testing to gather user feedback.
Selecting any option instantly triggers dynamic updates to the image gallery and caption. This logic validated complex front-end requirements early.
Incompatible options are disabled and include a clear explanation to guide users away from invalid configurations.
Selecting a 'Delivery Only' option automatically removes 'Store Pickup' from fulfillment availability, aligning the interface with logistics rules.
Want to see it in action?
Gathering feedback from users
Through testing, I systematically gathered user feedback to ensure that interactions were intuitive and validate key design decisions before committing to development.
Layout
Users found the collapsible sections intuitive, making the overall interface easy to scan and preventing cognitive overload.
Fulfillment
Users expressed a desire for earlier communication of delivery costs, stating that knowing only the fulfillment method was insufficient.
Images
The sticky gallery functionality was highly praised for maintaining visual context.
Pricing
Users valued having the price integrated directly within the quantity options, facilitating faster purchasing decisions.
Navigation
Users expressed fatigue with repetitive clicking, indicating a need for a global control to view all available options simultaneously.
Interaction
Disabling incompatible options with explanatory text, was seen as a major factor in reducing user frustration.
06
Polishing the design
Refining the visual interface for a seamless user experience
The final design phase focused on high-fidelity visual refinement to ensure seamless integration with the existing ecosystem. Adhering to the Staples Style Guide, I applied the brand’s official typography, color palette, and component styling.
I also incorporated critical functionality based on user feedback, adding a global 'Expand All' link for better visibility and an informational lightbox to provide details about delivery and pickup without cluttering the interface.
Adapting the design for mobile screen sizes.
The mobile design strategy centered on eliminating the main image gallery to avoid continuous scrolling to view visual updates. This key decision drove all subsequent adjustments aimed at maintaining context and optimizing navigation on small vertical screens.
Kept a static cover image for immediate product context.
Retained orientation and size icons for clear visual reference.
Embedded material and finishing images directly into options.
Optimized fulfillment and primary action buttons.
07
Empowering the team
Creating design specifications to guide implementation
To ensure the final product matched the design intent, I prepared a comprehensive handoff package serving both Development and Marketing teams.
08
Results drive evolution
Quantifying the business impact
The redesign delivered clear results: it drove a significant increase in conversion and a notable reduction in support tickets, proving the efficiency and direct ROI of the new design.
Customer Support Tickets
A drop in "product not as expected" tickets proved that the enhanced visualizations successfully aligned customer expectations with the final physical product.
Net Promoter Score (NPS)
The new experience outperformed the legacy flow, boosting customer satisfaction and user loyalty.
Conversion Rate
The new flow reduced user drop-off and friction compared to the legacy flow.
Scalability & ROI
Since the initial launch for posters, the foundational framework has been successfully scaled and reused for several other crucial Staples products. This rapid adoption significantly amortized the initial design and development cost, proving a long-term ROI.
Continuous evolution
The design continues to evolve based on post-launch data. The most recent improvement was a Zoom feature, addressing user demand for closer visual inspection and further enhancing product clarity.
Related Projects
Bridging the gap between digital and printed results
Open Case Study
Bridging the gap between digital and printed results
Open Case Study Get in Touch
hello@estelaordonez.com
Copyright © 2025 Estela Ordoñez. All Rights Reserved.