Odessa
Design system, at scale leveraging user interface components and UX patterns to maintain a unified language in cross-functional teams
A well-crafted design system serves as a foundational pillar, ensuring scalability, brand fluidity, and adaptability across diverse applications. These elements are indispensable, empowering companies to navigate digital complexities, enhance user satisfaction, and maintain brand consistency.
Additionally, by providing a unified framework, cross-functional teams can collaborate more efficiently, accelerating their work processes and fostering faster innovation.
INDUSTRY
B2B | SAAS
DESIGN FRAMEWORK
ATOMIC DESIGN
YEAR
2022
UX DESIGN
ROLE
Grid System
The grid system uses a series of containers, rows, columns to arrange and align content. Building a responsive grid allows a layout to change dynamically based on the size of the screen and guarantees consistent layouts across all interfaces.
The gutters, the spaces in between the columns, are also consistently sized and help the user visually separate the different products. The margins are independently sized and are the same between the left and right sides.
Moreover, the adoption of the 8-point grid system serves as a universal foundation for interfaces. This systematic approach to spacing and layout not only provides precision but also establishes a cohesive design language, streamlining the development and maintenance of interfaces across different platforms.
Column Grid
Responsive Column Grid
Color System
A color design system ensures a controlled (and consolidated) palette of acceptable and proper use of color as well as maintaining consistency throughout the user interface and its components.
To help developers create seamless visuals in code (dev handover), best practice is to adopt naming conventions (for colors and components) by referencing an existing CSS Framework.
Typography
Typography creates purposeful texture, guiding users to read and understand the hierarchy of information. The right typographic treatment and the controlled usage of type styles helps to display the content in a useful, simple, and effective manner.
Button System
Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways.
Button labels should express what action will occur during any kind of interaction.
System Icons
Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
Each icon is reduced to its minimal form, expressing essential characteristics.
Menu Icons
Menu icons help declutter overflow menus when desktop interfaces are converted into responsive designs such as tablet and mobile interfaces.
Each menu icon style can be applied depending on the branding voice.
Avatars
An avatar is a visual representation of a user or entity. Avatar sizes scale exponentially based on the use case.
Avatars can have a defined image, which is usually uploaded by a user or remain in their default state: icon, image, (company) logo and initials.
Navigation
Navigation guides users through different parts of a product or user interface.
When users move from one view to the next, they observe scenes containing imagery, actions, and content. These scenes work together to tell a story about the content they contain, leading users down paths that emphasize certain actions, consisting of breadcrumbs, tabs, tooltips, tags and search bar.
Input
Input is the raw data that is processed to produce output.
It is important to design appropriate and intuitive inputs to prevent errors and guide users to succeed while entering their data.
Checkbox
Radio
Toggle
Upload
Dropdown
Forms
Feedback
Feedback is the communication that happens between the product and the user - the type of output a system generates based on how users interact with it, setting the right expectations from the product.
When a user clicks on a button and nothing happens, it causes friction. But when an error message shows, this is how the system offers feedback.
Pop Up
Alerts
Data Display
Used for flexible data display and sorting of information (Table), as well displaying content and actions about single or multiple subjects (Card and Accordion).
Table
Accordian
Cards
Data Visualisation
Data visualisation is the graphical representation of complex and dense information. The resulting visuals are designed to compare and absorb data in a storytelling form.
