Project intro
This project aimed to streamline the design process within Canva, enabling users to use Bitly’s QR codes and short link generation and customization into their visual content.
UX, Arcitecture
Bitly Inc.
2023
With over 10 billion connections (clicks and scans) per month and 800 app integrations, Bitly is an all-in-one link management platform for Short Links, QR Codes, and Link-in-Bio.
Bullet points
I was the primary product designer for a product trio, and I took the product from end to end.
Bullet points
A preview of a user creating a QR Code and generating a QR Code from an already made link
Role: Ideation, Prototyping & User Experience
Canva, approached Bitly to explore integrating Bitly’s functionality into their platform via Canvas SDK
Integrate Bitly’s QR code and short link generator into the Canva platform, to enhance user convenience and creativity.
Most successful integration Bitly ever launched, with over 329% more users than projected.
Involving Canva’s QA/Design team earlier in the project could have alleviated surprise guidelines and sped up development.
Discovery: Assess the potential value this integration brings to our users. Evaluate the existing demand in the market. Investigate competitors in the same space and their architectural approaches.
Direct: Consolidate and organize identified features into a scannable and easily digestible format. Ensure that the creation of QR Codes and short links is balanced to avoid overshadowing one another.
Create/Ideate: Develop desktop layout prototypes to test the user flow.
Iterate: Implement feedback and insights gained from the prototypes into the designs.
Build: Collaborate with Canva to seek design approval and address any development-related queries.
Launch: Roll out the link list, QR Codes, short links, settings, create new, and all associated states.
We began by conducting in-depth user interviews and surveys. Using Pendo our in-app survey findings revealed a significant revelation, as an overwhelming majority of respondents consistently reported using Bitly and Canva.
Our investigation uncovered a strong user affinity between Bitly’s link management capabilities and Canva’s design features. This affinity indicates that the same audience and users are likely to employ both platforms to achieve their goals.
Bullet points
After gathering data from surveys and interviews I performed a competitive analysis, testing 5 direct competitors.
I performed usability tests to determine which design patterns and user flows were effective. This revealed that the vast majority of these competitors operated in one of two ways:
1. App acts like a folder that can only access QR Code you already made
2. The app could only create new QR codes and customize them, with no ability to manage previously created QR codes
Additionally, none of the apps included a short link feature.
Bullet points
The optimal flow is clear: don’t interrupt the user’s workflow. While exploring the creation of a simple QR code, it was found that it didn’t offer anything distinctive compared to what competitors already provided.
However, what remained uncertain was, ‘How should we structure the functionality?’
After many iterations and assumption testing, the decision was made to venture into areas where competitors hadn’t gone and incorporate link shortening into the product. Additionally, the product was constructed to reflect its link management roots.
Bullet points
Since we were working with in Canva, we used Canvas App UI Kit, however this kit wasn’t entirely complete. I was restricted in the designs we already had created on the Bitly platform and had to reimage error states and toggle functions.
To speed up development I took the Canva Kit and built it into a library, labeling all the elements exactly how Canva refers to them in the SDK. This made it incredibly easy for our Devs to use Canvas library to recreate designs.
Bullet points
Intial testing uncovered a heavy friction point at the start of the app, authentication. After downloading the app the user is confronted with an API key to connect to Canva. This caused the exact problem we were trying to solve, “jumping between platforms”.
Working with engineering, we figured out we can launch a sign in/register modal. Solving the “jumping issue”.
Bullet points
Bitly’s revenue strategy revolves around the idea of ‘link limits.’ However, the introduction of QR Codes added a layer of complexity to defining these limits. QR Codes have their own restrictions across different pricing plans, even though they are closely linked to traditional links.
In simpler terms, you can create a link without a QR Code, but you can’t generate a QR Code without a corresponding link.
To address this challenge, we ensured transparency by clearly communicating technical details and limitations to users as they created their content. After many iterations, the final design listed two options structured to entice users who create short links and users who want to create QR Codes, while providing a clear mental model of how the products work. This had the added benefit of increasing the use of multiple products by having both options upfront and clear.
Bullet points
A significant emphasis of the app was on creating and generating QR Codes. The assumption was that a user would prefer to take an existing short link and generate a QR Code to consolidate tracking metrics under one URL.
This assumption aligned with how the product functioned on the Bitly platform, where having the same URL multiple times for the same campaign was found to be a negative experience for the user.
The initial design featured a simple “Generate” CTA button, but due to additional elements such as a title, destination URL, and color picker, cognitive load became a concern.
I designed a placeholder image to represent the QR Code and added a CTA with clear, concise messaging about the action to be taken. This not only enhanced the user’s ability to visualize the action but also minimized content displacement when the QR Code was generated, preventing subsequent content from shifting downward. Grouping similar elements enabled users to recognize the relatedness of features.
Bullet points
The best performing integration Bitly ever had
Out of 800 integrations, this app has proven to be the most successful one ever launched by Bitly, achieving its 90-day forecast in just 21 days. The Bitly-Canva integration is poised to become one of Bitly’s largest successes.
Download performance
Out of 800 integrations, growth
Checkout the handoff document with final flows.