Simplify links, amplify reach
My role
Product designer
Timeline
8+ Weeks
Company
Bitly is a link management platform best known for its URL shortening service, transforming long links into short, trackable ones. It also provides tools for custom branding, engagement analytics, QR code generation, and creating simple landing pages.
The PROBLEM
The existing Bulk Upload functionality for links within Bitly was suffering from an outdated user interface, lacking accessibility and consistency with its evolving design system. This resulted in a confusing and inefficient experience for users needing to upload multiple links. Furthermore, with the growing importance of QR Codes as a Bitly product, the platform lacked the ability for users to create these in bulk as well. This presented a gap in offered functionality and the user need for a streamlined, adaptable bulk upload process that could generate paired or standalone short links and QR Codes.
The GOAL
This project evolved over two phases. Initially, the goal was to deliver a redesigned Bulk Upload experience for links that is accessible, intuitive, and consistent with Bitly's design system. Building on this foundation, the subsequent phase aimed to extend this functionality to enable the bulk creation of QR Codes, both as an optional accompaniment to short links and as standalone entities. This required careful consideration of Bitly's existing system complexities, to ensure an intuitive user experience that minimized potential for user error.
final deliverables & results
Bulk Links & QR Codes, Made Simple
Navigating the complexities of Bitly's backend for link shortening and QR code creation, while simultaneously ensuring an intuitive, error-minimizing UI, presented significant challenges. I collaborated closely with the Product Manager, Backend and Frontend engineers, and Content Strategist to design the solution. This resulted in two separate pages: one for bulk link shortening with optional QR Code generation for each link, and a separate page for creating standalone QR Codes without consuming monthly link limits. Below you will find interactive prototypes that you can click through.
Following the launch of phase 1, the improved bulk upload feature for short links, the following results were observed:
Monthly link bulk shortening usage - increased by +20%
Number of accounts using bulk upload - increased by almost +40%
The subsequent release of phase 2, introducing QR Code bulk upload creation resulted in:
Monthly QR Code creation - increased by +1.3%
DISCOVERY
Decoding user needs
To gain understanding of limitations of the existing Bulk Upload feature limitations and identifying opportunities, several approaches were taken:
Analyzing user feedback
Collaborating with the Product Manager, I deep-dived into the feedback Jira board to discover user pain points and requests related to bulk link shortening. This direct channel to our user base was a valuable source, revealing common problems and feature requests that needed to be addressed in the redesign.
Consulting with the Customer Success team
Engaging with the CS team allowed us to leverage their deep understanding of user challenges. Their daily interactions with users provided invaluable insights into recurring pain points, common support issues, and user needs related to bulk uploads.
Competitive and comparative analysis
I researched how both direct competitors and platforms in other industries handle bulk imports and processing. This allowed me to understand the best practices and UI and workflow patterns that informed improvements to our bulk upload feature
DEFINITION
Customer journey map
To visualize the user's experience with the existing bulk upload feature, we created a Customer Journey Map, which helped us to further empathize with the user, understand their pain points, and identify opportunities to improve the user experience in the redesign of Bulk Upload feature.
IDEATION
Wireframes
After gathering the insights and working with my team to prioritize the opportunities, I moved onto the ideation phase, during which I wireframed and sketched potential design solutions. The goal was to improve the UX of the existing bulk upload feature and expand the functionality to also allow creation of QR Codes in bulk. Some of the initial ideas I explored included:
A single unified bulk upload page
This concept envisioned one page for all three bulk upload types: Links only, QR Codes only, and short inks + QR Codes. User would select the desired upload type, and the page would dynamically adjust using progressive disclosure, showing relevant fields and offering the appropriate CSV template for download.
Three separate pages
On the opposite side of the spectrum of the first idea, another options I explored was creating separate pages for each specific bulk upload scenario: one solely for links, one solely for QR Codes, and a third specifically for creating links with attached QR Codes.
Two pages, similar functionality
I also considered allowing the upload of files intended for creating links + QR Codes on both the bulk link upload page and the bulk QR Code upload page, offering users multiple ways to accomplish the same task.
Ultimately, the backend limitations and the goal of simplifying the process and ensuring predictable results for users made me move on from these initial ideas, as they risked confusion and unexpected outcomes (as detailed in Challenge 4 below).
DELIVERABLES
Final result
BEFORE
The original Bulk Upload feature was housed within a narrow side drawer on the "Create new link" page, often leading to accidental closure and loss of progress. The UI suffered from accessibility issues, including insufficient color contrast, and provided a poor user experience due to a lack of essential information, such as step-by-step guidelines, monthly link limits and file requirements. It also lacked common modern functionalities such as drag-and-drop file upload option and displayed generic, unhelpful error messages that left users unsure how to resolve issues.
AFTER
The redesigned Bulk Upload feature transitioned to a dedicated, standalone page, significantly improving usability and accessibility. The new interface adhered to WCAG Level AA guidelines, ensuring proper color contrast, screen reader compatibility, and clear information hierarchy. Important user pain points were addressed by providing important information related to link limits, step-by-step guides, and file requirements; and by implementing a system of more specific and actionable error messages.
This foundation also allowed for a further strategic expansion to include bulk QR Code creation as an optional add-on to the short links, or standalone. As Bitly's second biggest product offering after short links, the lack of an option to create QR Codes in bulk was a significant limitation for users with a need for high volume of QR Codes. This new functionality required that several complexities were addressed to minimize confusion, user error, all while navigating the limitation and complex backend logic.
CHALLENGE BREAKDOWN
Problems & solutions
Challenge 1: Accessibility limitations and WCAG non-compliance
Problem:
The original bulk upload UI, a narrow side drawer, had several accessibility issues that failed to meet multiple WCAG A or AA Success Criterions, including but not limited to SC 1.4.1 (Use of Color), SC 1.4.3 (Color Contrast), SC 2.1.1 (Keyboard) and SC 3.3.3 (Error Suggestion). This made the interface difficult or impossible to use by users with visual impairments and generally created a not very user-friendly experience.
Solution:
Moving away from the restrictive side drawer, a fundamental overhaul was undertaken with the creation of a dedicated Bulk Upload page. This transition provided the necessary space to prioritize and implement crucial accessibility improvements, addressing several key areas including:
- Adherence to WCAG guidelines: Ensuring all necessary contrast ratios were met or exceeded.
- Page structure: Implementing proper HTML tags and logical page hierarchy to ensure intuitive navigation and comprehension by screen readers.
- Images and illustrations: Documenting which visual elements were decorative and which conveyed functional information, aiding screen reader interpretation.
- Keyboard accessibility: Ensuring the page is fully keyboard-accessible and provides ways to complete tasks without the use of a mouse or other input methods.
- Error handling: Collaborated with the engineering team to identify and document all possible error scenarios, and crafted clear, specific, and actionable error messages.
Challenge 2: Lack of essential user information and guidance
Problem
The initial UI was extremely sparse, offering minimal information. Users were left in the dark about several details:
- Monthly link limits: There was no indication of how many short links they had remaining for the current month within the drawer itself. While this information was present on the underlying page, the drawer's dark overlay obscured it, making it easy to miss.
- Process guidelines: No guidance on how to best use the feature, what guidelines to follow, or where to find help.
- File requirements: Users were not informed about the expected file size limit or supported file formats, leading to failed uploads and confusion.
- Notification email: While it mentioned an email would be sent upon completion, there was no guidance on how to change or confirm the email address for notifications.
Solution:
The redesigned page included all necessary contextual information that user may need.
- Remaining link limits: Clearly displayed the user's remaining monthly link creation limit,.
- Help Center link: Prominently featured a link to the Help Center, guiding users to comprehensive documentation and best practices for the bulk upload process.
- Clear requirements: Explicitly stated file size limits and supported file formats (CSV, XLSX) directly on the upload screen, preventing common errors.
- Email preferences: Specified email address to be used for notifications and provided a link to Settings for users to manage their email preferences.
Challenge 3: Managing link and QR Code monthly limits
Problem
QR Codes have their own monthly creation limits, separate from short link limits. This presented a complex user experience challenge, especially when users wanted to create "coupled" links and QR Codes in bulk. It was crucial to clearly communicate what would happen if a user had enough of one resource (e.g., links) but not enough of the other (e.g., QR Codes) to fulfill their bulk request. For instance, if they uploaded 5,000 entries when they had 6,000 links but only 2,000 QR Codes remaining, the system needed to explain how this scenario would be handled without leading to confusion or unexpected outcomes.
Solution:
To ensure transparency and prevent unexpected outcomes, both monthly link and QR Code limits were clearly displayed on the page. When users opted to create optional QR Codes alongside their links, a message was displayed: "We will only process up to the number of links that match your remaining QR Code limit, starting from the top of the list." This clear communication ensured users understood the exact outcome in such scenarios.
Challenge 4: Conflicting customization options and CSV templates
Problem
Bulk link upload supports customization of short link back-halves and the addition of tags via the CSV template. When introducing bulk QR Code creation, a conflict arose:
- At the time of this project, QR Codes did not support tags.
- While QR Codes technically have an underlying short link, Bitly allowed creation of QR Codes "without" a link. Doing so did not consume a short link monthly limit and did not expose the short link in the UI.
- Allowing users to customize their back-halves or adding tags for these standalone QR Codes would be misleading, as those customizations would effectively be ignored, and random back-halves would be used instead.
Solution:
To address this, a dedicated, a careful approach was taken. This resulted in the following decisions:
- A separate page for bulk creation of standalone QR Codes was created.
- Two distinct CSV templates were provided to manage the differing customization options: one for bulk link creation (with optional QR Codes), which included columns for custom back-half and tags, and a separate, simplified template for bulk standalone QR Code creation, which omitted columns for back-halves and tags, to prevent misleading users.
- To safeguard against user error and prevent the wasteful consumption of monthly limits, uploading a file that utilized the link bulk upload template (which included back-half and tag options) to the standalone QR Code bulk upload page would result in the file being rejected. No QR Codes would be processed in this scenario, and therefore, no limits would be consumed. This validation was put in place to minimize the severity of accidental uploads of incorrect files, as processing such a file would lead to the creation of QR Codes that didn't meet the user's expectations (i.e. lacking custom back-halves or tags), while still consuming their monthly QR Code limits.
- The standalone QR Code bulk upload page guided users to the link bulk upload page if their intention was to create links with accompanying QR Codes.
Challenge 5: Applying custom QR Code designs in bulk
Problem
While individual QR Code creation allowed extensive customization of design (colors, logos, frames, patterns, etc.), the backend limitations at the time prevented this level of customization within the bulk upload flow. However, allowing users to apply a custom design was crucial for bulk creation, as individually editing thousands of QR Codes after creation would be prohibitively time-consuming.
Solution:
Recognizing a backend limitation that prevented direct QR Code design customization within the bulk upload flow, a workaround utilizing functionality was designed. Users could create and save custom QR Code designs as "templates" prior to bulk upload. The design incorporated a template selection step on both the bulk link page (for optional QR Codes) and the standalone bulk QR Code page, allowing users to apply a saved design to the entire batch. This effectively bypassed the limitation, enabling users to brand thousands of QR Codes efficiently without manual post-creation edits. Since templates couldn't be created directly from the bulk upload pages (another backend constraint), a link to a Help Center article was included to guide users through the template creation process.
Additional improvements
In addition to the challenges addressed in the redesign and expansion, other several improvement were implemented to improve the user experience of the Bulk Upload feature:
Improved error reporting
The reports generated after a bulk upload was complete were expanded to include descriptive explanations alongside any error codes encountered. Previously, only error codes were included, which were vague and not very helpful. This helps users quickly understand why a specific link or QR Code failed to process. A direct link to a new, comprehensive Help Center article describing all potential errors and their resolutions was also added.
Additional file format support
As frequently requested by our users, support for the XLSX file format was added for bulk uploads, in addition to the already supported CSV format.
File upload screen and bulk job tracking
A new screen was added following file submittion that includes an estimate of how long the job might take and offers a direct link to a Bulk Upload page within the user's Settings. This page allows users to track the status of their current bulk upload(s), access and download reports upon completion, and view a history of previous bulk jobs from the past year.
NEXT STEPS
What's next?
While the redesigned and expanded Bulk Upload functionality significantly improved the user experience and unlocked crucial capabilities for creating links and QR Codes in bulk, there are several areas that could further improve workflows, such as:
ON-THE-FLY QR CODE DESIGN CUSTOMIZATIONS
A valuable future step would be to explore enabling more granular, on-the-fly design customization directly within the bulk upload flow itself, without solely relying on predefined templates. This would offer greater flexibility for users needing unique designs for a specific bulk batch.
IN-PAGE QR CODE TEMPLATE CREATION
Another valuable addition to this page would be giving users ability to create and save new QR Code design templates directly from within the bulk upload page. This would eliminate the current reliance on guiding users to an external Help Center article, creating a more efficient template management experience.
BULK EDITING
The introduction of bulk editing feature for both links and QR Codes would allow users to update thousands of links or QR Codes at once, e.g. applying a new design to QR Codes, or editing destination URLs for both links and QR Codes, without having to edit each link or QR Code individually, thus saving valuable time.
QR CODE TAGS
To ensure consistency across Bitly's core offerings, adding the ability to add tags to QR Codes, similarly to links, is an important next step. This would allow users to categorize and manage their QR Codes using the same familiar tagging system used for links.
Let's chat!
I'd love to connect with you! Let's talk about anything, and grab some coffee
© Anastasiya Pak 2025