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

design system, ux, ui, atomic design, product design, grid, grid ystem, type style, ux design, product design, Munich, Berlin

Responsive Column Grid

design system, ux, ui, atomic design, product design, grid, grid system, type style, ux design, product design, Munich, Berlin

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.

Color palette chart with categories like "Neutrals & Shades," "Primary," "Warning," "Error," and "Success." Each category includes multiple color swatches with names, codes, and base colors highlighted.

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.

Typography guide for the font Avenir Next showing font weights, predefined sizes for headings, subheadings, body text, and button text. Includes examples of use with text samples in different styles and sizes, and a call-to-action button with 'Order now.'

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.

Image showing different styles of button designs, including primary, secondary, and scaling buttons with variations in label, icon placement, and states like default, hover, pressed, and disabled.

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.

design system, ux, ui, product design, button system, primary button, secondary button, business design, atomic design, ux design, icons, outlined icons, menu icons, hamburger icon, hamburger icons, icon system, product design, Munich, Berlin

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.

Set of eight minimalist line icons on white diamond shapes, labeled from top left to bottom right: Hamburger, Honey, Odessa, Oreos, Fries, Domino, Hotdog, Veggie Burger. Each icon features lines or dots resembling different menu or list indicators.

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.

Grid showing different sizes of icons, initials, images, and logos in large, medium, small, and extra small variations.

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.

Three breadcrumb navigation examples with varying link counts and styles, including bold and gray text.
Interface with tabs labeled 'Tab 1', 'Tab 2', 'Tab 3', and 'Tab 4'. Tab 2 is highlighted as active.
Set of blue tooltip buttons labeled "Tooltip," "Tip up," "Tip right," "Tip down," and "Tip left."
Three blue buttons labeled: 'Tag name', '+ Tag name', and 'Tag name ×' on a white background.
Various search bar designs with buttons labeled 'Search,' 'GO,' and filter options like 'All,' 'Recent,' and 'Popular.'

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.

Timeline progress indicators showing three steps: Personal Info, Select Plan, Payment Info. Each row shows different stages of completion with checkmarks and numbers.

Checkbox

Radio

Checkbox states showing unchecked, hover, checked, and disabled.
Radio button examples showing four states: unchecked, hover, checked, and disabled.

Toggle

Toggle switches in different states: off, hover, on, and disabled, with corresponding labels.
Three file upload boxes with dotted borders and plus signs, labeled 'Upload,' 'Drag & Drop,' and 'Click or upload a file.'

Upload

Comparison of three dropdown menu states: inactive, active, and filled. Inactive shows a closed dropdown, active displays options including a nested option, and filled indicates a selection has been made.

Dropdown

A chart displaying different text input field states, including inactive, active, filled, error, required, and disabled, with variations in style and labels for each state.

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.

Two dialog boxes asking "Do you want to delete these items?" with "Cancel" and "Confirm" buttons. Left box is white; right box is blue.

Pop Up

Alerts

UI component examples showing info, warning, success, and error messages in light and dark backgrounds with corresponding icons and buttons.

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).

Two tables displaying a list of job positions with columns for Name, Position, Status, and Date. Rows include names Eva Hermann, Thomas Sowell, and Sophia Thomas, each listed with their respective positions in Marketing, IT, and Public Relations, all with status Open and different dates in 2022.

Table

Screenshot of a FAQ section with three questions: What is a company design system?, Why are design systems important?, and How do I share my design system with developers?. The second question is expanded with a paragraph explaining the benefits of design systems for replicating designs efficiently by using premade UI components.

Accordian

Three design thinking cards featuring blue graphics and text about improving organizational decision-making in product and service creation.

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.

Data dashboard showing various charts and graphs related to business analytics, including overall revenue trends, sales and views, lead generation, onboarding success rate, traffic visit behavior, and traffic sources distribution in donut and bar chart formats.

Design starts with a conversation


Email me at design@ivakrakan.com

or pick a time that works for you below