Designing A Design System

In today's rapidly evolving digital landscape, where user interfaces serve as the gateway to countless online experiences, the significance of a robust UI Design System cannot be overstated. It stands as the cornerstone of consistency, functionality, and aesthetic harmony in any digital product. Think of it as the architectural blueprint that guides the construction of a user-friendly and visually appealing digital world. A well-crafted UI Design System not only streamlines the development process but also ensures a seamless and delightful user experience across various devices and platforms. It's the bridge between creativity and functionality, simplifying the complex and enhancing user engagement. In essence, a UI Design System isn't just a tool; it's the embodiment of a commitment to excellence in design and user satisfaction.

Design Process

  • When I assumed the role of Product Designer within this organization, it became evident that there was an immediate requirement for a comprehensive overhaul of the Dashboard product. This platform serves as the custodian of sensitive client data, necessitating a critical enhancement to ensure data security and functionality.

  • Establish a standardized repository encompassing design elements, components, and user flows, intended for utilization by both Product Designers and Engineering/Back-end Developers. This repository shall be recognized as a comprehensive design system, fostering efficiency and consistency throughout the design and development processes.

  • Create wireframe to properly show content layout and element placement and once approved, create high-fidelity designs.

  • Figma

    Monday.com

    Slack

The Product

  • Accordion

  • Banners

  • Charts

  • Branding

  • Buttons

  • Cards

  • Color

  • Dividers

  • Elevations

  • Filtering

  • Gallery

  • Global Navigation

  • Icons

The idea was that this design system would evolve overtime as we used it and it be a resource for all designers coming into the team. Anything request for new builds would be easily created and replicated through using the component we created in this library.

List of design components that were built in the design system:

  • Illustrations

  • Lists

  • Menu

  • Modal

  • Pills

  • Popover

  • Selectors

  • Sheeters

  • Snackbar

  • Textfields

  • Toolbar

  • Typography

Buttons
Color Palette
Gallery
Lists
Complete Design System
Previous

Upwardly Global
Next

FDA Biosimilar Campaign