Lato
Regular
Bold
“My dear, here we must run as fast as we can, just to stay in place. And if you wish to go anywhere you must run twice as fast as that.”
― Lewis Carroll, Alice in Wonderland
Tools
Sketch, Invision
Assets
UI-kit in Sketch
Team
1 Designer, 3 Developers, CEO
What I Did
Created the initial UI-kit in Sketch to ensure visual consistency across design mocks.
Utilized Invision for design inspections and developer handoff, providing real-time support and fostering collaboration with developers.
Key Learnings
Early UI-kit Creation: Creating an initial UI-kit early is essential for visual consistency. I noticed inconsistencies in the system, which led me to create the UI-kit. Looking back, starting with a basic UI-kit from the beginning would have been beneficial.
Focus on Essentials: At this stage, the most useful part of design-system was essentials (atoms in Atomic Design terms - buttons, inputs, typograpy) because more complex components then changed as the product evolves but these essentials parts remains the same.
Relationships: The most crucial aspect at this level is the relationship with developers. Being open to any questions and fostering collaboration are core parts of evolving the design system in the future.
Tools
Figma, Slack
Assets
Figma library, Product Content Style Guide, New layout guidelines, Emails database, Slack channel
Team
2 Designers, 7 Developers, PM, QA, UX Copywriter
Challenges
Profi hired a second designer, creating the need to effectively share all design patterns, knowledge, and components within the design team.
As the product grew so did the complexity of its interface. This growth led to noticeable inconsistencies in spacing, element usage, patterns, and overall page layouts.
With more people on the team, we noticed different words were used for the same things. For example, some call a practitioner Profi, Practitioner, Coach, or Team Member. We also had mixed terms for sessions like Appointments, Sessions, Events, or Lessons. Additionally, there were issues with how dates, times, and timezones were formatted.
Profi aimed to implement theming to allow clients to customize the platform's look and feel to match their brands. This initiative required close collaboration between the frontend and design teams.
What I Did
Transition to Figma: With a new designer joining the team and the need to share patterns and components, I initiated the move to Figma and created a Figma library.
UX Style Guide: Collaborated with the UX copywriter to create a Product Content Style Guide, addressing inconsistencies in date and time formats, capitalization, and terminology across the platform. My role included owning this document, promoting it to all participants, and ensuring that all designs aligned with this guide at every stage of development.
Offline Collaboration: Conducted offline workshops (we are a remote-first company) to align with developers. We synchronized styles in code and Figma, shared our perspectives on the design system, worked together in real time, and had fun.
Aligned Styles: Ensured styles in code and Figma were aligned. Consistent naming and logic allowed designers and developers to communicate effectively, and the system was prepared for theming.
Asynchronous Communications: Set up a Slack channel to facilitate collaboration among designers and frontend developers, and to post Design System updates.
8px Spacing System: Introduced an 8px spacing system to resolve inconsistencies in spacing.
New Layout: Created a new, cohesive platform layout to ensure a consistent experience. Developed and agreed upon an implementation strategy for seamless integration.
Key Learnings
Figma is an Amazing Tool for Collaboration: Moving to Figma was a timely and excellent decision. Its capabilities significantly enhanced our collaborative efforts.
Effective Offline Collaboration: Working together in one room with engeneers was a significant breakthrough. It was crucial not only to see the list of components but also to understand how they were used and made in both design and code. I highly recommend offline collaboration approach for remote-first teams. During three days of working together, we were able to sync all styles in code and Figma and agree on the further roadmap.
Document Ownership: It’s very important to have an owner for every documentation doc who will update and sync all contributions to it and ensure team buy-in. Moreover, it's essential to promote these documents so everyone on the team is aware of their existence and uses them in their work.
Design changes should be included in roadmap. We initially planned to change layouts gradually as we worked on the frontend of each page. However, after some years, we still had inconsistencies. The best approach would have been to allocate dedicated time for this task.
Transparency is Key to Success: Transparency is crucial for the adoption of a design system in remote companies. Posting updates and involving all stakeholders is an essential part of the work on a design system.
Tools
Figma, Slack, Jira, Notion
Assets
Figma library, Storybook, Jira board, Product Content Style Guide, Slack channel
Team
3 Designers, 15 Developers, 3 PM, 4QA, UX Copywriter
Challenges
Adoption. Simply building a library isn't enough to solve inconsistencies. Integrating the design system into the development process and ensuring its adoption across the team posed several obstacles for us:
Time Constraints: Developers often lacked sufficient time to either build components from scratch in code or adapt existing components to meet their specific requirements.
Communication: Despite some teams developing components and integrating them into their work, other teams remained unaware of these existing components. This lack of awareness led to the unnecessary creation of redundant code.
Alignment: Components evolved continuously; outdated components remained in use while new components appeared in design mocks without corresponding code implementations.
What I Did
Component Library Implementation: The development team gained expertise and initiated the creation of a Component Library for our project. My role involved collaborating with all stakeholders to review all components. I created a doc to track the status of each component and outline the scope of the work. Additionally, I set up a dedicated Kanban board in Jira to monitor the progress of this initiative. This board became the central hub for all tasks related to the design system, allowing the team to clearly see upcoming tasks and completed work.
Allocating Time in the Product Roadmap: We ensured that all tasks related to the design system were planned in advance and aligned with feature development.
Component-first approach: in collaboration with the development team we established a new process that prioritized the creation of components before feature implementation.
More Complex Components, Fewer Variants in Spacing System: We built more comprehensive and usable components. A new team member with experience in enterprise development joined us, bringing valuable insights on organizing and building more complicated components. Also, we implemented a simplified spacing system to reduce the number of decisions designers needed to make, leading to more consistent designs.
Educational Workshops: I conducted a series of meetings with the team to share knowledge and demonstrate best practices, ensuring everyone was up to date with the design system.
Better Alignment: We established regular design syncs every week and bi-weekly meetings with developers to ensure better alignment and communication.
Key Learnings
Code as the Main Source of Truth: The main source of truth is not the design library in Figma, but the component library in code. When I shifted my focus from Figma to code, the quality and alignment of team work significantly improved. All designers and developers became one cohesive team. It’s not as important how well your Figma design library is maintained, but how these components appear and function in code. The effectiveness of Storybook and its usage is crucial.
Importance of Process: Working on the design system taught me that the process is just as important, if not more, than the tangible assets. The process of developing and maintaining a design system is vital.
Strategic Importance of the Design System: The design system is not only a tool for designers and developers but also a strategic asset for the company. It should be included in the roadmap alongside feature development.
Kudos to the Team: I was fortunate to be part of a team where everyone understood the importance of a design system. It was a pleasure to learn from my teammates and embark on this journey together. Building a design system is always a team effort!
