amy dai

09.20.25

Barcode component design

A scannable component designed for real-world functionality

Overview

Design a barcode component support a range of product needs—such as shipping labels and product tags that integrates seamlessly into our design system. This component ensures scanner reliability and adapts to various screen sizes.

Problem statement

Barcodes play a critical role in real-world interactions like tracking shipments, scanning event tickets, and labeling inventory. In this case, the existing component was either missing or not robust and accessible enough to meet product needs. Without a standardized, functional solution, clients were unable to fully utilize barcode features in their workflows.

Key challenges include:

  • No shared component or visual standard for barcodes
  • Lack of scalability, responsiveness, or clear usage guidance

Goal

The goal was to build a barcode component that:

  • Works well in design prototypes and real product contexts
  • Ensuring all common barcode types could be designed to fit seamlessly within the constraints of the existing design system
  • Is visually clean, scan-friendly, and responsive

Research and Design

Competitive analysis

Competitive analysis helps uncover additional use cases, shows how other companies approach component design, and inspires design considerations that may not have been initially apparent. It’s a valuable step in ensuring our solutions are both relevant and innovative within the broader industry landscape.

What is a barcode?

A barcode is a visual pattern made up of lines and spaces. It can be scanned by a machine to quickly read data, such as product details, prices, or tracking numbers.

Types of barcodes

Learning about the different types of barcodes helped me understand the different design considerations that are needed to support each type of barcode.

Design and development limitations

It’s important to consider several factors: the types of barcodes supported by our product, the amount of data each barcode type can store (data capacity), and how well the barcode renders at different sizes and screen resolutions which is important for maintaining the readability of the barcode by machine readers. Cross-platform compatibility is also key, ensuring barcodes display and scan consistently across devices and operating systems. Additionally, theming and styling limitations such as contrast and corner radius values should be taken into account to maintain usability and brand consistency.

Final

Design considerations included how barcodes would appear on different backgrounds, how various barcode types render, and the minimum and maximum quiet zone requirements for each type. I also researched industry best practices for barcode sizing and evaluated whether displaying the barcode number was necessary in all use cases.