Commerce Ecosystem
Commerce Growth and Retention
2019 - 2022
Contributions
UX lead
Design
Prototype
Secondary Research
Tools Used
Opportunity
How might we increase user engagement in Lifestyle articles and increase commerce revenue utilizing existing media formats?
Problems
Quick brainstorm
As a first take, we looked into all the video content we have across Yahoo Lifestyle articles. We did some quick brainstorms. But we soon realized this kind of in-video interactivity will need a lot of engineering effort and image recognition capabilities that can match with a database of products. To minimize the effort for MVP, we decided to limit our scope and wanted to come up with a solution that we can ship fast and test our hypothesis without having to build a complete new system.
So…What can we do as a MVP within the technical constraints?
Building the MVP
Image Shape
We figured we receive 2 kinds of images from the merchants, square and vertical. For MVP we needed to decide on one form factor that suits both types of image assets the best. After considering all the possible shapes, we decided to go for a vertical image frame that will render the image as “fit to width” for best UX.
Explorations
USer Testing
“All the items that she talks about here, you don’t have to hunt and search for it, it’s right here. That’s actually pretty cool!”
“I would love if they were to launch something like this on Youtube. It feels like TV, internet, etc are becoming integrated.”
100% of the users said they liked to see more items together.
“For me visually as a consumer, I like seeing a grid of things. I want to look through every single one. It feels like it gives you more variety.”
Final Design
After testing multiple designs and taking the user input into account, we iterated the design and finalized one to ship for both desktop and mobile. View live here.
Features:
- A carousel of products that are featured in the video and the article.
As the video progressed, the corresponding product is highlighted. - Users can hover over any product to learn details and click it to go to the merchant’s page to purchase.
- Company gets a revenue share if a product is purchased.
Soft Launch
Shoppable video was first launched to test for only one article targeting the Amazon Prime Day and the team saw amazing results as the stats show below.
The result really made the team excited…
Continued explorations
We continued exploration to add shopping features on our image-based articles too. We also explored the possibility of having a product detail and comparison page to add more value for our users.
Becoming a celebrated Product
The success of the experiments eventually gave birth to a full suite of editorial tools, named Fireplace platform, to empower our editors to add more interactivity into their content that is beyond commerce. The interactive shopping experience got huge attention across the company, got featured multiple times in company events, and till today stays a crucial feature of the company’s commerce initiative.
Exceeded Goals
Numbers are self-explanatory! The team had certain goals to achieve by Q1 2020, and we exceeded goals in every aspect!
Phase 2: Further Opportunity
Monetization Product Team set a goal to increase traffic to Yahoo O&O commerce articles and provide users with a dedicated module to feature the best deals. The module will feature multiple shoppable articles, curated by Yahoo Shopping editorial team, in a fixed placement on the homepage to allow homepage readers to begin to expect to see shopping and deals-related content, helping them to view Yahoo ecosystem as a destination for commerce.
Goals
How might we expand commerce across the ecosystem and help users see Yahoo as a commerce destination to find the best deals?
- We are looking to disengage commerce revenue from reliance on the Need to Know (NTK) promotion. Commerce success is tied directly to premium homepage placement and with the volatile news cycle it’s not always appropriate to promote commerce content.
- As we expand commerce across the ecosystem, we need to show that we are a destination for commerce, without a fixed placement for users to expect deals and commerce, commerce opportunities won’t significantly scale.
Goals
- Drive Revenue
- Increase User Engagement
- Increase MAU
- Ultimately we want to show less ads and more content that users find useful without impacting the revenue
Before Commerce Module
Before the Shopping Module was designed, shopping-related articles would randomly appear in the news stream like the one highlighted below (desktop).
Problems with it
- Easily lost inside the stream of a lot of other news, hard for shopping enthusiasts to find it
- Users who want to find more deals have to keep scrolling the stream hoping to find another great deal
- For the above two reasons, users may not see Yahoo as a legitimate destination to find such deals
- Shopping articles may appear with unpleasant news, like the truck crash news right below the shopping article, which is not ideal
- For all these reasons, Yahoo misses a great opportunity to monetize its shopping articles better and fails to engage shoppers
Design Exploration (desktop)
We explored many design options to best communicate with the users that this is a section where they can always find shopping deals. We tried to differentiate the unit from the news stream but also tried to keep the design language familiar enough to not make it look like it of the place. We reached out to the major stakeholder from the Homepage Design team to discuss how these designs impact the Homepage layout that they own. We also talked to the engineers to learn about the technical side of pulling multiple images from a single article and showing discounts and such.
The "failed" MVP
For technical limitations, we soon realized pulling multiple images per article isn’t something our system supports, and building such functionality will significantly delay the project. So we decided to try a single image per article for MVP. We also decided to add a section title to better communicate with the user about the feature and separate it from the regular news stream. However, when tested, we didn’t get any significant clickthrough on the module. But we believed we can achieve our goal. So we went back to design.
Design Iteration
For the iteration we decided on a couple of design principles:
- Make the module bigger and more noticeable
- Draw user attention by a featured article with a bigger image followed by a series of articles with smaller images.
- Add a CTA to drive users further to the shopping hub
- We also advised editors to use clean product images for the featured products so that the section doesn’t look just like another news article with busy photographs.
Based on these design principles, we explored different visual treatments for the module, from more aggressive distinction to mild distinction.
Final Design: Eventually, we went with the less cluttered design to minimize visual noise on the Homepage stream. The product team ran experiments with the placement module in different locations of the Homepage stream to find the
Mobile Design
As the introduction of the Shopping Module on desktop went well, the team wanted to expand it to mobile. After considering a few options, we finalized two designs for bucket tests.
DESIGN 1
- Draw user attention with an edge-to-edge featured image with an article followed by a carousel of small cards for additional shopping articles.
- Call for action (CTA) to the shopping hub page at the end of 5 articles to help users discover more shopping deals.
DESIGN 2
- In this version, we made all the article cards equally big in a familiar carousel format that exists for our native carousel ad.
- The cards end with an even larger CTA comparing to design 1.
Results
The designs were tested in the holiday season when shoppers are actively looking for great deals.
Desktop
- A single Commerce Module on Homepage generated 29% of the total commerce revenue.
- Daily revenue increased.
- 6.7% user-based CTR (unique number of users clicked on any of the articles within the module divided by the unique number of users who saw the module)
- 0.71% module CTR (total clicks divided by total module impressions. If we have 5 articles within the module, every time it was shown to a user, it will generate 1 module impression)
- No significant effect on user retention
Mobile
Take away
- Great and successful products can be built even within technical constraints
- A little interactivity goes a long way!
- Users love to engage and are not shy to interact when they have the right tools
- Our initial hypothesis and studies were correct; interactivity does drive engagement, retention, and conversion (when it is well-designed and adds value). Not to mention, the company earns money when the users have a better experience and appreciates the value addition