Creating Share functionality

Timeline
Nov 2021 - 2022 Aug
Role
Product Design
Platforms and Tools
Web App, Figma, Slack,
Miro, Linear
Company
Linktree
1.1
Overview

Sharing function is integral to helping a platform grow and build more audience organically. At Linktree, we want to enable platformization by enhancing sharing features to expand our audience from creators to subscribers.

Sharing an entire profile is rolled out to 100% users, which drove x5 more traffic to Linktree after launch. Even though sharing an individual link is only available for 10% of users, for now, it has resulted in 40K+ visitors clicking on the button and 55% of accounts have had a share button click.

I led the creation of the sharing feature on a Linktree profile from the ground by conducting user research, designing the entire flow and improving the experience after release.

2.1
Problem space

When creators put their Linktree on a social media profile, we have to rely on the functionality that social media provides. As a few social media (e.g. Tiktok) don't have a sharing function on their browser, some of the users can't share the Linktree URL with their friends.

Not enabling sharing functionality internally at Linktree was an immense blocker for us to move forward as a platform service.

3.1
Goal

Enabling sharing an entire profile and an individual link on a profile

Our goal is to enable share functionality on a Linktree profile by approaching what we could improve with a quick solution in phase 1 and what we could enhance the effect in a long term in phase 2.

4.1
Design process

Linktree's product design process includes Understand, Explore, Deliver, and Decide, which are flexibly applied to each project, feature, and phase.

Our process isn’t a single or linear process. We iterate multiple times and monitor the performance from the data and feedback after launch to continuously improve the overall solution.

5.1
Phase 1 - Sharing an entire profile
Design exploration & Delivery

• Explored design variations of the buttons' placement and decided options for an A/B test to first roll out to 10% of users.
• After 1 month, 115% clicks to share had been made from a total of unique visitors at the time.

I've come up with various design options for the A/B test when it comes to adding a share button with a combination of the existing subscribe button. We monitored carefully how much usage this feature got over a period of time to future release to a larger group.

5.2
Phase 1 - Sharing an entire profile
Decide

• Rolled out to 100% of users with option A after carefully monitoring the performance.
• After one week, We'd had +10M views generated just from the share button for over 200K Linktree.

5.3
Phase 1 - Sharing an entire profile
Improvement

After collecting user feedback, I drove the decision-making to show different icons depending on OS. It resulted in x5 more traffic right after this improvement.

My key achievement was softly tackling controversial discussions between different perspectives (e.g. design system, stakeholders, users, etc.) with my communication skills and moving forward our progress to drive values.

6.1
Phase 2 - Sharing an individual link on a profile
Challenges

How might we enable sharing an individual link?

Given such a small space on a link button, my biggest challenges were to solve problems around designing a seamless sharing experience that is optimised to each platform. (Mobile & Desktop)

6.2.1
Phase 2 - Sharing an individual link on a profile
Design explorations

On desktop, display a share button when hovering on a link.

Leveraging the hover function on the desktop, I made the share icon visible when hovering on a link. To highlight the click area, a background colour appears when hovering on a share icon.

6.2.2

On mobile, display a share button when swiping left on a link.

Leveraging the swiping ability on the mobile device, I made the share icon appear by swiping left on a link and overcame the limitation of the insufficient space on the screen.

However,
how might we educate users to swipe left on a link?

7.1
Phase 2 - Sharing an individual link on a profile
Understand

Conducted unmoderated user testing to understand how people might share one link on Mobile and how they feel about the hidden swiping gesture on a link.

By collaborating with a strategic designer, I led this user research to learn how we can better educate users about this new gesture at Linktree.

7.2
Phase 2 - Sharing an individual link on a profile
Objectives

Started with setting clear objectives to learn from the research.

7.3
Phase 2 - Sharing an individual link on a profile
Testing scenario

Put together scenario and hi-fi prototypes for a quick user testing in collaboration with a UX researcher.

7.4
Phase 2 - Sharing an individual link on a profile
Synthesis and results

We decided to add an animation preview for educating people through an ellipsis menu based on the research.

8.1
Phase 2 - Sharing an individual link on a profile
Deliver & Decide

After thoroughly doing QA, we finally got to roll out to 10% of creators to monitor the results and iterate on them. Even though the share button is hidden, 55% of creators have a share button click, which implies visitors can figure out how to share an individual link.

We will constantly monitor the metric and ultimately aim to release this feature to 100% of creators.

9.1
Learnings & Reflection

• It was hard to get all the team together to make an agreement even for a simple design flow on the surface.

Learned a lot to facilitate great communication between different stakeholders and make a compromise to move a project forward.

-> I would've set up one meeting with a clear agenda for all the related teams to get together to gain alignment and make a trade-off.

• Introducing a new design pattern and interaction was challenging to come up with a clear rationale and push my design forward.

Learned to make sure my design is clearly backed up with rationale and actual users' feedback and research.

-> Rather than relying on assumptions, I will keep designing with such an in-depth thinking process in mind that I learned through this project.

Explore more projects
Product Design (Enhancing capability)
byb
2020 - 2021
Product Design (Native App & Admin)
Mobile app