Nate - Buy Modal

This is Nate

The Nate Buy Modal is a low-code solution that allows publishers like Vogue to partner with various merchants and sell products on their websites. We have developed a customizable purchasing modal that, once an account is created, enables customers to make a purchase within just three clicks.

Roles

  • Sole Product Designer

  • UX Researcher

Deliverables

  • High-Fidelity Prototypes for Stakeholders

  • Competitive Analysis

  • User surveys and user interviews

  • User journeys and task flow

  • Low-fidelity prototypes

  • Usability testings and findings

Duration

4 Months:

  • 1 month of research and discovery

  • 2 months of iteration and build

  • 1 month of beta testing and iteration

Current Issue

Publishers like Vogue boost their revenue through commissions from partner merchant sales. Yet, the problem arises when users click on a product link only to be whisked away to the merchant's shopping page. This redirect not only drains traffic from the publisher's site but also chips away at the potential commission earnings of the company.

How we solved this

We aimed to make purchasing products a breeze for users, all without ever having to navigate away from the publisher's website. To accomplish this, I crafted the Nate Buy Modal, a sleek feature seamlessly woven into the publisher's platform, allowing for effortless transactions right on the page.

Early Concepts and Goals

The early concept shown was the problem given to me in my first meeting with the Senior PM leading this initiative.

The challenge was:

  1. Take the barebones concept and make it fully functional

  2. Make it incredibly intuitive

  3. Allow customers to easily purchase straight from the publisher’s site.

Version 1 Design (Side Panel)

After researching and conducting a competitive analysis, we came up with the basic structure and aesthetic of the Buy Modal. 

Now the Buy Modal is visually appealing, cognitive overload has decreased, and customers can easily edit their shipping and payment information.  

We then conducted user testing with 50+ participants via Maze and Figma to get user feedback and understand their pain points.

Journey Mapping

Beyond just analyzing their actions and behaviors, we sought to understand the emotional journey they undertook when making a purchase. By delving into their emotional states throughout the process, whether it be excitement, frustration, or satisfaction, we gained valuable insights into the holistic user experience.

By acknowledging and accommodating their emotional journey, we were able to create a more intuitive, engaging, and ultimately satisfying user experience.

V1 User Testing Results

We hypothesized that customers would only click on “SHOP NOW” to access the Buy Modal

  • However, based on the heat map, we learned that users gravitated towards clicking the product image

  • This resulted in a 25% drop-off before customers even accessed the Buy Modal 

  • However, we also learned that once users were able to access the Buy Modal, they finished the purchase journey seamlessly

More Problems

Another obstacle we faced was the initial onboarding process. Based on the data that we obtained from user testing and journey mapping, we concluded that:

  • Over 25% of all customers dropped off during onboarding

  • Purchase intent quickly diminished during the extensive onboarding process

Streamlining the onboarding process for the Buy Modal was a key company objective and essential to the success of this project.

View of the Original Onboarding

The user journey spans roughly 34 screens from the landing page to checkout. As users progress, the complexity and length of the process can lead to frustration, peaking just before checkout.

For this project to succeed, it's crucial to streamline the signup process all the way through to checkout, ensuring a smoother experience for users.

New Onboarding!

  • Created an introductory screen to familiarize users with the Buy Modal and its value proposition.

  • Enhanced user flow by consolidating personal information and phone verification steps.

  • Unified shipping and payment information onto a single screen for improved efficiency.

  • Simplified account creation process by automatically extracting and populating personal information from previous screens.

V2 User Testing results

Expanding the clickable area and simplifying the account creation process significantly decreased the bounce rate. 

Final Designs results

  • Checked against accessibility guidelines to create the most inclusive design 

  • Created an intuitive and aesthetic design that is easy to navigate

  • Fully functional: Able to execute a purchase with minimal screens

Proposed Improvements

  • House the Buy Modal in a floater tab on the side for better visibility and accessibility

  • Add ratings and reviews to increase product credibility, thereby gaining customer trust

  • Incorporate product details upfront to keep customers in the Buy Modal, which will reduce bounce rate and increase conversion

What I learned

  1. Get your users involved earlier in the process.

  2. There will be many UX gaps when building a product from the ground up and obtaining real user feedback through the process can make the user experience a lot smoother.

  3. Know when to release the product sooner because it will never be perfect.

  4. A good handoff to developers saves time and a bunch of headaches

Summary

  • Launched within 4 months, achieving successful contract signings with partners and access to an estimated 100K users

  • A/B Testing resulted in a 28% increase in user engagement and satisfaction

  • Conducted multiple user testing sessions to uncover blockers in the customer purchasing journey, leading to a 35% increase in purchase success rate

  • Increased iOS app account creation by 18% through onboarding improvements