design system for research and development platform

design system for research and development platform

overview

overview

Uncountable, a cloud software company focused on research and development optimization, needed a design system overhaul to improve usability and update the platform for scientists and researchers.

Timeline

Timeline

Timeline

Apr 2024 - May 2024

My role

My role

My role

Product Designer

Scope

Scope

Scope

Design system, component library, design guidelines and documentation, product design

Team

Team

Team

1 Product Designers, 1 Product Manager, 2 Back-end Developers

challenge

challenge

The new design system had to simplify the interface, address complexity issues, and ensure functionality across data-rich tables and forms. It also needed to work well on low-contrast monitors and maintain consistency across various components.

solution

solution

For Uncountable, I incorporated simple typography and accent brand colors to align with guidelines.

  1. Navigation: Unified navigation with persistent headers for better usability.

  2. Advanced Filtering: I focused on intuitive and easy-to-use advanced filtering, enabling users to quickly locate and refine data.

  3. Scanability. Uncountable's platform includes many massive tables with complex states such as links, buttons, pages, and pills. I used flexible views to improve readability and make it easy to scan information. Accent colors were used for informative tags and dividers to highlight important areas.

  1. Navigation: Unified navigation with persistent headers for better usability.

  2. Advanced Filtering: I focused on intuitive and easy-to-use advanced filtering, enabling users to quickly locate and refine data.

  3. Scanability. Uncountable's platform includes many massive tables with complex states such as links, buttons, pages, and pills. I used flexible views to improve readability and make it easy to scan information. Accent colors were used for informative tags and dividers to highlight important areas.

  1. Navigation: Unified navigation with persistent headers for better usability.

  2. Advanced Filtering: I focused on intuitive and easy-to-use advanced filtering, enabling users to quickly locate and refine data.

  3. Scanability. Uncountable's platform includes many massive tables with complex states such as links, buttons, pages, and pills. I used flexible views to improve readability and make it easy to scan information. Accent colors were used for informative tags and dividers to highlight important areas.

foundations

foundations

I documented all foundational styles and their design token names and values for both global values and semantic values. Foundation styles include color primitives, color semantic usage, type, sizing, grids, border radius, border width, spacing, elevation.

component library

component library

For Uncountable it was essential that the components were both easy to use and flexible enough to accommodate future use cases. I chose Atomic design approach for organising the design system, creating a hierarchy of elements from atoms to molecules to organisms.

Additionally, I considered the user experience within Figma's design panel, ensuring that our components were intuitive and seamless to work with.

tables

tables

I standartized the design of all tables with consistent typography, cell padding, and border styles. I also created a unified navigation system with consistent sorting, filtering, and pagination controls to enhance usability.

responsiveness

responsiveness

Prioritizing the responsiveness of forms was a critical component for data input. On desktops, I used clear labels and generous spacing for complex data entry. On mobile, I switched multi-column layouts to single columns, tab navigations to dropdown menus, and optimized input fields for touch.

documentation

documentation

Detailed documentation and guidelines promote teamwork by providing a clear understanding of how to use components:

impact

impact

Users reported a more intuitive and consistent interface, which reduced the learning curve and increased productivity. The unified design of tables and forms ensured that data presentation and input were seamless across all devices, enhancing the overall user experience.

reflections

reflections

The devil is in the details

The devil is in the details

The devil is in the details

Frustrating controls and misplaced dialogs can lead the constant low level annoyance. Even if the overall product concept is excellent. Focus on intuitive design and ensure that the detail interaction of your product support your user in his goals tasks and aspirations.

Next project
Next project