Context
My first project at Polyform Studio is handle new client, Interactio.
Interactio is a leading platform that provides real-time audio solutions for remote and hybrid events, targeting global enterprises and institutions. For this project, they required a sophisticated system to manage user access and authentication processes. The system needed to support various roles, including event participants, organizers, interpreters, and administrators, ensuring secure and efficient user management across all levels.
One of the key tasks was setting up and managing a new Design System.
We divided into 2 roles, my designer peer (Alex) did the wireframing the whole product and I started design system component and documentation. By separating 2 designer, the workflow become more efficient and consistent.
The rapid expansion of the Design System was essential as I continually uncovered new use cases and consistently re-evaluated and enhanced the library. To tackle this challenge, I adopted a strategic approach.
It is beyond just a component set
In this project, the design system goes far beyond just being a set of components. It’s like having a well-organized toolkit that everyone on the team can use. This system makes sure everything looks and feels consistent, making the user experience smooth and enjoyable. By having this in place, designers and developers can work together effortlessly, making updates and creating new features easier.
Initiate the foundations
Before we start crafting components, we need to decide very basic foundation that really affect the rest of designs, which is the Style, including color, typography and grids.
Atomic Interface Design
Atomic Design is a methodology created by Brad Frost for crafting and maintaining design systems. It breaks down a user interface into its fundamental building blocks, which are organized into a hierarchy that promotes consistency and reusability (atomicdesign.bradfrost.com)
From a single button to complex language configuration, I maintain all component strict to atomic design guide. So even years later, if there's update for features, the next designer can use ready-to-use component easily.
Accessibility Considerations
We prioritize accessibility to ensure everyone can use our platform comfortably.
Here’s how we do it:
High Contrast Ratios: We use color combinations that make text and important elements easy to read for everyone, including those with visual impairments.
Clear and Ample Spacing: Our design includes plenty of white space to prevent visual clutter and help users focus on the content that matters.
Intuitive Navigation: We design our interface to be simple and easy to navigate, so users can find what they need quickly and without frustration.
Consistent Layouts: Keeping a consistent design throughout helps users know what to expect, making the experience more predictable and user-friendly.
The Results
The progress went little bit longer than expected, it's been 1+ year since the kick off. But it finally handed off to Interactio in-house designer.
Here is the outcomes I deliver:
It provided a clear structure and principles, make better collaboration and streamlined the design process, enhancing teamwork between designers and developers.
It accelerated production timeline by giving both designers and developers a single source of truth and a set of reusable components and patterns.
As project delivered, the CDO of Interactio send his thanks to the team..
"Polyform was a fantastic choice on many fronts: speed, efficiency, UX chops, and experience."
Michael "Howie" Howatson - CDO @ Interactio
© 2024 Asyrof
Built in Framer