Interactive Accessories Experience
An interactive site test for YETI.com to help users try on accessories with their product.
Background
Overview
Interactive accessories experience is a key site test to help users try on compatible products. It is the first interactive experience created on the product description page and will be used with the Hopper M20 Backpack Cooler to understand how users interact with this experience compared with a traditional product carousel.
For this project, I was the sole UX Designer. I was responsible for designing the experience and worked closely with a UX writer and UI developer.
The team had an AHA moment to explore this experience during our monthly Design Sprint. In our usability test watch party, a user saw an image of a fully loaded cooler with all attached accessories and said:
It would be cool if you can try different things and see what it looks like
Usability Test Participant
Problem
Currently, a product recommendation carousel is used to promote accessory products on product description pages. Because coolers are the higher price point products, there has been a low conversion rate with its accessory products. It has been an ongoing goal to improve user interest and conversion rates for cooler accessories.
Objective
Create an interactive experience for users to try on compatible accessories on a YETI product.
Success Metrics
Research
The UX and Customer Experience Team meets monthly to stay on top of opportunities for improvement in user feedback and experiences. Additionally, to further understand how the store experience is for users, the team spent a day in the store to observe users and learn from the team in-store customer’s needs and motivation during the shopping experience. We identified three top insights.
In addition to the previous user research that was performed, we want to understand how the current market promotes accessories and/or cross-category products. We conducted competitive analysis and data analytics research.
1.
Difficulty finding accessories
Users expressed it took more effort than they thought to locate accessories on the website.
2.
Lack of accessory awareness
Users are not aware of how accessories are used and/or play a role in the product.
3.
Online & in-store shopping
User experience differs between online and in-store is the ability to match and see products upfront.
Competitive Analysis
We reviewed two competitor brands: Apple Watch Configurator and Nordstrom Product Pages to learn how they help users explore this experience.
- Accessory images are essential to help users see the product and avoid guesswork.
- Different accessory options are valuable for users to compare and choose what they prefer.
Data Analytics
To align product findings on the M20 Backpack Soft Cooler, we collaborated with the Data Analytics team to inquire about the following:
- Which accessories are compatible with the cooler?
- What are the top accessories purchased?
- What are the attachment rates with each accessory?
Concept
We want to ensure this experience is technically feasible on the site. To achieve this, we worked with the UI developer to explore if the product attached with accessories preview can be completed. The first technical concept was:
Design & Prototype
I was excited to review the first concept created by the UI developer and worked with our UX writer to incorporate our research insights into the design and copy.
Provide guidance
As a new experience on the product page, a Title is added with the guidance ‘Try Them On’ to introduce users to the feature.
Incite value moment
We cannot assume users will know the accessories shown. To create relevancy and value, we provide context to their use case in a sentence with the product name.
Purchase & explore intent
We want to account for users who are interested in purchasing after the experience. I added a quantity selector and an ‘Add to Bag’ button to assist users to add the product to their order without leaving the experience. Users who want to learn more can access the accessory product page using the Title link.
Iterate
Hours after the test launch, we reviewed site sessions to observe the experience. After 10+ sessions, we noticed a pattern, most users’ first action is to click on the label ‘Try Them On’ guide and not the accessory cards.
This indicates that users are interested in trying on the accessories, leading to anticipate a positive response. We decided to change it to a feedback button, showing the cooler loaded with the recommended accessories.
Impact
This test experience ran for a quarter. We reviewed the results and found it provided a positive impact on the site.
Increase in AOV
There was an overall AOV increase of 3.5% over the original (control). Users who interacted with the tests added one or more accessories to their order. The most popular accessory was the Sidekick Gear Case at 1.5%.
EU Team Interest
The EU eCommerce team expressed interest in a future opportunity to test this experience on their site to assist with accessory education and awareness.
Conversion
At the end of the quarter, we saw an 8.0% increase in conversion with a total of 200k sessions.
Challenges
Our goal was to test quickly and gather test insights. We focused on creating a practical design to learn how our users will interact and behave with the experience. Through the design process, I encountered challenges like:
Obtain assets
Because our team did not have the creative assets, we reached out to the Creative team to obtain them. While it was pending, we prioritized the assets we have internally in the design.
Timeline
Our timeframe to launch the test was within a month, we divided the design/copy and development work into two weeks each. With the time constraint, we weren’t able to conduct a usability test before launch, so we relied on research and data to make the best design decision.
Reflections
Learnings
Despite the positive results, we recognized this is the first time an interactive experience was tested on the product description pages. We gained valuable insights into users’ interaction and behavior with the feature to further refine future site tests.
What would I do differently?
- Obtain assets early to ensure we have sufficient time for a usability test.
- Conduct more research on user accessory needs and usage behavior.