Layla jo
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 DeckArticleLike2Buy 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.
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.
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.
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.
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.
We proposed an Insights page where users can compare Instagram and TikTok, enabling our clients to strategize and decide which platform to invest in.
Reached a new high with 85% of our clients (110 out of 130) reporting a significant increase in consumer sessions, aligning with our strategic goals for the quarter.
Data revealed a 15% increase in account activity on the Like2Buy platform, jumping from 50% to 65% engagement. This indicates growing user interest and adoption.
Post-launch, the support team experienced a 10% decrease in questions asked via Slack, demonstrating the effectiveness of our user training and support resources.
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.
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.
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.
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.
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.
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.
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.
"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."
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.
"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."
"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."
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.