top of page

Building Alignment Through Design: A Scalable System for Better Product and Team Efficiency

  • Writer: Allen Chen
    Allen Chen
  • Jul 17
  • 4 min read

Updated: Sep 5

Written by: Allen Chen | Contributing Writer: Tsai-Ling Lei | Special Thanks to: Joanne, Via, Juni, Chrissy


ree

Overview


A design system is essential for delivering a consistent user experience and serves as a critical foundation for designers and developers to build efficient, scalable digital products. But it also plays a vital role in supporting our end users, pathology professionals, by ensuring the interface they rely on is clear, intuitive, and dependable.


During my internship as a Product Design Intern, I focused on refining and expanding our design system to enhance consistency and reusability across the platform. This work included developing a custom icon set optimized for medical clarity and building a reusable component library tailored to the complex, data-intensive workflows of our lab environment.


As a result, we saw a 92% satisfaction rate from the design team, a 40% increase in design system adoption, and a marked improvement in visual consistency across our products. By standardizing interaction patterns and clarifying component usage, we reduced handoff friction, minimized development errors, and strengthened collaboration between design, engineering, and product teams—laying a solid, scalable foundation for future growth and user trust.


The challenge we faced: Inconsistent icons and components led to a fragmented interface and team inefficiencies


As aetherSlide evolved, its interface became visually inconsistent and increasingly difficult to scale. Mismatched icons and duplicated components contributed to a fragmented experience—making it harder for users to navigate pathology workflows and more time-consuming for designers and developers to maintain the product.


ree

Solution 1: Standardized Icons for Faster Recognition and More Intuitive Medical Interfaces


To improve clarity and consistency across the platform, we introduced a unified icon system. Built on the Material Design grid and drawn with a consistent stroke, the new icon set followed defined rules for scale, spacing, and structure.


Unlike general-purpose icon libraries, our product required a custom-designed set to address highly specialized medical concepts—such as slides, microscopes, magnification levels, scanning statuses — that aren’t available in standard libraries.


This system brought cohesion to the product’s visual language—reinforcing brand identity, enhancing usability, and supporting the complex workflows of a pathology platform. It also improved efficiency for designers by enabling them to create icons more quickly and accurately using clear, reusable design rules.


ree

This custom icon system not only laid the foundation for visual consistency but also supported faster, clearer interaction in highly specialized pathology workflows.

“The new icon system made the overall UI look more consistent and professional. It also felt more intuitive to use, reducing the cognitive load for users during interactions.” - Product Designer B

Solution 2: Reusable Components and Refined Documentation for Smoother Handoffs and Scalable Development


To establish a scalable and maintainable UI foundation, I with my peers designed and implemented a reusable component library that included both general-purpose elements and components tailored to the specific needs of pathology workflows. The system featured core UI elements such as inputs, dropdowns, buttons, and progress indicators—each crafted with well-defined interaction states, consistent spacing, and structural clarity to ensure both usability and reusability.


This system not only improved UI consistency but also:

  • Streamlined handoffs between design and engineering

  • Reduced redundant component creation


ree

“The system enabled us to match designs faster and reduced back-and-forth communication during development.” - Front-end Developer B

The icon and component systems became the foundation for scalable, consistent, and efficient product development


Together, the redesigned icon system and reusable component library laid the groundwork for a robust design foundation. These systems significantly improved visual consistency, usability, and alignment across teams—enabling faster workflows, clearer communication, and more reliable user experiences.


By reducing ambiguity during design-to-development handoff and promoting shared standards across the product, we achieved:


  • 40% increase in design system adoption

  • 92% designer satisfaction

  • Accelerated development with fewer revisions and clearer handoffs


ree

“The component library is clearly structured and easy to use, allowing us to quickly build screens while maintaining consistent design standards across different scenarios.” - Product Designer E


Reflection and What’s next ?


Building a design system isn’t just about supporting designers — it’s about creating a better experience for everyone who interacts with the product. That includes designers who need consistent, reusable components; developers who rely on clear documentation to build efficiently; and pathology professionals, our end users, who depend on intuitive, reliable interfaces to carry out critical work.


Working within an existing UI framework, I focused on evolving the system rather than replacing it—balancing visual consistency with real-world flexibility. This required systems thinking, empathy for team workflows, and a deep understanding of existing design patterns. Now as a full-time Product Designer, I’ve become an active user of the system I helped build—continuously validating components and improving documentation based on real usage.


Looking ahead, I’m excited to keep improving the system by staying closely connected to all three user groups. In particular, I hope to deepen my understanding of how pathology professionals experience our UI in practice, so we can continue refining the design system in ways that are not only consistent and efficient — but truly meaningful and useful for everyone it serves.




Are you looking for a team that collaborates seamlessly and a stage to showcase your talents? Check if aetherAI has suitable job openings for you now!








Comments


bottom of page