PAYPAL REIMAGINATIONS

Redesigning the Digital Retail Experience

Skills Used: UI Design • UX Design • Communication Skills • Stakeholder Management

Project Challenge

The Client Enablement Team at PayPal worked with merchant and partners to help them integrate PayPal products and services into their own websites as well as sell them new PayPal products. The team found it difficult to just explain how these products would look on the merchant’s website without visuals of the new experience. I was brought in as a the first UX/UI designer on the team to visualize how to best include PayPal in a merchant’s website as well as showcase other updates the merchant should make to their site to follow e-commerce best practices.

My Role

I designed new browse and checkout user flows for PayPal's retail partners’ websites that incorporated e-commerce best practices. I would then present these recommendations to the key stakeholders at the merchant, along with qualitative data to support my recommended design changes.

Results

As the first UX/UI designer on the Client Enablement team, I was able to make a significant impact and pioneer this type of work within PayPal. When I started within the position, the scope of the role was just for me to create the designs. Through my clear communication and storytelling abilities, I was eventually in charge of running all presentations to the merchants and reviewed my designs with stakeholders at all levels of merchant organization from other UX designers to CMOs.

By showcasing best in class PayPal placement and e-commerce principles, I gave merchants a visualization of their north star website and digital experience. I was able to impact over $35 million in PayPal sales revenue through my reimagination presentations.

Example Reimagination

I did redesigns for over 50 merchants in a variety of industries from across the globe. Below is one example reimagination for Boots, a UK health and beauty retailer. In addition to the desktop screens show below, I would also create designs for mobile screens for each merchant.

Product Details Page

BEFORE: Existing Product Details Page

  1. Navigation: Navigation bar is crowded and gives too much real estate to search.

  2. Promo Banner: Large red promotion banner reads like an error message.

  3. Page Hierarchy: Hierarchy is cluttered and doesn’t provide key information that the shopper really cares about when shopping for products.

  4. Loyalty Program: Lack of details about the Loyalty program which is not user-friendly for a new shopper.

  5. Thumbnail Images: Quantitative data from many retailers and industry trends show that optimal placement for thumbnails on desktop is the left hand side of image.

  6. Product Details: Product details start very far down the page and are only in text form.

 

AFTER: Reimagined Product Details Page

  1. Navigation: Streamline navigation elements and clean up the UI of the navigation and header section.

  2. Product Images: Increase size of main image, move thumbnails to the left side, and reorder photos to show most relevant content first. Add video content where relevant to further engage the user.

  3. Page Hierarchy: Updated hierarchy to more clearly show key information like sale price and promotions.

  4. Shipping: Highlight free shipping opportunity directly on the PDP.

  5. Loyalty Program: Add details about Loyalty program with link to learn more and sign in.

  6. Click + Collect: Show in-store stock availibility directly in-page to encourage omni-channel visits.

  7. Product Details: Reduce unnecessary white space and bring product details further up the page. Add icons to make the details easier to scan.

  8. Free Gift: Streamline hierarchy and clean up the UI of the free gift call out.

 

Cart

BEFORE: Existing Cart

  1. Page Hierarchy: Cluttered product information and hierarchy makes it difficult to sort through key information. Once the user has reached the cart page, any doubt or confusion can lead to abandonment so a clear and easy-to-scan page is key.

  2. Call to Action: Within such a busy page, the key call to action (“Checkout”) gets lost.

  3. Promotions: Red promotion text reads like an error message and doesn’t provide actionable next steps for users.

  4. Loyalty Program: Loyalty program callout does not effectively use available space and there is no “Learn More” link for new user to find out more details about the Boots loyalty program.

 

AFTER: Reimagined Cart

  1. Page Hierarchy: Clean up page hierarchy and add clear grid structure. The new layout also shortens the page significantly to reduce scrolling.

  2. Shipping: Clearly show the shipping cost in the cart and add info button for shopper to find more details on shipping timeline.

  3. Loyalty: Add “Learn More” link to the Loyalty program call out.

  4. Contextual Recommendations: The cart is a great place to add product recommendations, especially low value items that mirror the impulse items at the grocery store checkout line.