Shipping Options 2.0

Duration

2022.4 - 2022.11

Team

Loblaw Digital - Marketplace

My Role

Associate Product Designer,
Co-op

Responsibilities

UI/UX Design, User Testing, Technical Alignment

about the project

What is Shipping Options 2.0?

At Loblaw Digital, I designed for Marketplace, which partners with trusted third-party sellers to bring an expanded assortment of products to the online grocery shopping experiences across Loblaw banners. The Shipping Options 2.0 project is an initiative that allows Marketplace sellers to set up their own shipping profiles. This shift could make selling on Marketplace more profitable for sellers and, in turn, improve the customer experience by providing lower prices and more accurate shipping information.

My Contributions

As a product designer on the team, I was responsible for redesigning how shipping information is presented throughout the customer experience across web desktop, web mobile, and mobile apps. I collaborated closely with Bilge Gercek, a Senior Product Designer, on the discovery, exploration, and initial design phases. We worked with the design research team to design a usability test and synthesize the results. After Bilge went on maternity leave, I took over her responsibility and owned designs on the Marketplace team. I also collaborated closely with an agile development team and product managers on feature scoping, design changes, and QA.

Project Background

Shifting the business-wide shipping policy

Before the Shipping Options 2.0 project, Marketplace used a business-wide blanket shipping policy that applied to every seller for orders shipping to anywhere in Canada. Customers picked one shipping method and paid one shipping fee for their entire order, which was equally split among all sellers involved.

Previous designs for the customer experience:

A screenshot of the cart page before shipping options with the business-wide blanket shipping policy on the page, and that shipping fee is calculated based on the entire order value and not by seller

A screenshot of the checkout page design before shipping options with callouts showing that customers select one shipping method for their entire order and the order summary is one displaying one fee for the entire order

Improvement opportunities for our shipping policy:

Custom shipping costs for sellers

By introducing flexible shipping policies, we can help to increase seller profitability on Marketplace. As a result, customers may see lower product listing prices, as sellers no longer need to include a blanket shipping fee.

Ability to opt out of certain regions

The new shipping policy will allow sellers to opt out of regions that they don’t ship to and, as a result, drastically reduce the number of order cancellations due to region restrictions.

Broader product assortment

Flexible shipping policies can also bring more product assortment on to Marketplace, especially low-priced assortment. This change will also result in a smoother seller onboarding experience that brings more selection for customers.

More accurate shipping information

By allowing sellers to set up their own region-specific and product-specific shipping policies, customers can see more accurate shipping costs and timelines based on their locations.

Jobs To Be Done

As a seller:

I want to set up region-specific shipping fees and free shipping thresholds that work for my shipping policy, so that I can save on shipping costs.

I want to disable the regions that I don't ship to, so that I don't have to manually cancel orders from those regions.

As a customer:

I want to understand the shipping options available for my order, so that I can choose one according to my online shopping needs.

I want to clearly see the shipping timelines and costs associated with my order, without getting confused or overwhelmed.

Challenges

Project complexity & Limitations from PC Express

Screenshot showing the Loblaws icon and the Marketplace Icon next to each other as shown on the website. Users can click on the icons to toggle between the two

Sharing the same site with PC Express

Marketplace uses the same websites as the grocery banners offered through PC Express (such as Loblaws, No Frills, etc.) and shares the same design library. However, many UI components, such as product tiles, were designed for grocery items and are not the most suitable for an e-commerce website.

Marketplace and PC Express also share the same cart, checkout flow, and delivery address. In the scenario of a mixed cart (when customers buy from PC Express and Marketplace at the same time), the deliverability and availability checks made changing the address or postal code extremely complex.

Little historical quantitative user data

The ability to add postal code, see relevant shipping information, and select a shipping option at the seller level are brand new features for Marketplace. As a result, we didn't have any historical data to inform our design decisions.

Presenting complex information to customers

When customers buy multiple items or from multiple sellers, the user scenarios can get complicated (for example, if a customer buys 3 items from 2 sellers, and each item comes with a different shipping timeline, shipping fee and free shipping thresholds). How might we communicate shipping information for each item in a simple and digestible way that doesn't overwhelm our customers?

100% same-time release across all platforms

Due to various constraints, the Marketplace business can't maintain 2 different sets of shipping policies. This means we have to roll out to 100% of customers across our website, iOS app, and Android app simultaneously. Because we couldn't release to only 5% or 10% to see how the design performs and make any necessary adjustments, product and design teams needed to have a high level of confidence in our product.

Ideation

Finding the right features at the right step

For the customer experience, we started the design phase by conducting a competitor analysis on where and how other marketplace businesses present shipping-related information. From our past research, we knew that there are several key moments in the customer journey where customers look for shipping-related information to inform their purchasing decisions. Based on these key moments, we brainstormed new features that could help accomplish the Jobs To Be Done.

Browsing

Customers are glancing over the basic product information, such as product image and price, among the search results or product listings. We know that whether or not an item offers free shipping is one of the factors our customers care about the most. We can display free shipping badges on product tiles to highlight this information.

A simplified UI of the search results page showing product tiles on the right of the image, filters on the left one-third of the image, and a search bar with menus on top

Product Display Page (PDP)

Customers are looking for more detailed information on an item. Shipping can be an important factor in purchasing decisions. In the previous experience, customers could only change their delivery address at checkout or through the PC Express fulfillment selector on the top right of the screen. The ability to update postal code directly on PDP and clearly see relevant shipping information is critical.

Cart

Customers are reviewing all the items they have added to their cart and decide if they wish to make a purchase. It would be helpful to highlight products with free shipping to reassure customers.

Checkout

Customers are entering their information on the delivery address, payment method, and contact preferences. They're also verifying the details and making a decision on how their orders would be fulfilled. It's important to clearly communicate the shipping options available and the shipping information associated with each option.

User Flows

Mapping user flows in complex scenarios

Before going into UI design, we took the time to carefully map out the various user flows so we could design for all scenarios. However, we quickly realized that we were getting lost in edge cases. We had to come up with a way to map out several happy paths that could include all scenarios without overwhelming ourselves.

Hover to zoom in on the Cart user flow

A flow diagram for changing the postal code on the cart page. The diagram shows the steps customers take to change their address and the results of each decision that spread into various scenarios and then converge into a number of results

We decided to descope certain features when a scenario gets too complex. We effectively split the scenarios into sellers using one shipping profile and sellers using multiple profiles without getting into details. These user flows not only helped us comb through the complex scenarios and user interactions, but also helped our stakeholders and development team understand the new user experience.

Design Explorations

Maximum information vs. Minimum information

After sketching out the new features, Bilge and I consolidated our initial designs into 2 versions: maximum information and minimum information. We wanted to conduct user testing to see if potential customers can understand the information on each screen. The testing can also help us determine the right amount of information to present at each stage of the customer journey.

The maximum information version of the product display page design. The product image is shown on the left. The product title, cost, ratings, shipping information, and the add to cart button are on the right side of the image. The maximum information version shows more information such as additional messaging and the shipping timeline for expedited shipping.

Maximum information version of PDP

VS.

The minimum information version of the product display page design. The product image is shown on the left. The product title, cost, ratings, shipping information, and the add to cart button are on the right side of the image. The minimum information version only shows the shipping timeline for standard shipping.

Minimum information version of PDP

User Testing

AB Testing our designs & Validating our assumptions

We collaborated with our Design Research team to design an unmoderated usability test. We mainly wanted to test how we present the UI, the location of shipping information on each screen, if customers can understand the new shipping policy, and the clarity of the copy.

We recruited 16 participants to AB test the two versions of our UI. Half of the participants tested with the maximum information version, and the other half tested with the minimum information version. Within each group, 4 participants tested the web desktop design and the other 4 tested the web mobile design. We later synthesized the results with an affinity diagram to find patterns in our results.

According to the testing results, it was found that our designs were mostly clear and straightforward. The majority of the designs from the minimum information version tested better, although certain features in the maximum information version also performed well.

MVP Designs & Future States

Adapting initial designs for the MVP

Taking the learnings from our usability testing, we merged what our test participants enjoyed from each version for the MVP design. While we were finalizing our designs, we worked closely with our tech team to evaluate technical feasibility and effort. During this process, I quickly realized the team had overlooked a few backend constraints that would limit the features we had planned for the MVP.

Various designs for the Shipping Options project, including the PDP, cart, and Checkout are laid out together. Each design has annotations next to them that explain the new features

With a tight project timeline and other project dependencies, we had to move fast and descope some features from the MVP for a launch before the holiday shopping season. I worked with the tech team and our product managers to ensure the core customer experience isn't compromised, and that every design detail looks and works as intended. I designed the test cases for both web and mobile designs for QA and coordinated with various teams throughout the process. After the project was launched, I also contributed custom components back into the design and pattern libraries.

Here are the main features launched in the MVP version. You can click to see the original designs under each feature.

Accurate Shipping Information on the PDP

Customers can now add their postal code directly on the Product Display Page without leaving the experience. If a customer enters a postal code that the seller doesn't ship to, the add-to-cart CTA will be hidden and a callout on why the item is unavailable will be displayed.

The new product display page design after shipping options shows the customer's postal code and gives them the ability to edit directly on the page. The page then displays shipping costs and timelines directly below the postal code. The add-to-cart button and seller information are displayed below.

The new product display page design after shipping options uses an in-page postal code update drawer that expands when customers click on "Edit" next to their displayed postal code on the page. The drawer is displayed between the postal code and the shipping information below

Free shipping badges on Cart Page

Customers can now see shipping-related badges under each item on the cart page. From our user research, we realized that some customers would leave the experience altogether if they see a high shipping cost at cart or checkout. Highlighting items with free standard shipping help nudge customers to check out at least their partial cart and not abandon their cart entirely.

The new cart page design after shipping options shows the customer's postal code and gives them the ability to edit directly on the page, above the list of items in the customer's cart. For items that qualify for free standard shipping, a label with the exact text is displayed under the title for each item

Seller-level shipping fees breakdown in Order Summary

On the cart and checkout page, the Order Summary now shows a seller-level breakdown of the shipping fees. Our usability testing has shown that the shipping fee breakdown helps our customers understand that they're purchasing from third-party sellers and each seller has a unique shipping policy.

The new Order Summary on the cart and checkout page after shipping options shows a seller-level shipping fee breakdown. Customers will see the section "Shipping Fees", and the seller names on the left with corresponding shipping fees on the right

Shipping Options on the Checkout Page

Customers can now select their preferred shipping method at the seller level. They can see the shipping methods available for each seller and the costs associated with each shipping method. Shipping timelines are then calculated and displayed on the left.

The new checkout page design after shipping options shows the thumbnails and shipping timelines for each product on the left. On the right, customers can see all the shipping methods available for each seller.

The project introduced many new features involving various states and user interactions. It's crucial to specify the screenreader and keyboard interaction behaviours. We worked with our Accessibility Lead on the accessibility specs to ensure people who are blind or visually impaired can also enjoy the experience.

Hover to zoom in on the accessibility specs for iOS mobile checkout

The accessibility specs for the checkout page for both the iOS and Android mobile apps are displayed. Red highlights section parts of the UI and annotations are next to them to explain how they would be programmed to be used with voiceover

Results

Measuring the success of the project

The Shipping Options 2.0 project had a significant impact on the Marketplace business ahead of Black Friday/Cyber Monday in 2022. To measure the performance of our product, we focused on our checkout conversion rate and overall conversion rate. We captured these key metrics a week after the project launched and compared them to our baseline metrics, which were measured the day before launch.

39.5%

lift in overall conversion rate

78.2%

lift in checkout conversion rate

11%

lift in add-to-cart for sellers who updated their shipping profiles

High Seller Adoption

88% of our sellers updated their shipping profiles by week 4

748 items

have lower prices after shipping profile update by week 4

Lessons Learned

Collaborating & supporting an agile development team

I learned a great deal about how to better work and support our engineering partners throughout this large-scale project. After seeing some of the designs and features descoped during the development process, I spent time talking to our developers and reflecting on the design processes and realized the preferred ways of working can be very different between design and tech.

The importance of engaging and including the development team early in the design process became apparent to me. By frequently exposing the tech team to designs, they can provide feedback and raise concerns that might help inform our design decisions. Even if certain features are not feasible at the beginning of the project, looping in tech teams early still gives them more time to investigate.

Testing the implemented features and helping our developers troubleshoot during QA quickly deepened my technical understanding as a designer. Within days, I learned exactly how data from the backend support and enable the frontend features I design. This knowledge is invaluable for future projects and I can now better communicate with developers, know what questions to ask, and understand the technical effort required.