Home
About me
Work
Resume
Contact
Go Back
View Prototype
Go to website
Have a look!

Widgets for E-commerce

Client
Dropp
Project Type
UX/UI Design & Documentation
Duration
2 weeks
Year
2022

Overview

We all know the feeling of excitement when we find the perfect product online. We add it to our cart, eager to check out and have it delivered to our door as soon as possible. But what if we don't live in a delivery area? Or what if the delivery time is longer than we can wait?

This was the problem that we set out to solve with the POP widget. We wanted to create a way for shoppers to know which areas are eligible for quick shipping, so they could make informed decisions about whether or not to purchase a product.

Scope & Goal(s)

This widget was designed to be used on Shopify powered stores and we wanted to:

- increase conversion rates on stores by informing shoppers about areas eligible for quick shipping.

- ensure an increase in dropp deliveries by making eligible customers more likely to complete an order.

- design a generic widget that works on every store design regardless of its theme.

- make the widget easily discoverable and visible to shoppers.

Setting the Stage

What is the POP Widget?

The POP widget is a value proposition that seeks to allow shoppers to know which areas are eligible for quick shipping. This is intended to drive conversion on stores, as it has been proven that eligible customers are more likely to complete an order, resulting in an increase in dropp deliveries.

โ€

Challenges encountered

There were several standout challenges that were noticed during the design and research of the POP widget. These included:

- Not all stores have the same theme.

- Most stores already have a banner on their site and would not want an extra one, especially if it is not uniquely theirs.

- Certain stores already have tags on their product overviews, and adding our tags would cause clutter.

- The widget needs to be easily discoverable.

The image below is a view of Rosental (an organic skincare store powered by Shopify)

Tackling the problems faced

Due to the inability to exercise full control over most of our customersโ€™ shops, using banners and tags on the overview page would not be an effective solution. As a result, the focus was shifted towards the cart/checkout pages.

However, due to the aforementioned problem of not all stores being the same, the widget had to be generic and work on every store design regardless of its theme. The common consistent component in this case was the CTA (call-to-action) button. It made sense to craft our widget around this component as it is the primary drawer of attention from users.

The POP widget is a small, unobtrusive widget that sits on the cart page of a Shopify store. It displays a simple message that tells the shopper whether or not their area is eligible for quick shipping. If it is, the widget also displays the estimated delivery time.

The widget is designed to be as visible and easy to use as possible. It is placed close to the checkout button, so shoppers are sure to see it. The message is clear and concise, and the estimated delivery time is displayed in a large, easy-to-read font.

No items found.

Breakdown

The positioning of the widget was carefully planned to be in close proximity to the checkout button, rather than at the top of the cart page. This strategic placement takes advantage of users' tendency to focus on calls-to-action (CTAs) when navigating checkout pages, thereby enhancing visibility and potentially increasing conversion rates.

To ensure a seamless integration with various websites, the widget was designed with a generic appearance, featuring consistent fast delivery icons across all stores. Subtle color adjustments were implemented to maintain a native feel regardless of the site it is deployed on.

In order to maintain visual consistency across different Shopify themes, specific item tags were applied to the respective product images. The product image, being a visually prominent component, helps to ensure a cohesive experience for users.

Multiple states were created to accommodate different scenarios within the cart interface. These states include the default view (what a shopper sees upon opening their cart), the eligible state (when a shopper qualifies for drop delivery), and the ineligible state (when a shopper does not qualify). Eligibility is determined by a popover checker that assesses the shopper's qualifications.

Furthermore, various tag types were explored for items in the cart, specifically indicating "fast delivery." We explored the option of providing the Shopify stores with customization abilities and allowing them choose what type of tag to deploy.

No items found.
No items found.

Product Tags

The different product tag types I explored.

No items found.

The Results

Since launching the POP widget, we have seen a significant increase in conversions. Shoppers who see the widget are more likely to complete their purchase, knowing that they will receive their product quickly.

We are also seeing an increase in dropp deliveries. This is because shoppers who are eligible for quick shipping are more likely to choose dropp as their delivery method.

No items found.

The Future

We are excited about the future of the POP widget. We believe that it has the potential to revolutionize the way that people shop online. By providing shoppers with clear and concise information about delivery times, we are helping them to make informed decisions about their purchases.

We are also working on expanding the functionality of the POP widget. In the future, we plan to add features such as the ability to track delivery status and to schedule deliveries. We believe that these features will make the POP widget even more valuable to shoppers.

We are grateful for the opportunity to help shoppers get the products they want, when they want them. We are committed to continuing to develop the POP widget and to making it the best it can be.

No items found.
No items found.

Key Learnings

The major takeaway from this was learning to sell design decisions backed with data and achieving stakeholder buy-in.

โ€

Credits

Initial work and validation on this feature was done by Murillo Marfa and finished by myself, I worked alongside Philip Braun and Emma Jouy to bring it to this point. Unfortunately, we didn't bring this to market because dropp became insolvent and had to shut its doors soon after.

View Project
Next Project

Odu Fashion Website

Good stuff incoming!