SISTIC Design System
Design ecosystems to maintain design brand identity and consistency across SISTIC’s digital platforms
Overview
I am the Design Lead for the SISTIC Design System. I lead a team of 2 designers, building a set of design system from scratch.
My Role
Design Lead | UI Designer
Tools
Figma
Identifying the Problems
Shortly after joining the team, it didn’t take long for me to notice a significant gap in the design process. There was no established design system in place. This absence not only hindered consistency across various products but also slowed down the design workflow, leading to confusion and inefficiencies.
Design Opportunity
Recognizing this challenge presented both an opportunity and a responsibility. I began by conducting a thorough audit of existing designs, gathering feedback from team members, and identifying pain points that arose from the lack of a cohesive design framework.
It became clear that without a unified system, designers were reinventing the wheel with each project, which ultimately diluted the brand identity and user experience.
Approach
With insights gathered, I set out to establish our very first design system. My approach involved collaborating closely with cross-functional teams to define core components, establish guidelines for usage, and create a shared library of assets. This initiative aimed not only to enhance design consistency but also to streamline collaboration among designers, developers, and stakeholders.
1. Atomic Design Methodology
This methodology composed of 5 distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. Each of the five stages plays a key role in the hierarchy of our interface design systems.
By following this hierarchical structure, designers can create consistent and efficient UIs that are easy to maintain and scale over time.
Atoms: the most basic building blocks of a design system. They include individual elements like buttons, input fields, icons, and text styles. Atoms cannot be broken down further and serve as the foundation for more complex components.
Molecules: are formed by combining multiple atoms to create more complex components. For example, a search form can be a molecule made up of a label (atom), an input field (atom), and a submit button (atom). Molecules are still relatively simple but perform specific functions, making them essential for user interactions.
Organisms: are more complex components that consist of groups of molecules and/or atoms. They represent distinct sections of an interface, such as headers, footers, or navigation menus. An organism might include multiple molecules working together to form a cohesive unit that serves a specific purpose within the layout.
Templates: are page-level objects that combine various organisms into a layout without including actual content. They define the structure and arrangement of components on a page. For instance, a contact page template might include an organism for the header, another for the footer, and sections for text and forms.
Pages: are the final stage in the atomic design hierarchy and represent specific instances of templates filled with real content. This is where users interact with the design, seeing how all components come together in a functional interface.
Summary
Due to budget and manpower constraints faced by the company's front-end developers' team, our Design System implementation faced a roadblock to be built into a coded library and integrate it into our development workflow.
Even with just our Design System library on Figma, I could already see the positive effects on our workflow. Projects and designs were moving faster, and the quality and consistency of our designs improved significantly. I was thrilled to contribute to building a foundation that would support our team’s creativity and efficiency for years to come.
SISTIC Ticketing Checkout Page
StixLite Self-Service Ticketing Platform
Next Steps
Due to budget and manpower constraints faced by the company's front-end developers' team, our Design System implementation faced a roadblock to be built into a coded library and integrate it into our development workflow.
I continue to maintain and update the Design System library on Figma, always prepared and ready to work with front-end developers to set up the coded library as soon as the budget constraint has been lifted.