Microsoft Shopping x ShopRunner

DESIGN FOR WEB BROWSER

Overview

ShopRunner partnered with Microsoft Shopping via Edge to expand its membership base by offering free shipping benefits to 263+ million Edge users. The goal was to create a frictionless sign-up experience that seamlessly integrates ShopRunner's membership process within the Edge Shopping extension, allowing users to quickly and easily become members without interrupting their shopping flow. The collaboration aimed to boost ShopRunner’s brand visibility and user acquisition while enhancing the shopping experience on Edge.

My Role

As the Lead Product Designer at ShopRunner, I was responsible for driving the design process, ensuring a user-centered approach to solving key challenges, and collaborating with the Microsoft Edge team to seamlessly integrate ShopRunner into the shopping extension.

The Team

Solo designer, 1 Product Manager, Microsoft team, 8+ engineers.

Timeline

June 2023-November 2023

The Opportunity: Enhancing the Shopping Experience with Free Shipping

We saw a unique opportunity to deliver a seamless and user-friendly sign-up flow that integrates directly with the Microsoft Edge Shopping browser. This would allow users to effortlessly join ShopRunner and unlock free shipping benefits while continuing their shopping journey without interruptions.

Key Opportunities:

  • Personalized User Experience: Whether users are existing ShopRunner members or new to the platform, we designed a tailored experience that adapts to their individual needs, offering them the convenience of fast, frictionless membership.

  • Seamless Integration: By aligning the branding and functionality of ShopRunner with Microsoft Edge, we ensured that users would enjoy a unified and familiar experience.

  • Privacy and Security as Priorities: With a secure Single Sign-On (SSO) process via Microsoft, users could safely join ShopRunner using their existing Microsoft credentials, adding convenience and peace of mind.

Defining the Users: Discovering Potential Pain Points and Opportunities

The goal was to deeply understand the user experience within Edge’s shopping features and determine how we could make it easier for customers to engage with ShopRunner.

Target Audience:

  • Edge users actively shopping online, specifically those looking for discounts, deals, and shipping benefits.

  • Edge Shopping extension’s audience of 40 million monthly users.

Key Insights:

  • Unfamiliarity with ShopRunner: Many Edge users were not aware of the benefits ShopRunner provides.

  • Frictionless Shopping Desires: Users wanted a smooth, uninterrupted experience while shopping and signing up for benefits.

  • Drop-off Challenges: Multi-step sign-up processes led to user drop-off during the journey.

Research Methods:

  • User Surveys: Understanding motivations behind signing up for shopping-related benefits.

  • Competitor Benchmarking: Reviewing other browser-based shopping experiences to find the best practices for onboarding and account creation.

Data Analysis: Analyzed engagement data from existing Edge Shopping extension users to identify where users were dropping off and why.

The Users of Microsoft Shopping & ShopRunner

Microsoft Edge Shopping is utilized by a wide range of personas, each with their own shopping habits and preferences. This includes Deal Hunters, who are constantly on the lookout for the best prices and discounts across various retailers, as well as Fast-Track Shoppers, who prioritize speed and efficiency, looking for a quick, frictionless checkout experience. Comparison Shoppers use the extension to compare products and prices, making informed purchasing decisions, while Existing ShopRunner Members use it to continue taking advantage of free shipping benefits across a network of retailers. Finally, Casual Shoppers, who may not shop frequently but appreciate savings when they do, use Microsoft Edge to discover deals and evaluate whether ShopRunner is right for them. These personas each benefit from Microsoft Edge Shopping’s integration with ShopRunner, providing tailored value through seamless sign-ups, personalized shopping experiences, and exclusive benefits.

Crafting the Solution: Delivering a Frictionless Sign-Up Flow

We developed a seamless sign-up flow within the Microsoft Edge browser that allowed users to sign up for ShopRunner without leaving their shopping journey. By leveraging Microsoft SSO, users could quickly create a ShopRunner membership using their Microsoft credentials, granting them instant access to free shipping, free returns and other store benefits.

User Flow: Mapping Multiple User Scenarios

I developed a user flow to account for different user states.

Key User Scenarios:

  1. New User: A user signed into their Microsoft account but not a ShopRunner member sees a pop-up, signs up via SSO, and gains instant access to ShopRunner benefits.

  2. Existing ShopRunner Member: The user is recognized, thanked for their membership, and redirected back to their shopping flow.

  3. Microsoft Account Not Signed In: The user is prompted to sign in to their Microsoft account before signing up for ShopRunner, ensuring a streamlined two-step process.

Designing a Seamless Flow: Wireframing, Prototyping, and Testing

Design Approach:


The solution featured pop-up notifications and co-branded modals that informed users about ShopRunner’s free shipping benefits and guided them through a one-click sign-up process. This approach ensured immediate membership creation while maintaining a frictionless experience aligned with the Edge interface.

Wireframes I


I designed hi-fidelity wireframes focused on the co-branded modals, with clear and compelling calls to action (CTAs) that would engage users without interrupting their shopping flow.

Updates

1.User Feedback Impact

After receiving user feedback indicating that the ShopRunner benefits were not immediately clear, I updated the design to prominently display a concise list of key benefits such as free two-day shipping and free returns within the sign-up modal via brand iconography. This clearer messaging increased user trust and reduced hesitancy in completing the sign-up process.

3.Visual Branding Adjustments: Replacing Microsoft's Default Imagery with ShopRunner's Identity

To ensure ShopRunner’s brand was prominently featured, we replaced Microsoft’s default success enrollment image with the ShopRunner logo on the final confirmation screen. This strategic adjustment reinforced ShopRunner’s presence at a pivotal moment, after user sign-up, fostering brand recognition and ensuring users clearly associated their new benefits with ShopRunner. This branding shift enhanced ShopRunner’s visibility while maintaining consistency with Microsoft’s user experience.

2.Collaborating Within Microsoft’s Space: Highlighting ShopRunner’s Value Through Effective UX Copy

While respecting Microsoft's UI guidelines to ensure a seamless integration with the Edge environment, I recognized the need for ShopRunner’s UX copy to stand out and communicate its unique value proposition. Collaborating with the Microsoft team, I ensured that the flyout messaging clearly conveyed ShopRunner’s benefits: free shipping and returns in a way that felt aligned with the overall experience but still highlighted ShopRunner's offering. This approach ensured users grasped the value without compromising consistency with Microsoft's design framework

Final


Working with the Microsoft team, I refined the wireframes to bring more ShopRunner branding, updating the old modal to comply with Microsoft requirements as shown above. But the key change was simplifying the user sign up flow.

Flow Simplification

Initially, users had to go through multiple steps to complete the process. I refined the journey by consolidating redundant steps and placing the Call to Action (CTA) within the notification itself. This reduced friction and ensured users could sign up in one click, directly from the ShopRunner pop-up.

Final Delivery: Launching a User-Centric Experience

The seamless sign-up flow was launched within Microsoft Edge, allowing users to enroll in ShopRunner via Microsoft SSO with minimal disruption. The solution was optimized to handle multiple user states and data privacy concerns.

Core Features:

  • Pop-Up Notifications: Inform users about free shipping benefits as they shop.

  • One-Click Sign-Up: A frictionless sign-up process leveraging Microsoft SSO.

  • Co-Branded Modal: Clear messaging that guided users without overwhelming them.

Results: Success Metrics and KPIs

Metrics for Success:

  • Impressions: We tracked the number of users who saw the pop-up or modal and targeted daily impressions in Phase 1.

  • Acquisition Rate: We measured the sign-up rate for new users who enrolled in ShopRunner during their browsing experience.

  • Activation Rate: We tracked how many new ShopRunner members successfully made a purchase using ShopRunner benefits post-sign-up.

Launch and Results:

The MVP launched on November 2023 and we achieved the following:

Reflecting on Success: Key Learnings

Looking Ahead: Scaling and Enhancing the Experience

We plan to expand the number of merchants involved in the program, increasing daily impressions and user acquisition.

Improving Member Experiences:
We aim to enhance the experience for existing ShopRunner members by implementing auto-login functionality across more sites and improving cross-platform usability.

Feature Enhancements:
We plan to incorporate additional information about ShopRunner’s benefits and ensure greater transparency regarding data privacy to meet evolving user needs.

Copyright © 2024 Heidi. Designed with ❤️ in Los Angeles.