First Design System
build from scratch
For mobile ∙ Collaboration ∙ Memorisely international course
“In just six months, I built a design system that speeds up workflow, improves consistency and makes designing for mobile more efficient.”
Introduction
When I started this project, I was faced with the challenge of building a design system that truly worked for mobile. The company already had a design system in development, but it lacked a solid mobile foundation. In six months, I developed a mobile-first design system with reusable components and clear guidelines, transforming the collaboration between designers and developers. Thanks to this design system, we can now develop new features much faster, without having to start from scratch every time. What began as a technical challenge quickly turned into the foundation for a more efficient, consistent workflow.
The impact was so significant that the product for which the design system was created had to be adjusted as well, to ensure a seamless integration and a unified whole. The design system became not just a tool for the team, but it actually changed the way the product was shaped.
The result? Faster implementation, consistent user experiences, and a product that feels stronger and more cohesive as a whole. And this is just the beginning!
Problem at hand
When I joined JEX, I quickly noticed that the existing design system, which was created for the SaaS platform, wasn’t tailored for mobile applications. This led to inconsistent design elements, small fonts, and overlooked accessibility—issues that frustrated both users and developers. As someone with a background in graphic design, I was comfortable with UI, but I knew that creating a scalable design system required more expertise. To address this, I enrolled in a Memorisely course to deepen my knowledge of design systems and learn how to collaborate better with developers.
This journey was a learning process for me. I took what I learned and applied it directly to build a mobile-friendly design system that solved key usability issues and laid the foundation for consistent, accessible, and scalable designs. It wasn’t just about solving a problem; it was about growing as a designer and making a meaningful impact on the product and the team.
How can I create a design system that is simple, scalable, and understandable for both designers and developers?
Way of working
📝 Analysis and preparation
To lay a solid foundation for the design system, I started by thoroughly analyzing the company's brand guidelines. This helped me fully understand the visual identity and ensured that the design system would align perfectly with the company's style. Next, I reviewed the existing app to identify the components that were already in place and pinpoint any gaps that needed to be filled. By focusing on these critical elements, I was able to avoid wasting time on unnecessary components and ensure a more efficient development process
🛠️ Building Components and tokens
A key focus in developing the design system was creating a scalable and flexible structure that would be future-proof. I started by defining tokens that were widely applicable, ensuring they were not tied to specific components. These tokens were designed generically, making it easier to implement future changes, such as adjustments to branding or color schemes, smoothly. Thanks to this approach, the design system remained both organized and adaptable, greatly improving the efficiency of future updates.
🤝 Collaboration with Developers
Collaboration with developers was essential to make the design system both visually and technically feasible. We discussed the naming of the tokens together to ensure consistency and clarity in communication. Additionally, we prioritized which components could be built first, taking into account time constraints and task complexity. This collaborative approach kept the vision for the design system clear and seamlessly integrated it into the technical implementation, significantly speeding up the project and improving teamwork.
My learnings
Diving into the fundamentals:
I learned that "atoms" are the building blocks—things like icons, buttons and tags.
Then, "molecules" combine them into more complex pieces, like dropdowns and input fields.
Finally, "organisms" bring everything together into fully, functional components.
The foundations of a design system:
First, I dove into colours—learning about setting up dark mode and defining variables to keep everything consistent across the board.
Accessibility was a top priority, so I regularly used the WCAG Color Contrast Checker to ensure the colour choices were readable for all users.
I also spent time refining text styles, focusing on clarity and readability, especially for mobile screens.
