Geyser Data Design System
Summary
As the sole UX designer at Geyser Data, I spearheaded the creation of a robust design system in Figma to bring new life and consistency to our product. This design system proved crucial during a pivotal product shift, accelerating design iterations and streamlining developer handoff for our archival data storage solution.
Product: Geyser Data
Project: Innovation Project
Years: July 2024 - Present
Duration: 12 months
Role: Lead User Experience Designer
Goal
To establish a consistent and efficient design language for Geyser Data's data storage platform, enabling faster design iterations and a unified user experience during a critical product pivot.
The Problem/Challenge
Geyser Data, an archival data storage solution startup, was looking to add new customers that stored data differently to our existing customers. Our initial product vision focused on customers storing large amounts of archival data in individual buckets (where each bucket has a unique set of attributes (e.g. single or dual copies, encrypted or not, and compressed or not). This simplicity allowed us to get off the ground quickly. However, through discovery research, we quickly realized that we were not catering for customers that needed the flexibility to store smaller amounts of data across multiple buckets of the same attributes, so they can set access permission for their users from bucket to bucket. By creating a solution that allowed multiple buckets of the same attributes to be part of a single collection, we were able to offer old and new customers the ability to take advantage of cost savings as well as giving them the option to set user permissions for each bucket. This pivotal shift meant fundamentally redesigning core aspects of the application's information architecture and user flow.
Original design of Geyser Data Home Screen.
However, without a standardized design language, we were grappling with:
Inconsistent UI elements: Different designers (and even different features by the same designer) used slightly varied buttons, input fields, or spacing, leading to a fragmented user experience.
Slow design cycles: Every new feature or design change required "reinventing the wheel" for common UI patterns, significantly extending design and development time.
Handoff headaches: Developers spent valuable time clarifying layout, spacing, and component behavior due to a lack of clear guidelines, leading to frustration and rework.
This inconsistency threatened our ability to rapidly adapt to crucial market needs and deliver a cohesive experience for our customers, especially with such a significant product pivot on the horizon.
New design of Home Screen using the new Geyser Data component library.
2. My Role and Process
As the sole UX Designer at Geyser Data, I spearheaded the initiative to establish a robust design system and component library in Figma. My goal was to create a scalable foundation that would not only bring consistency to our existing product but also empower us to swiftly respond to critical design pivots like the shift to having a collection of multiple small-sized buckets.
My process involved:
Comprehensive UI Audit: I began by conducting a thorough audit of our existing application, cataloging every unique UI element, identifying inconsistencies, and pinpointing areas of design debt. This helped quantify the scope of the problem.
Defining Core Foundations: Based on the audit and stakeholder input, I established foundational design elements aligned with our brand identity and evolving needs. This included a cohesive color palette, a scalable typography system, and consistent spacing rules.
Component Prioritization & Creation: I prioritized the most frequently used and critical components (e.g. buttons, input fields, tables, and cards) for initial build-out. Each component was meticulously crafted in Figma utilizing Auto Layout, Variants, and component properties to ensure maximum flexibility and reusability. I adopted an Atomic Design methodology to structure the library, building from smallest elements to complex patterns.
Establishing Naming Conventions & Guidelines: To ensure team-wide understanding and adoption, I implemented clear, logical naming conventions for all components and styles. I also began drafting initial usage guidelines within Figma, detailing proper application and common pitfalls.
Collaborative Iteration: I regularly synced with the development team to understand technical constraints and ensure components were built with efficient handoff in mind. Feedback from product and engineering stakeholders was crucial in refining component behavior and documentation.
Color Palette of the new Geyser Data Design System.
Typography of the new Geyser Data Design System.
3. The Solution - The Geyser Data Design Component Library
I built the Geyser Data Design Component Library from the ground up in Figma, evolving it into a comprehensive system that now features over 25 robust components and continues to expand. This library acts as the single source of truth for all UI elements, ensuring consistency and efficiency across the application.
Key Foundations:
Color Palette: A systematically organized color palette, including semantic naming for primary, secondary, status (success, warning, error), and grayscale tones, ensuring consistent application of brand and functional colors.
Typography System: A well-defined typographic scale with clear styles for headings, body text, and UI labels, ensuring readability and visual hierarchy across all screens.
Iconography: A unified icon set, built with consistent sizing and stroke weight, to provide clear visual cues throughout the interface.
Spacing & Layout Grids: Established a consistent 8pt-based spacing system and layout grids to ensure harmonious alignment and proportion across all components and layouts.
Core Components:
The library includes essential UI building blocks, meticulously crafted for flexibility and reusability. Examples include:
Buttons: With multiple states (default, hover, active, disabled) and variants for primary, secondary, and destructive actions.
Input Fields: Covering various types (text, number, password, search) with clear validation states.
Data Tables: Scalable and customizable tables to display complex archival data, supporting sorting, filtering, and pagination.
Modals & Dialogs: Consistent patterns for user notifications, confirmations, and complex data entry.
Navigation Elements: Standardized headers, sidebars, and tab components for intuitive app navigation.
Each component is built with Auto Layout and Variants to allow for quick adaptation and maintain consistency, regardless of content or context.
Figma variables were built to represent core design elements, then associating them with specific properties like text color, surface color, spacing, and typography.
“Page Title” and “Table” components built in Figma using variables and the Atomic Design method, which incorporates smaller components into larger components.
4. The Impact and Results
The establishment of the Geyser Data Design Component Library proved instrumental, especially during our critical pivot that won over new customers due to the enhanced functionality that allowed multiple small-sized buckets to be part of a single collection, saving them money, while allowing them to set user permissions per bucket.
We were also able to realize the following improvements as a result of the newly created component library:
Accelerated Design Iteration: When the product strategy shifted, the component library allowed us to mock up the new ‘multi-bucket collection’ design in half the time compared to building from scratch. This rapid prototyping enabled us to quickly test and iterate on complex new user flows for managing various storage characteristics.
Streamlined Developer Handoff: The most significant impact was the drastically reduced back-and-forth with the development team. With clearly defined components, consistent spacing, and predictable layouts, developers no longer needed to guess dimensions or interactions. This fostered a much more efficient and collaborative design-to-development workflow, minimizing UI bugs and accelerating engineering cycles.
Enhanced Product Consistency & Quality: The library ensured a unified and polished user experience across the entire Geyser Data platform, regardless of feature or development stage. This consistency boosted user confidence and reinforced our brand identity during a period of significant product evolution.
Scalability & Future-Proofing: By building a robust and well-documented system, we laid the groundwork for future growth. New designers and developers can quickly onboard and contribute, ensuring continued design consistency as the company scales.
Original design showing the form to create a new bucket.
New design, utilizing the new component library, showing the form to create a new bucket as part of a collection.
New design, utilizing the component library, showing all of the collections.