Ictinus Design System
A sophisticated, token-based design system for products and software used in the music industry, created from scratch.
Orfium - Years: 2018 - Now
This project started back in 2018 as a components library to support multiple prototypes and PoCs. Eventually, I set up and led a dedicated Design System team and worked hands-on with them to continuously evolve this library into the Design System it is today.
Origin & Evolution
Ictinus is a comprehensive and robust design-token-based design system meticulously crafted from the ground up by me and the design team of Orfium. Tailored specifically for the music industry, Ictinus serves as the backbone for the design and development of various products and tools, ensuring consistency, efficiency, and a high-quality user experience across all platforms.
Startup Agility
Orfium needed fast prototyping and quick pivots based on feedback.
Creation of Ictinus
Evolved from basic components into a complete, sophisticated Design System
Need for Reusability
Designed for consistency and speed, reusing elements across projects.
Maintaining Agility
Balances startup agility with the consistency required by a maturing brand
Growth & Complexity
As Orfium products expanded, a unified experience became more than essential
Current Role
Ictinus is the foundation for scalable, user-focused, and cohesive product design.
Streamlining Ictinus adoption & usage
By streamlining the way that Ictinus should be used across all products and domains, we leave no room for delays or confusion about 'what to do next' and 'who's responsible for what.' I developed clear guidelines and a framework that not only define how the design system integrates into the product development lifecycle but also ensure that every team knows exactly how to leverage it for efficiency. With a dedicated team in place to handle conflicts or questions that arise, we have finally resolved this long-standing issue, resulting in a smoother, more consistent workflow across the organization
Proof of concept
The Proof of Concept phase is driven by engineers, where they focus on testing the technical feasibility of the idea. This step serves to validate whether the proposed solution can be practically implemented, ensuring it aligns with the available technology stack and meets initial business requirements. It’s a critical stage to minimize risk before significant resources are committed to development.
Higher Fidelity Wireframes
The Wireframes phase involves UX designers and Product Managers producing low-fidelity layouts of the product. These wireframes focus on the basic structure, layout, and hierarchy of content, without detailed design elements. At this stage, the Ictinus Design System team starts collaborating to ensure the wireframes align with design system guidelines, setting the foundation for consistency across products.
Hi-Fi Mockups (Final Iteration)
Hi-Fi Mockups, created by Product Designers, represent the final, high-fidelity iteration of the design. These mockups contain all visual elements in full detail, including colors, fonts, icons, and interactive components, with strict adherence to the Ictinus Design System. These polished designs serve as the final blueprint for the eng team, ensuring that the product adheres to the design system and meets quality standards.
Minimum Viable Product (MVP)
In the MVP stage, the Product Design and Front-End Engineering teams collaborate to implement the first functional version of the product. The MVP focuses on delivering core features that meet the primary user needs, while the Ictinus Design System ensures visual consistency and adherence to established design patterns. This step brings the product to life in a real-world environment, allowing for user feedback and further iterations.
Highlevel User Flows
At the User Flows stage, UX designers & PMs work together to define and map out the user journey. This involves creating flowcharts that depict how users will navigate through the product, identifying key interactions, and ensuring that the product design meets both user needs and business objectives. By clearly defining the user journey, this step helps establish a clear direction before moving into detailed design work.
Early Mockups (First Iteration)
During the Early Mockups phase, UX and Product Designers collaborate to develop more detailed visual representations of the product. These initial designs use components from the Ictinus Design System, introducing color, typography, and other design elements. This is the first visual iteration that moves beyond structural wireframes, providing a clearer picture of the user interface while still allowing for further refinement.
Interactive Prototype
The Interactive Prototype phase involves collaboration between UX, Product Design, and Front-End Engineering teams to create a clickable or interactive model of the product. This prototype allows for usability testing and stakeholder review, helping teams validate whether the design is functional and intuitive. It also serves as a bridge between design and development, ensuring that interactions work as intended
Key Phases
The development process is structured around clear phases that include Product Requirements, Technical Requirements, Back-End Implementation, and Front-End Implementation. Product and technical requirements are gathered early on to define both business and technical expectations. Back-end work happens concurrently with design stages, while front-end development closely follows after high-fidelity mockups and prototyping, ensuring a seamless transition from design to implementation.
Managing & Prioritizing Requests
Incoming Requests
In addition to defining how Ictinus should be used across teams and products, we also established clear guidelines for how and when requests for additions or edits to the design system should be submitted to the Design System (DS) team. This process ensures that any new components or updates are aligned with the system’s overall structure and standards.
By formalizing this request process, we’ve not only unblocked teams from waiting on dependencies but also significantly sped up decision-making when it comes to enhancements or modifications. This proactive approach reduces bottlenecks and ensures that design improvements are seamlessly integrated into the workflow, enabling faster iterations and better collaboration between teams. Ultimately, it empowers teams to work more autonomously while maintaining alignment with the DS team's vision and goals.
Relentless Prioritization
By establishing a clear foundation for relentless prioritization, we’ve effectively minimized conflicts and friction across teams. This structured approach has been communicated to every product team, ensuring full transparency in how decisions are made regarding the inclusion of new components or updates to the design system. By sharing this process openly, we’ve ensured that everyone understands how we determine which elements become part of the design system now, which will be considered in the future, and which may never be included.
This clarity not only streamlines decision-making but also fosters a sense of shared ownership and accountability across teams. Everyone is aware of the criteria and rationale behind each decision, which helps to align priorities and reduce any unnecessary back-and-forth, allowing teams to focus on delivering consistent and high-quality designs.
Core Principles & Structure
Figma File Structure
Our Figma file structure is meticulously organized to ensure efficiency and clarity for all team members working within the design system. By maintaining a structured and intuitive layout, we’ve made it easier for designers to navigate, find relevant components, and stay updated on ongoing work. Below is an overview of how the file is structured to facilitate smooth collaboration and faster design iterations.
Grouped by Type: All components and patterns are categorized, enabling quick and intuitive navigation.
New Components: Recently implemented and QA-approved components are marked with ✨ NEW ✨ for clear identification.
Refactoring Section: Components or patterns under revision are grouped at the end, with pages marked by 🚧 to indicate active work.
Example Page & Playground: A dedicated page for testing new components and ensuring they meet functionality standards.
Foundation & Tokens
Ictinus file structure utilizes a comprehensive system of design tokens to ensure consistency and scalability across all design elements. These tokens are the building blocks for defining common properties like size, color, and spacing, allowing for easy updates and ensuring that the entire design system remains cohesive
Global Tokens
These foundational tokens cover essential properties such as sizing, colors, border radii, and spacing. They are applied universally across the design system, ensuring a consistent look and feel throughout all components and products.
Semantic Colors
A carefully organized set of color tokens mapped to UI-specific contexts like errors, warnings, and successes. Each color state (muted, base, contrast) is predefined for consistency across various scenarios and use cases.
Semantic Dimensions
Dimension tokens manage consistent sizing and spacing, categorized into scales (e.g., xs, sm, md, lg). These tokens ensure uniformity across layouts and components, making it easier to adjust spacing or size while keeping designs aligned.
Comp Specific Tokens
Each component, such as avatars, fields, buttons, and containers, has dedicated tokens for height, width, and spacing. These ensure that every component can scale or adjust while maintaining design system integrity.
Figma documentation
We have also ensured that all core principles, tokens, and components are thoroughly documented within dedicated Figma pages for easy access and reference. This organized documentation not only streamlines collaboration across teams but also supports the smooth migration of assets to Storybook, which serves as our source of truth for the design system. This alignment between Figma and Storybook ensures consistency and accuracy across both design and development environments.
Component Page Structure
Each component or pattern in Ictinus Figma File has a dedicated page, providing comprehensive resources to support design consistency and best practices.
Our documentation includes a comprehensive Token Board, displaying tokens specific to each component to ensure consistency in style and usage. Alongside this, we provide Usage Guidelines that offer clear instructions on how and when to use each component, as well as Best Practices & Examples to demonstrate effective application. Where relevant, we include Hierarchy Guidelines to outline visual and structural organization, and each component comes with Detailed Descriptions that explain its purpose and function. Finally, a Structure & Variant Analysis breaks down each component's structure and explores its possible variations.
Components
Ictinus features a comprehensive set of components, meticulously designed to ensure consistency, usability, and scalability across all Orfium products. These components, ranging from navigation and input elements to data display and feedback mechanisms, provide the building blocks for creating cohesive user experiences. Each component adheres to our design tokens and principles, ensuring that the visual and functional aspects of our interface remain unified. Whether it’s foundational elements like typography and color, or more specific patterns like buttons and modals, every component is built with flexibility in mind, allowing for customization while maintaining adherence to system-wide standards. This organized collection not only simplifies the design process but also enables efficient collaboration between design and development teams.
Navigation
This group focuses on the components that help users move through the interface effectively. It includes top and side navigation patterns for primary and secondary menus, as well as text links and list items for standard navigation needs. Additional components like floating menus and breadcrumbs help users find their way or access secondary actions. The Tabs and Stepper components, provide structured ways to navigate between views or stages in multi-step processes.
Data Display
This group comprises components designed to display data clearly and efficiently. Tables allow for structured, grid-based data presentations, while avatars visually represent users or items within the interface. Additionally, data visualizations play a crucial role in this group, enabling complex data to be represented through charts, graphs, and other visual formats. These visualizations help transform raw data into easily digestible insights, empowering users to analyze and interact with information in a more intuitive way.
Inputs
The Inputs group is dedicated to interactive elements that allow users to input or select data. This includes buttons for actions, various form controls like checkboxes and radio buttons, and form fields for collecting user information. Date pickers offer an intuitive way to select dates, while sliders allow users to adjust values along a continuous range.