The Tofu Method: a Flexible Design System to Improve Product Delivery
Keeping a design system scalable and consistent without slowing down your workflow might seem a real challenge. Our Product Design team shares its recipe to success.
Maybe you are not the biggest fan of tofu (most probably not). But when you think of tofu, what is the first thing that comes to mind?
Strange texture, it looks weird and it tastes like nothing are probably a few… The thing is that solid block of soy can actually become a flavorful explosion when cooked with a variety of sauces. Let us explain our thought journey.
At iGenius we started off as a humble team, designing crystal: a virtual advisor, giving insight on your social media and web efforts through a conversational UI and analytic dashboard. The product and technology was quick to get traction. Today crystal’s user base has gone up to thousands and is no longer bound to tracking only social media and web performance. Since its release crystal has been extended to a wide variety of projects, able to learn from nearly any data set and provide insightful advice.
This significant growth in a short amount of time brought inevitable challenges. After metrics were analyzed and data visualization was defined, metrics needed to be quickly released into production. Each project required new custom visuals and recreating new metrics from zero was slowing engineers down.
How could we speed up our design process without losing our personal touch?
It became increasingly clear that in order for our growing team to efficiently work together a new design system was on the horizon. To create a uniform and transversal experience we had to start from the fundamentals. We set out to implement a set of principles and constraints across design and development teams.
This was a breaking point for our team: deciding to put value into the process, allowing us to design at scale.
So this is where the whole tofu talk comes in. We needed a solid base with a strong structure, capable of adapting to various data sets. Just to make sure you’re connecting all the dots, the various data sets would be the flavorful sauces.
Understanding the recipe
As a designer it is thrilling to have a blank canvas with the freedom to create a puzzle that perfectly fits together for that one unique situation. But let’s be honest, this is not realistic when new projects need to be quickly shipped. Making what seems like a minor change to the UI usually often translates into a huge effort from the development team. To bridge this gap the design and development team have made an effort to not get caught up in creating new and custom elements, focusing instead on a common design system.
Choosing a metric structure (Our hero, the block of tofu)
The first step to dramatically speed up our app development was to define a metric structure. We came up with 5 possible containers that make up a metric card:
- Title: title, subtitle, info, ID element, options, filter
- Value: total value, delta, sub values
- Content: chart (+ legend), table, content
- View: view more, expand, change graph
- Navigation: pagination, exploration
Each container is assigned a specific set of data. A metric can be constructed using any combination of the following containers.
Selecting components (Our mix of flavorful sauces)
The next step was defining each container’s possible components. In order to manage the large array of options the metric components were built in Sketch using the atomic design methodology. Through this process we improved communication between developers and designers while maintaining consistency across all data representations and building better code.
The metric cards were built to responsively accommodate two principle environments: the conversation with the advisor and the dashboard. Responsive behaviors were defined for each container and its content, adapting to their context and screen size. We also set rules for the card’s height by defining a minimum single row height. Any exact sum of rows can be used to create a card’s height.
Enjoying this recipe? We certainly did!
Tofu so far has helped make a better workflow while keeping our visual identity consistent.
This strong foundation is not something constructed over night and requires continuous maintenance as the product evolves and projects increase. It is important to keep in mind that there is always room for improvement and to steer away from getting stuck in a certain workflow just because it feels comfortable. If something is not working we encourage proactive communication across teams. In the meantime we are focusing on these long-term goals:
- Enrich our component library
- Deliver projects efficiently
- Cultivate a shared product language
Following our mission to simplify data access for everyone, we had to start from within. Simplifying our work process was essential in constructing a strong yet flexible and simple yet powerful product.
