eCommerce Gifting Experience

Our UX team was responsible for creating a gifting experience across all of our brands.

My Role

I was the lead UX analyst, responsible for...

researching current best practices for gifting purchases, both product and gift card.
understanding all constraints from a technical, brand strategy, and ideal experience perspective.
forming and creating customer purchase journeys, on-site and CRM.
creating brand agnostic wireframes for each customer purchase journey.

Project Goal

By creating these gifting flows, the UX team will be able to reference a consistent framework for setting up new brands that are wishing for an eCommerce gifting experience. Our team traditionally has had a reactionary approach, so by defining this framework, we will be able to implement at a much faster rate, not having to start from scratch each time for each brand.

In addition, these user flows and brand agnostic wireframes can be used as a toolkit to provide to our agency partners during design activities.

The Challenge

Scotts has an abundance of brands in the lawn and garden space that needed to fit into this framework. Not only did we need to consider each brand and product offering, but we also had some brands that were subscription based, some subscription optional, and others with no subscription component. This purchasing component heavily weighs into the gifting options that we are able to offer.

eCommerce Gifting Audit

I went through ten comparative eCommerce gifting experiences to have a better understanding of customer journeys when gifting a subscription, gift card, or product. This audit helped me understand some UX requirements that our gifting experiences must include.

For each brand, I examined the brand offering and the benefits and drawbacks of it, the UI and page layouts for gifting, and the user journey the customer experiences in order to purchase.

After analyzing these three different areas, I complied a list of UX requirements that we should carry forward when creating these gifting frameworks.

Understanding Purchasing Constraints

In order to create the gifting framework, the purchasing model constraints need to be considered. After analysis of each brand purchasing model, we realized that all brands have some sort of constraint in three main categories: price, duration of gift, and recipient information.

eCommerce Gifting - Purchasing Model Constraints.png

After defining these purchasing constraint categories and constraints, I mapped them to each brand. From here, each brand would be assigned a combination of variables that were used to identify which user flows and wireframes that specific brand experience was aligned to.

Customer Purchasing Journey Flows

The Idea & Design

In order to create the wireframes, I first had to understand the customer purchasing journey for each combination of constraints.

For each purchasing journey, I outlined the page the user would visit and the primary action taken on that page. In addition, I outlined a scenario to help contextualize the journey. Lastly, if there were additional actions or context, I would include those.

eCommerce Gifting - Customer Buying Journey.png

Brand Agnostic Wireframes

Now that the customer journeys were outlined, I was able to create brand agnostic wireframes for each flow. These wireframes include the pages that the user needed to visit in order to purchase the gift, the checkout screens the user had to fill out in order to purchase, and the emails that the user and gift recipient would receive.

These were designed at a brand agnostic level so each brand could insert its brand foundations: fonts, colors, tone, voice, imagery, etc.

A2C Wireframes: For brands that offer subscriptions at a fixed price, where the gift recipient doesn't need to provide information to receive the gift.

A2D Wireframes: For brands that offer subscriptions at a fixed price, where the gift recipient must provide information to receive the gift.

Universal Gift Card Wireframes: For all brands, but specifically for brands that have variable pricing

With these activities complete, we now have a framework to help our team implement gifting. While this framework isn't perfect and there may be some brand-specific questions to answer, this gives us a template to start from instead of starting from scratch for each brand that wants a gifting experience.

eCommerce Gifting Framework in Action

Two years after this work was completed, a brand came to our team with a desire to offer gift cards on their site. Once our team received this request, we dusted off the frameworks we had built and started to understand how this could evolve to today, with our team now utilizing a design system.

We took our brand agnostic wireframes for the universal gift card and leveraged components from our design system to build a gift card landing page with inspiration from the framework. By utilizing this framework, we were able to complete the gift card strategy and designs to handover to development in a quick timeframe.