The making of Orchestra: a Design System that harmonizes multiple Pattern Libraries
Introduction
Hi everyone! I am Andrea De Grandis, a third-year Digital Communication Design student at IAAD University in Bologna. My curriculum is designed to teach us how to communicate with the public through digital channels, taking advantage of the continuous advances in information technology.
I am passionate about Human Centered Design and its applications in digital interface design. During my studies, I learned a methodology for creating intuitive, effective and easy-to-use products and services that always prioritize the user’s needs.
One day, during a class with Chiara Scesa, who works at Growens, I discovered an opportunity to intern as a Junior UX Designer in her team. I immediately jumped at the chance and became part of a motivated design team with competent colleagues, and I was not disappointed by the experience: the result-oriented mindset and the interface design focus of the activities were really my cup of tea.
But I will not dwell too much on my experience at Growens. Today I want to tell you about the project I actively worked on, which allowed me to discover the innovative world of No-Code web development and the potential of creating a design system, codenamed Orchestra.
What is Orchestra Design System
Design at Growens is organized as a decentralized community where both designers and non-designers can participate. Every business unit has an independent design team that works directly with the business unit’s products or services. However, the whole group follows a vision and some guidelines shaped by the group design team and the designers are committed to some strategic projects with the aim of enhancing the design maturity. One such project is the business units’ design system. By creating, defining, and maintaining the Design System, the business units can improve the scalability, consistency, and time-to-market of their products, while also improving the design maturity of Growens.
However, business units differ in team size, working style, and design maturity, and they are independent entities within the group. This raises the question of how to create a unique group Design system without excessively influencing the business units. To address this, we defined five guiding principles and adopted a flexible approach.
The five guiding principles across the group are made to inspire designers as well as have a concrete impact on design maturity:
- Collaborate broadly and deeply, partnering better
- Coordinate efforts across projects, LOBs, and channels
- Prioritize the moments that maximize the impact
- Measure the impact of our work, both for humans and for the business
- Understand collaboratively the human context before working on it
The flexible approach we used can be summarized in the following image.
The core of the approach is the group’s vision, rules, and guidelines, which provides a compass view for designers approaching the design system task. The goal is to have different design systems that speak the same language. In the second layer, we have the brand guidelines and foundations of each business unit, which are independent of each other due to the disparate nature of the products within the group. Finally, we have the layer of the design systems for each digital touchpoint, such as the official website, SaaS platform, or specific function of the platform
We named the project “Design Systems Orchestra” because it doesn’t impose strict rules or limit creativity. Instead, it delineates the strategy and direction to follow while leaving the freedom to individuals to move forward at their convenience.
Design Systems Orchestra has been useful in keeping focus during a period of evolution at Growens. Over the past few years, the company has grown from 11 to 30 designers, and by defining a unique tool for designers, Figma, we have eliminated disorganization and extra work. Additionally, we have created two additional style guidelines that are used daily by design and marketing teams to adhere to the brand strategy.
Showing Orchestra to the world
After months of crafting our design systems, we realized that we needed to communicate the project both internally and externally. Internally to all the stakeholders involved in activities regarding brands or components, such as developers, marketers, and designers from other business units. A place where all the necessary information was available for consultation.
Having a place where the information is available to everybody would fulfill the gap of the unknown and strengthen brand consistency.
At the same time, we wanted to show to the world outside Growens the work we have done. The need came directly from interviews with designers who were asked how they wanted to communicate the project externally. Therefore, our goal was to depict the project with a case study approach showing the rationale behind the whole project and being as transparent as possible showing everybody what is inside our pattern libraries and design systems.
Why we chose Webflow and first impressions
At the beginning of the article, it was mentioned that Webflow was suggested for creating the Orchestra website. Although I was unfamiliar with the software at the time, its flexibility was immediately appreciated. Webflow is a web development platform that allows users to create sites and applications without the need for programming knowledge. Its drag-and-drop interface and visual tools offer a wide range of features and interactions. However, in the context of web editors, Webflow is one of the most technical since the editor experience isn’t limited to drag-and-drop, but it requires some CSS/HTML knowledge. As a matter of fact, to correctly design components, the editor needs to set the styling with CSS variables.
Despite being a developer, I had never approached No-Code until working with Webflow. While I used to prefer coding websites, Webflow changed my opinion on this. I found it easy to learn from the abundance of online tutorials, and with minimal programming knowledge, I was able to achieve the results I wanted in a short amount of time if compared to developing a website from scratch in HTML/CSS/JavaScript.
But what did I actually do? Here is a detailed account of the process I used.
What designers do when developing with Webflow
When developing a website, the initial phase is a key process to make the work more efficient and optimized. It is important to prepare a working environment that allows reuse of style elements, such as titles, grids, main colors, images and icons. Once I did this on a separate page, I was already familiar with the platform. In addition, I was able to start working efficiently right away thanks to a whole series of tutorials offered on Webflow University, which is highly recommended for both experienced developers and beginners.
The second step was to start creating the components. In fact, the platform has a very good inclination toward Atomic Design, which is an approach to design interfaces. In Atomic Design, the parts of a web space are no longer considered simply as pages in a catalog, but as real systems composed of many small units (atoms) that, by binding together, take on different meanings and forms, whose overall view can give rise to a unified result, but never static.
All of these elements, defined as atoms, while initially seeming disconnected, will later go on to reassemble into molecules (such as a card) and then create the first organisms (such as a header or footer).
All this is possible because the platform is designed to work with classes and IDs, just as in HTML-CSS. These, previously set with a name, will allow changes to all the elements to which they have been assigned, saving the developer in the corner if reworks are necessary.
Webflow by default contains every HTML element (such as buttons, lists, text, etc.) as well as pre-made layouts (such as Hero, Navigation, Footer, etc.). These can be added in the pages and styled with all possible CSS rules, also using modern layout tools such as Flexbox and css-grid.
Once I created my Webflow working environment, it was enough to start composing each section of the Figma prototype containing the UI of the Design System website, specifically focussing on making it work on any device.
Conveniently in fact, with Webflow you can, for example, switch from desktop to mobile preview in a snap, and thanks to break points and various size units, you can adjust the width of the content or element according to the selected viewport.
Thus, after a short time of work, we got a responsive site, coherent to the proposed layout, and containing all the elements of the Orchestra Design System we saw earlier, linked on every page thanks to links and perfectly navigable and functional.
Finally, it was enough to work pixel perfect on some details and especially to add the animations that were prefixed. Traditionally, these resources are often built with highly specific JavaScript libraries, requiring tools and plugins full of conflicts, quirks, and difficult code-based learning curves. With Webflow, we have access to all the tools we need to manipulate this content with granular control, building visual interactions.
Once all the pages were fine-tuned and tested, we needed to publish the website on a staging environment (which is provided by default by Webflow), as well as to connect the custom domain design.growens.io. Fortunately, Webflow allows to easily publish/unpublish a website in a matter of seconds and a few clicks.
Conclusion
Growens’ Design Systems Orchestra was a vital project in improving the company’s design maturity, ensuring scalability, consistency, and time-to-market for the different business units. We used Webflow to create the website, which we decided to use to communicate the project internally and externally. We have learned that No-Code web development is a valuable tool for designers to quickly achieve results and bring their vision to life. For those who want to start a project similar to Orchestra, I recommend adopting a flexible approach that allows for different solutions to coexist while sharing a common vision. Additionally, embracing No-Code tools such as Webflow can be a powerful way to create efficient and effective websites without needing extensive coding knowledge.
