Linktree mobile app

Linktree

UI/UX Design

CASE STUDY

Key points

Project goal: empower anyone to create and grow their digital universe on the move.
Research process: undertook inception workshops with stakeholders to define success metrics, market segments, and review product usage data, focusing on speed to market and improving activation and conversion rates.
Design process: explored multiple navigation structures, collaborated on visual design aligned with Linktree’s rebrand, enhanced key user flows, and streamlined navigation.
User testing: conducted user interviews and unmoderated tests, iterated designs based on feedback and addressed issues.
Impact: upon release in July 2022, the app's activation rate was 37.5% higher and paid conversion rate was 126.4% higher, when compared to web. The mobile app has now been downloaded over 3 million times, with an App Store rating of 4.8.

Project overview

With the majority of user sign-ups and logins from Linktree users happening from a mobile device, we recognised the need for a mobile app. Our goal was to create the best possible way for users to set-up and manage their Linktree from a mobile device. As the sole designer on the mobile app squad, It was my task to design this new experience for both iOS and Android. Released in July 2022, the Linktree app now has over 3 million downloads with an average rating of 4.8 on the App Store.

Process

Understand goals and scope through workshops and research
Identify friction and problems within the Linktree web experience
Design UI/UX
User test and iterate
Release and understand impact
Create design documentation and resources

Goals and scope

As a squad, we initially conducted an inception workshop with key stakeholders to define measures of success, understand market segments, RAIDS and review current product usage data. This helped us to define scope and ensure we had clear requirements for the project.

We decided that our main focus was speed to market with an aim to release quickly and learn. The main metrics we were looking to improve compared to the web product were activation and conversion to paid plans.

Ultimately, we defined our goal as: empower anyone to create and grow their digital universe on the move.

Inception workshop

In terms of feature set, we felt that the key functionality from the web product that was crucial for users to be able to experience the value of the product included:

adding and editing links on their Linktree, including support of the most used link apps
editing the appearance of their Linktree with the most used appearance features
previewing what their Linktree looks like
viewing high level analytics data
accessing the most used Linktree settings.

With these requirements in place, it was now clear what we were looking to build.

Identifying problems within the Linktree web experience

Since the mobile app was going to largely be a translation of the web experience to a native app, I began reviewing the current mobile web UX and associate research that had previously been conducted around different parts of the product experience.

The key UX issues that I identified were:

UI of mobile web

A high amount of clutter and information shown for mobile devices, which made the product hard to use.
Many accordions were used, increasing vertical scrolling effort as well as information density.
Important actions were hard to reach by thumb.
Small touch points made it hard to use and increased errors.
Low activation rate: 15% on mobile web vs 25% on desktop

With a good understanding of the problems our users currently faced, I had a foundation to begin designing a native app experience that would be familiar to current users, while also making mobile-specific UX improvements to make it even easier to manage a Linktree on the go.

Design

Navigation

I first began by creating multiple information architecture diagrams to explore the best way to structure the navigation of the app. This was a good way to try out different approaches to the navigation with little effort. It's also a great way to see an overview of all pages and how they may connect.

App IA exploration

Once I had explored different variations of the navigation with the IA diagrams, I took the most viable ones and created a couple of mid-fidelity designs to get a better feel for the different approaches.

Mid-fidelity screen layout design exploration

I explored different approaches that varied substantially from the current mobile experience on web, including combining pages with similar functionality together, placing navigation items at the bottom of the screen for easy reach and simplifying components by removing useful information.

In collaboration with my squad and stakeholders, we landed on a version that streamlined all primary pages into a bottom tab bar that is familiar to users and ubiquitous amongst native apps. This version felt like an improvement that didn't stray too far from the overall navigation structure on desktop and mobile web.

Visual design

While I was working on the design of the mobile app, Linktree was going through a complete rebrand by the award-winning design agency, Collins. Because of this, I explored UI designs that were similar to our current web UI as well as designs that pushed the boundaries of our visual design language, and leaned into our new look and feel being created by Collins.

Visual design exploration

Working closely with the rest of the design team, we landed on a style that introduced some aspects of our new branding including more rounded corners and shapes, minimal use of background fills and borders, and the introduction of our new colour palette.

Over time, this visual design formed the web design system that the design system designer and myself collaborated on.

UX improvements

Apart from the improvements to the navigation and visual design, I also looked at making UX improvements to key user flows. One example of this was the link editing experience.

Within the Linktree admin, links added to a Linktree are represented by 'Link blocks'. These link blocks represent each link on a Linktree and allow users to edit things like title, URL and options such as how the link is visually displayed on the Linktree. On mobile web, editing the options of a link was done so by tapping on various small icons at the bottom of a link block. This would then reveal the link editing options in an accordion style. This approach presented issues such as:

Link editing experience on mobile web

icons for the different option were not labelled and unclear what they meant
the icons were small and difficult to tap on
when the icons were tapped, link options were shown inline on the page and only helped to increase cognitive load
the accordion introduced more vertical scrolling.

To address these issues, I moved most of the link editing options onto a seperate page. While this introduced an additional tap, moving the icons to a seperate page removed clutter and reduced overall cognitive load on the links page. The full edit link page better utilised screen space and only the relevant information for the user's task is shown. To access the different link options, I utilised a scrolling tab section which allowed me to increase icon size and to introduce labels for the link options to make it clear what each option was. I also reordered the link options based on the usage on web to ensure the most used options were the most accessible.

Link editing experience on mobile web compared to the app

User testing and iteration

Throughout the design process, I made sure to get feedback on my designs from my squad, the rest of the design team, and key stakeholders. One piece of feedback was there was not 100% confidence with the way that the app designs deviated from web. In order to validate my design decisions and increase confidence, I conducted several user tests.

I conducted one round of user interviews and two unmoderated user tests. The goal of the user interviews was to get thoughts and feedback from a handful of our power users. I was able to uncover some issues within my design and understand how current users felt about a Linktree management experience that they were not accustomed to yet. Overall the participants responded positively and largely didn't have issue with a more native app experience.

One aspect I tested during the unmoderated tests was the add link flow. Below is a slide from a presentation I presented to the key stakeholders. I was fully transparent that only 38% of participants completed the add link task with no issue. Of those who did not complete the task with no issue, most were overwhelmed by the amount of options on the first screen in the add link flow and would miss the important 'Enter Url' field at the top.

User test findings presentation slide

In order to address this issue, for the next user test I tested a variation in which the 'Enter Url' field stood out more prominently within the rest of the UI. With this and various other changes, participants no longer ran into any issues when completing this task.

UI changes based on user testing findings

Through testing, I was able to identify and address issues within my designs. Being fully transparent with stakeholders around issues that were uncovered during testing, iterating, and testing again, and showing how these issues were addressed, made stakeholders feel confident in my designs prior to implementation.

Other screens

All other screens were designed through exploration, internal and external feedback, and iterations to address usability issues found. The app was built for both iOS and Android, so platform-specific designs were also made to ensure the app felt native regardless of the operating system.

Release and understanding impact

The Linktree mobile app was released globally to Google Play and the App Store in July 2022. It has now has reached 3+ million downloads. Upon release, it had a 4.9 App Store rating and 4.7 on Google Play. Here are how our key metrics compared to web:

activation rate increase of 37.5% (22% on app compared to 16% on mobile web)
paid conversion rate of increase of 126.4% (6% on 2.65% on web).

The mobile app release was the second most profitable initiative for Linktree in 2022.

Design documentation and resources

Alongside the design of the app, I also created documentation and resources for other teams who would work on the app in the future. This included;

a mobile app Figma design library
design documentation
mobile app user behaviour analytics dashboard
mobile app insight report - a document that outlines the differences between app and web user behaviour.

Design system/documentation

Mobile app user behaviour analytics dashboard

Through the mobile app user behaviour analytics dashboard and the insight report I created, I discovered interesting insights that I shared with the wider company. Some highlights include:

Compared to web, there are less users that fit within the 'business' category and more that fit in the 'fashion', 'personal' and 'influencer' category. This suggests mobile app users are slightly more casual. Inversely, on web there are more power users that use Linktree at work as a part of their job.
Mobile app users are more likely to use 'link apps' (rich link blocks that connect with other platforms). I determined that this was likely due a design change on the 'Add link' screen where links apps are more prominent. This change was eventually added to the web as well.
Mobile app users are significantly more likely to add a thumbnail to their link. This is likely due to a design change on the 'Edit link' screen where the additional link options are more accessible.
Mobile app users check their analytics more often compared to web. I hypothesise that this is because mobile phones are often more accessible to users.

The documentation and research I conducted was used by other teams once they started to develop for the mobile app and to inform changes on the web.

Conclusion

The design of the Linktree mobile app was one of the largest and most complex projects that I have worked on. Aligning on what problems we were solving with the inception workshop was key. Sharing early and often ensured that I could receive valuable feedback and gain trust amongst stakeholder. Multiple rounds of user testing took out doubt and helped validated design decisions. By comparing data between web and app usage I was able to uncover insights that were valuable for the wider team.

While the project was largely a translation of most of the features found on the web product, I was able to design an experience that was both familiar but superior to the mobile web counterpart. The project saw an increase in activation and paid conversion, as well as an increase in adoption of certain features. The app also had a positive impact on the web product as certain changes were translated here also. Overall, the project was a profitable and advantageous initiative for the business.