Background

BloodScan Biotech is an early-stage startup without established brand guidelines. As a result, the company website lacked a clear connection to the brand identity. They brought me in to design a new company website, but recognizing the need for clearer design standards, I began by building a company-wide design system which included defining foundations, components, and patterns to ensure consistency and support long-term growth. This design system will enable BloodScan to continue scaling this experience with new features and services in the future.

The Challenge

Building a design system from scratch felt overwhelming at first. I didn't even know where to begin. However, I believe that establishing a strong foundation early on makes future work more efficient. After reviewing multiple case studies and resources, I decided to start building the design system using established systems as references. I used the Base Design System from Uber and Ant Design as references because of their simplicity and scalability. I also incorporated principles from Atomic Design to structure and organize the components.

An Unexpected Challenge

Creating components while designing the website initially seemed like a practical approach. In reality, I frequently iterated on the design, which made component management messy and inconsistent. After several rounds of deleting and rebuilding components, I realized a more effective approach was to first finalize the page designs, then create components based on recurring patterns and reuse.

What Makes This a Scalable Design System?

As the first designer on the team, I knew the company would eventually bring on more in-house designers. A key question I considered was how to make the system easy for others to use and scale over time.

I focused on keeping the system as simple as possible—avoiding unnecessary variations in typography and components, and using variants and Atomic Design Principle to maintain flexibility and hierarchy. The design system is an ongoing effort, and this project focused on establishing the system's initial framework.

Implementation

I built this website in Framer for its ease of maintenance and built-in CMS. With the design system in place, it was clear which elements and components needed to be created, and it helped keep the design and final implementation aligned.

What I'd Do Next

As the design system continues to evolve, I'm excited to deepen my experience with design tokens and better understand how they function in real implementation. As the company scales, I'm interested in seeing how the system grows alongside the product and how it shapes the overall design process.

I'm also curious to explore how recent updates to Claude, which enable direct editing in Figma, can support more efficient design system maintenance in the future.