Redesigning the Gift Card Customization Experience

Overview

Our team was tasked with improving the Open Loop Physical Predesign journey for gift card shoppers. However, upon analysis, we identified an opportunity for a larger consolidation effort that would significantly enhance the overall user experience across multiple product lines and user flows.

Problem

The initial product requirements focused on clarifying and streamlining the customization journey for shoppers buying pre-designed Open Loop Physical Gift Cards. However, we recognized several pain points in the existing system:

  1. Separate user flows and PDPs for different card types and customization options

  2. Limited visibility of greeting card options

  3. Difficulty in changing choices mid-flow

  4. Lack of clear preview for the final product

Operational Challenges

  1. No user testing resources

  2. Lack of proper flow A/B testing. The A/B testing only tests static screens and not user flows.

  3. No established design system

Opportunity

We saw an opportunity to create a unified, flexible product detail page (PDP) that could serve multiple needs and accommodate various entry points on the website. This approach would address the initial requirements and solve broader usability issues across the platform.

My Solutions:

Our team designed a comprehensive solution that went beyond the initial scope:

  1. Unified PDP: We created a single, adaptable PDP that could handle multiple card types (Visa, Mastercard) and formats (physical, digital).

  2. Enhanced Customization:

    • Implemented options for personal photo uploads and pre-designed art selection

    • Designed a versatile image upload modal that could be used anywhere on the site

  3. Flexible Configuration:

    • Added the ability to switch between physical and digital cards

    • Incorporated options for multiple quantities

    • Integrated promotion notifications

  4. Clear Communication:

    • Improved visibility of photo requirements

    • Highlighted greeting card and standard carrier options

  5. Real-time Preview: Implemented a visual representation of the final product before checkout

  6. User-friendly Navigation: Enabled users to easily change their choices without leaving the flow

1.png
2.png
3.png
4.png

Process

  1. Research & Analysis:

    • Reviewed initial product requirements

    • Analyzed existing user flows and pain points

    • Identified opportunities for consolidation

  2. Ideation & Concept Development:

    • Brainstormed solutions for a unified PDP

    • Sketched initial concepts for the new design

  3. Design & Prototyping:

    • Created wireframes for the new PDP layout

    • Developed high-fidelity mockups

    • Met with product to refine design

  4. Measured Scope and Anticipated Roadmap:

    • Met with engineering to determine the scope

    • Determined roadmap and phased-out approach for A/B testing

  5. Iteration & Refinement:

    • Incorporated stakeholder and engineering feedback into a phased approach design

    • Documented interactions, accessibility requirements, and the changelog

  6. Implementation Support:

    • Collaborated with cross-functional teams to ensure seamless integration on the new Adobe Experience Manager website.

    • Analyzed what data to track on new AEM platform

“Am I meeting all my stakeholder’s requirements?”
— me while designing

Refreshed Product Offering

  1. Unified PDP: A single page that adapts to various card types and formats

  2. Customization Options: Easy switching between photo upload and pre-designed art

  3. Quantity Management: Ability to handle multiple quantities in one order

  4. Promotion Integration: Clear display of applicable promotions

  5. Photo Requirements: Upfront communication of image specifications

  6. Greeting Card Options: Improved visibility of additional customization choices

  7. Real-time Preview: Visual representation of the final product

  8. Flexible Navigation: Users can easily modify choices without starting over

Anticipated Results

While specific metrics are yet to be gathered, we anticipate the following positive outcomes:

Increased Conversion Rate: By simplifying the customization process and providing clear previews, we expect more users to complete their purchases.

Higher Average Order Value: The ability to easily add multiple cards and see greeting card options may encourage users to spend more per transaction.

Reduced Bounce Rate: With a more intuitive and flexible design, fewer users should abandon the process mid-flow.

Improved Customer Satisfaction: Clearer communication and more customization options should lead to happier customers and potentially increased repeat purchases.

Operational Efficiency: Consolidating multiple flows into one unified PDP should reduce maintenance costs and simplify future updates.

Increased Cross-selling: By exposing users to options they might not have known about (like greeting cards), we may see an uptick in additional product sales.

Reduced Customer Support Inquiries: With clearer instructions and previews, we anticipate fewer questions about the customization process or final product appearance.

Lessons Learned

  1. Look Beyond Initial Requirements: By considering the broader user experience, we were able to propose and implement a solution with much wider impact.

  2. Unified Experiences Save Time and Resources: Creating a scalable system for the PDP structure proved essential in enabling adaptability and consistency across different products. This modular approach not only simplified updates but also reduced development time, ensuring the design could evolve seamlessly with changing business needs.

  3. Visual Previews are Crucial: Showing users exactly what they're getting can boost confidence and reduce potential disappointment or returns.

  4. Flexibility is Key: Allowing users to easily change their minds without penalties can lead to a more satisfying shopping experience.

  5. Cross-functional Collaboration is Essential: Working closely with product and development teams allowed us to push beyond the initial scope and create a more comprehensive solution.

Next Steps

  1. Data Collection: Implement analytics to track key performance indicators and user behavior on the new PDP.

  2. A/B Testing: Continue to refine the design through targeted A/B tests of specific features or layouts.

  3. User Feedback: Conduct post-launch surveys to gather qualitative feedback from users.

  4. Iteration: Based on data and feedback, continue to refine and improve the PDP design.

  5. Expand to Other Product Lines: Consider applying this unified approach to other product categories on the site.