Layla jo

TikTok Like2Buy

Like2Buy is a tool that lets fans browse and buy from TikTok feed. It has a 59% conversion rate, showing it's good at turning visitors into shoppers. The tool also provides data on website traffic, visits, clicks, transactions, and top-performing content. It essentially bridges the gap between browsing social media content and making purchases, allowing users to seamlessly transition from admiring products on Instagram to purchasing them through an integrated shopping experience.

A/B testing prototypeMVP Slide DeckArticle

Platform:

(Responsive) Web, App

Team (11):

Product Manager, 6 Engineers, Senior Product Designer, Product Researcher, Technical Writer

TIMELINE:

1 year

Tools:

Figma, Figjam, Condens

Business Impact (Dec, 2023):

Adoption results after two months post-General Availability (GA):
- Generated 637k consumer sessions for 130 clients, driving traffic to the website.
- 126 account visits to Like2Buy platform, totaling 5822 visits, with an average of 46 visits per account.
- 60 accounts tagging products on L2B Moderation, resulting in 1893 total clicks, averaging 31.6 clicks per account.
- 53 accounts have received >=1 site visit from TT L2B, generating 87.3k total visits, averaging 1646.4 visits per account, and $586.6 revenue per each visit.

Overview

What's Instagram Like2Buy?

Like2Buy is a link-in-bio tool integrated into Bazaarvoice’s Social Media Management product, enhancing a single hyperlink URL on Instagram to connect posts directly to specific product pages or other URLs. It creates a seamless shopping experience by displaying product images and videos within a Like2Buy page, allowing users to shop without leaving the Instagram app.

Problem Statement

Clients are interested in leveraging TikTok content to drive traffic and revenue given its strong rise over the past year or so. 30% of adults currently have an account on TikTok—for Gen Z, that percentage jumps to 71%. Additionally, 15% of all adults and 36% of Gen Z have made purchases based on TikTok. Given our past history of being the first to provide an Instagram link-in-bio solution, we are in a unique position to provide a best in class TikTok link-in-bio solution that drives traffic to onsite PDP(Product Detail Page)s to drive revenue.

Motivation

Videos are difficult and time consuming to make. Social media managers are unsure if the effort spent on making TikTok videos are generating enough ROI. Currently, TikTok has limited shopping features. This could be an opportunity to support the social commerce features in TikTok.

Qualitative Insights (Feedback/User Interviews/Surveys etc.)

What I accomplished

After Release

- Drive traffic and revenue with a shoppable feed, scroll-stopping videos, and make a purchase.
- 59% of Like2Buy visitors convert to an e-commerce session.

Outcome 1

Generated 637k consumer sessions for 130 clients, driving traffic to the website. 126 account visits to Like2Buy platform, totaling 5822 visits, with an average of 46 visits per account.

Outcome 2

60 accounts tagging products on L2B Moderation, resulting in 1893 total clicks, averaging 31.6 clicks per account.

Outcome 3

53 accounts have received >=1 site visit from TT L2B, generating 87.3k total visits, averaging 1646.4 visits per account, and $586.6 revenue per each visit.

Revamping Our Platform: Enhancing Visual Appeal

We redesigned the entire platform to enhance its visual appeal. And also, we drew inspiration from TikTok, incorporating some of its visual elements to reduce adoption friction when users compared TikTok's videos to ours.

Implementing a Responsive Design Grid System

We designed a responsive design grid system, like the one used by TikTok, to ensure an optimal viewing experience across diverse devices and screen sizes. This system maintains consistency in layout and design elements, enhancing usability and brand identity, ultimately contributing to improved user engagement and satisfaction.

Suggested a segmented bar chart for Instagram and TikTok

We proposed an Insights page where users can compare Instagram and TikTok, enabling our clients to strategize and decide which platform to invest in.

How might we provide a great TikTok Link-in-Bio solution for our clients?

Ideaton

TikTok Like2Buy Users

Bucky, Social Media Manager (B2B)
Anne, End User (B2C)
  • Uses TikTok as a channel to promote brands
  • Their TikTok is not currently shoppable
  • Wondering if making videos for TikTok is worth the ROI
  • Potential shopper who uses TikTok for content
  • Wants to find interesting products on TikTok videos

User Needs/User Cases

To understand and address the needs of both types of personas, we utilized information from user interviews and survey results to categorize users' expectations and goals when interacting with our product.

User Workflow

We divided into two user journeys, one for Bucky and another for Anne. This process was more complicated than I anticipated due to the presence of two distinct personas.
After developing two user flows, we shared them with developers and a product manager to ensure alignment between our understanding and theirs. Given their extensive experience of over 5 years with the product, getting their feedback was crucial before proceeding with any designs. This exercise allowed us to pinpoint key moments, laying the foundation for creating future test cases.

Initial Designs

The one on the left is the current Instagram Like2Buy, and the one on the right is the new TikTok Like2Buy. We attempted to enhance the overall visual hierarchy, integrated TikTok's visual elements to mitigate adoption friction, and introduced view metrics.

List View

I also suggested a design for the List View, aiming to streamline the user flow by displaying product previews directly on the main page, eliminating the need for users to click on each item. Instead, if they click on an item, they would be directed straight to the brand's product details page. However, a drawback of this approach is that it may not showcase a large number of videos initially, requiring users to scroll down a lot to view additional products. This concept underwent testing during user interviews afterward.

Links

Since there's a restriction on Instagram and TikTok that limits profiles to only one link, our personas resort to using a third-party platform to list additional links on their profile page. In light of this, I explored the concept of putting links directly on the profile. While this idea received positive feedback from other stakeholders, it won't be implemented as an MVP due to the time required for engineers to execute it.

Pinned Items

We also discovered that many clients utilize the pinning feature to showcase their promotions and seasonal events. We were curious about the number of posts they intend to pin and whether it might become cumbersome for our users, potentially causing confusion with TikTok's pinned items.

- Does our design meet our clients' needs?
- Does this list design help or hurt our clients' L2B?
- Does it help end users by showing which posts are pinned for L2B?

Usability Testing

User Research Goals

Our team's researcher conducted 6 interviews, and I helped to put together a discovery research plan and worked on an affinity map to synthesize the data together. I participated in most of the client interviews and shared my feedback during each debriefing meeting.

After incorporating design iterations based on user feedback and successfully passing tests with engineers, we released our product to select clients for preview/pilot in April. Four months later, we conducted 8 interviews with pilot users to identify their needs and pain points.

What We Found Out

"We have been super, super eager to have a like to buy link in our TikTok bio. It really feels like this is something that can monetize the experience for consumers and bring more value to the channel for sure, especially as a Canadian player on TikTok we don't have access to the same TikTok shop as our US counterparts may have. So for us being able to have that layer of monetization is really a priority for us."

Aldo

Results

Design Solutions

Design didn’t change much, but with research, we’re confident with these designs we came up with. We are not showing the pinned content per research findings and chose the grid design for the final design. 

I also worked on desktop designs that are responsive, meaning the layout changes based on the screen size. I took advantage of the wide screen and rearranged the components accordingly.

On the left side are the old Instagram Like2Buy designs, while on the right side are the new TikTok Like2Buy designs. As you can see, the new design is more visually appealing, allowing you to simultaneously view a video and product details at the bottom.

Outcomes & Impact

After deployment of our new designs,

Client Sessions Achievement:

Platform Engagement Growth:

Reduced Support Queries:

Testimonials

"Layla has a creative eye for visual design which is powerful for delighting our day-to-day users. Marrying intuitive user experiences with engaging graphically designed components has been integral in landing on MVP products that both drive client value but leverage new interactive patterns that take things to a new level. It's been a delight to have Layla help drive new ideas to showcase how the design discipline in itself can be a SaaS differentiator."

David Fein
Group Product Manager at Bazaarvoice

"Layla was an integral contributor on one of our flagship products, TikTok Like2Buy. Through considerable user research and a thoughtful design iteration process, She transformed an outdated experience into a successful product with greatly improved user experience. She was always considerate of design feedback and made critical adjustments in a timely fashion. It was a pleasure to work with her throughout the design and development process."

Ben Vellek
Staff Software Engineer at Bazaarvoice

Challenges & Lessons Learned

Overall, I enjoyed creating TikTok Like2Buy, and it has expanded my understanding of user-centered design. I appreciated the entire process of uncovering potential problems and proposing solutions. Conducting two rounds of usability testing allowed me to delve deeper into the users' thoughts to generate better ideas.

1. Defending my designs
My primary challenge is defending my designs against other engineers and designers. Throughout the process, I presented my designs to other designers during design critiques and shared mid-fidelity wireframes with engineers. Many designs couldn't be implemented due to restrictions and limited resources. I am still in the process of learning how to effectively articulate and defend my designs.

2. Building responsive designs
Creating a design that looks and functions well across all platforms posed a challenge. I designed the desktop version by myself, considering the maximum number of rows to display. To determine a reasonable number, I researched TikTok's current responsive designs and those of other competitors. Eventually, I adopted TikTok's row count, anticipating that our end users would visit our Like2Buy page and compare it with the original videos.