4 Insights from Econt’s Design System Development

brandЪ
5 min readApr 10, 2024

--

What we’ve learned from collaborating with Bulgaria’s leading logistics company?

In this exploration, we uncover pivotal insights from our collaboration with Econt and building their design system Compass. Discover the key elements that drive innovation in logistics management.

#1 Detailed roadmaps are vital

Within Econt’s dynamic logistics landscape, roadmaps aren’t just plans; they’re the compass guiding the course of the design system development.

Why do roadmaps matter?

  • Strategic alignment with broader business goals 🌍
  • Information can “go to market” quickly 📤
  • Clarity and focus amidst the complexities of design system evolution, keeping the project on track 🎯
  • Adaptability enables the teams to navigate unforeseen challenges. 👌

Get more things done in less time with parallel workflows and simultaneous validation

As the UX/UI designer completes work on a component’s creation, another UX/UI designer, together with the UX writer seamlessly steps in to craft descriptions outlining its behaviour, anatomy, states, usage, etc. Econt’s 72 components are strategically grouped into 4 categories. They range from foundational components, like essential radio buttons, to more intricate ones that may incorporate these foundational aspects. This categorization simplifies workflow management.

Meanwhile, while awaiting validation from managers, the designer can pivot to another set of components, allowing for continuous progress without waiting periods. By overlapping validation with ongoing work, we’ve minimized delays and bottlenecks, ensuring that the design system evolves swiftly to meet the ever-changing demands of the logistics landscape.

Just as each puzzle piece contributes to the bigger picture, every aspect of our method plays a crucial role in achieving our goals.

#2 Figma vs the rest = 1:0

The design system development journey with Econt started at the end of 2022. We encountered a crucial lesson in the tools we employ. Initially opting for Adobe XD, we found ourselves navigating through its limitations, especially with scalability and collaboration. Recognizing the need for a more robust platform, we made the strategic decision to transition to Figma midway through the project.

How to choose the perfect tool for design system development?

🤔 Consider component properties
Figma offers robust support for variables (which are essentially design tokens), component variants and booleans.

🛠️ Evaluate auto layout functionality
Figma’s Auto Layout feature simplifies creating responsive and scalable designs by automatically adjusting the layout and spacing of elements based on content changes. This is invaluable for maintaining consistency and adaptability across various screen sizes and devices.

🗃️ Make sure your team can collaborate
Figma stands out for its enhanced collaboration capabilities. Its web-based platform enables seamless communication and feedback exchange among team members from different locations.

#3 Tailor your process to the client’s needs

Acknowledging Econt’s urgency for swift outcomes, we understood the imperative of selecting tools that seamlessly integrate into their workflow, prioritizing speed and efficiency over unnecessary complexity. While exploring various options, including custom solutions, we recognized Zeroheight as the perfect fit, not only for its remarkable speed and ease of deployment but notably for its efficacy in facilitating parallel processes.

How so? As we completed the second group of components, they were promptly integrated into the development of Econt’s projects, demonstrating the efficacy of our approach. This dual process exemplifies the essence of “tailoring,” where we seamlessly navigate two concurrent tracks to achieve our objectives efficiently, bypassing the time-consuming process of bespoke development.

This refined strategy has proven invaluable, enabling us to expedite the process while ensuring alignment with Econt’s immediate needs. Our collaboration has set the stage for a lasting partnership founded on trust and mutual success.

#4 Open design systems empower innovation

In the development process, both Econt and our team recognized the immense value of collaboration and community engagement. That’s why we’re happy our client decided to open up Compass to the public. By sharing layout files containing source materials of components with both our design team and the wider Figma community, we’re fostering a culture of collaboration and innovation that extends beyond the boundaries of our organization.

🤲 Opening Compass to the public allows us to tap into the collective knowledge and expertise of the wider design community, enriching our design system with fresh insights and perspectives.

👁️‍🗨️ By inviting feedback and input from external contributors, we ensure that Compass remains relevant and adaptable to the evolving needs of users and stakeholders.

🤝 Making Compass accessible to other brands and organizations contributes to the growth and development of the design ecosystem as a whole, inspiring and empowering others to build their design systems.

Embracing openness and transparency contributes to the collective advancement of design practice and methodology in Bulgaria.

Final words 🤩

In our collaboration with Econt, we’ve learned invaluable lessons that drive innovation in logistics management. From the strategic significance of detailed roadmaps to the transformative impact of selecting the right tools and embracing open design systems, each insight has propelled our design system development forward.

As we move forward, these insights will remain guiding principles, guiding us toward continued innovation and excellence in design, shaping the future of logistics management alongside Econt.

Get to know brandЪ’s work

💻 Website

🧑‍💼 LinkedIn

🏄 Instagram

--

--