Wave's design system, Buoyant, is implemented in code. It serves as the source of truth for the system's visual display and interactions. The design process begins with discovery and progresses to UI design tools like Figma. From Figma, designs are translated into usable software. As part of my responsibilities, I maintained Buoyant in Figma and was one of the top contributors to the code repository. My goal was to bridge the gap between what designers create and what users experience, making them as indistinguishable as possible. This principle guides my approach to maintaining design components in Figma.
As part of a design team initiative to provide more comprehensive guidelines, the core design systems designers collaborated and divided up the work into sections or components. We assigned ourselves roles and responsibilities based on interest and areas that may affect our core team or project. As part of my contribution, I was responsible for tables. I focused on their function and scalability. To ensure alignment and foster a culture of shared progress, we conducted rigorous reviews and actively communicated our advancements with the wider design team, and company.
Tables are a traditional and functional way of presenting substantial amounts of information to users. The origin of presenting data in tables can be traced back to ancient civilizations, where space was as abundant as time. Tables have since transitioned to desktop computers. However, with the introduction of modern smartphones, we need to rethink and optimize tables for this new medium where space (and attention) is at a premium.
On smaller screen sizes, the focus shifted from traditional rows and columns to prioritizing the grouping and hierarchy of related items. The principles of legibility and scannability guided this shift, which were derived from the inherent nature of tables, and kept things familiar. Applying these principles, unnecessary or redundant headers could be removed to focus the table and optimize legibility. Keeping important information in close proximity reduces eye strain. Close proximity or grouping played a foundational role. Proximity and similarity helps users better read and understand information.
