Shoppable Content
A contextually relevant product discovery experience via content
Shoppable content consists of modules throughout the shopping experience that feature a variety of inspirational content and related products. Through these, customers can easily discover and shop products featured in the content. Shoppable content is personalized based on the customer's activity.
MY ROLE
Lead designer through end-to-end process - consisting of ideation, UX design, user testing, delivery
MY TEAM
Product manager
Developers
Creative designer
UX researcher
UX content writer
Problem
Customers have given feedback that they become overwhelmed with the number of marketing assets on the website, and that they are not always relevant. Because of this, they are not incentivized to interact with them. On top of that, customers have difficulty in finding products featured in these marketing assets.
From the business perspective, there was a desire to create a more engaging experience surrounding marketing material due to the lack of customer engagement.
How might we create a contextually relevant inspirational experience that helps customers discover products efficiently?
One of the category pages that are filled with marketing assets.
Competitive Research
I conducted an analysis of several e-commerce competitors who were working in this same space to see where they were incorporating shoppable content in the shopping journey.
Below are screenshots of some of those experiences and the page types they existed on.
Competitors' Use Of Shoppable Content
To get an understanding of where competitors are positioning shoppable content, I created a visual comparison chart.
From this, we decided that the home page and category pages fit within the mental models of someone who is open to being inspired and discovering products.
Defining the Approach
By identifying the existing customer pain points and what the competitive landscape looked like, we were able to group these into themes to focus on solving.
The result of the pain points and 'How Might We' questions grouped into themes.
Guiding Principles
In our approach to the design, we followed these principles based on the competitive research and how we wanted the customers to perceive these features:
1. Shoppable content should be visually distinguishable from other marketing images.
The customer is inundated with marketing content when visiting the Macy's site - we wanted to avoid the customer having banner blindness when they encounter shoppable content features.
2. Focus on the visuals by minimizing the amount of product information.
Typically, products are displayed with many elements of product information, causing cognitive overload. To avoid this and position shoppable content as an inspirational feature, we wanted to reduce the amount of information.
Design Approaches
With these principles in mind, I created several low-fidelity wireframes to explore a range of ideas that might fit within the realm of shoppable content.
I separated them into three different buckets of ideas based on level of effort. Due to time considerations, we began with the simplest idea as a MVP - marketing content paired with a carousel of products representing those in the content and visually similar ones.
Designing Our Initial MVP
In our MVP, we sourced fashion photos from our marketing partners in New York. By using the product ID's attached to those images, we were able to show those exact products, as well as visually similar items based on our algorithm.
The images that customers see in the module are personalized based on their shopping activity, including what they have browsed, what they have added to their bag, and what they may have purchased previously.
User Testing
In our first study, we wanted to see if customers understood the relationship between the hero image and related products, as well as how they would interact with the design. We presented them with three sets of images and products for different product types.
There were several key findings from this study:
1. Customers mentioned price, product name, and brand name as their main factors that they initially look for in a product.
2. It was easier to identify the image and products as a group when the customers recognized that the first products shown were those displayed in the image.
We noted that it may not be immediately obvious to customers that there is a direct relationship between the products in the carousel and those displayed in the image, as the carousel only displayed two products at a time.
Expanding to Show More Items
Exposing Products in a Grid Format
Because customers ran into difficulty identifying that the products being shown were the same as those in the image, we explored a different layout that would expose more products without requiring any interaction. Our hypothesis was that by seeing more products together, it would be easier to associate the image with the respective products.
To make the header copy feel specific to each image, we provided the ability for our business stakeholders to tailor the header based on the image's marketing event.
User Testing
When testing this design, I focused on whether the different layout helped customers in connecting the dots between the image and products. Through this research, we gained some helpful feedback:
1. Customers want to see all of the products shown in the image and in context with the hero image.
2. There was interest in being able to interact directly with the image to shop the products.
Shopping Directly with Content
We took into account customer feedback that they would like to interact with the hero image to look at featured products. Customers' expectations with this interaction were to see the exact item in the image, so we prioritized showing the exact product and similar products only if that particular item was unavailable.
An opportunity came up to work on implementing this concept with the marketing team in charge of creating curated sitelets. I worked on designing the initial experience on a sitelet featuring handbag trends, which was designed by the creative team in New York.
Testing Visual Treatments for Recognition
The initial design concept was to overlay hotspots on top of each shoppable product in the images. The hotspots would animate into view when their tappable area came into the viewport.
We tested these two variations with customers to see which of the visual treatments for the hotspots gave the best indication that interacting with them would show product details.
The version with the shopping tag icon as part of the hotspot ultimately was the clearest to customers - they understood that they would be seeing more information about a particular item.
Final Designs
These initial designs were low on the effort scale, and to get initial learnings, we scoped these to be the MVP's.
Easy Access to Products via Inspirational Content
Shoppable Interactive Images
The state of the hotspots after animating initially to be visible.
A popover with key product details is shown when a hotspot is clicked/tapped on.
Testing the Features
Operating in our team's agile environment, we launched the features to test and gather quantitative data - the carousel and grid designs on the home and category pages, and the interactive content design on the marketing sitelet.
We saw a 3% lift in revenue per visitor, which was estimated to be $15.2 million in ROI annually.
From the initial launch, we noticed that the carousel design performed better on mobile while the grid design fared better on desktop. We hypothesized that because customers were able to see the hero image and carousel together in the mobile viewport, they could easily link the two. Based on this, we created a hybrid design in which the mobile experience utilizes a carousel and the desktop experience utilizes a grid layout.
Future Design Considerations
Although we didn't immediately get the time to focus on future iterations, I would have liked to make changes focused on the interactions to directly shop images, and to use motion to differentiate shoppable content from other generic marketing content, while encouraging customers to engage and browse products more.
A More Informed Action to View Products
A shopping tag icon is overlaid on top of the image as an interactive element to expose the hotspots.
An initial animation helps the user understand the function of the icon.
Layering in Motion to Create User Awareness
When the image comes into view, an initial timed animation hints at the functionality of this shoppable image.
After tapping/clicking on the shopping tag icon, the hotspots and respective tagged products are displayed to the customer.