Design System: Case study

 PROBLEM

As Wambi’s product team began to grow, building highly-functional and easy to understand components was key to fast and effective design work. We needed a lot of different tools to come up with stories to sell solutions, and complex components that utilized atomic design principles helped us tell those stories to outside team members and clients, and ourselves. Complex components need to demonstrate functionality through interaction, such as a highlight that appears when a button is hovered over, or a change in text size when an input is given. We need the design team to understand how to utilize new and existing components as quickly as possible, while also making them stylistically fit in with designs that already exist within the platform.

 Objective

I was tasked to create components that functioned as different types of input containers — text boxes, dropdowns, and the menu that appears when a dropdown is selected.

Solution

I created a system that tied these components (text input box, dropdown, dropdown pop-up) together with a parent component to ensure that any update made to these designs would impact the corresponding child component. We were in the process of changing our typeface, and at the time, Figma didn’t have tokenization or instance swap properties implemented in the system. So, I created a master base component.

Much of component building is an experiment, solving a puzzle and seeing what works, and how it’s interpreted by colleagues. How someone approaches a problem and builds a solution in any setting will be different, and the same is to be said about component building. This doubles in truth when the way we use Figma changes each year with big updates to its software, similar to Adobe’s. The important part is documentation, breadcrumbing, and including an instruction manual to help another designer understand how to use the machine in front of them.

There were different elements that affected a client manager to be able to complete a task, such as the current state of the user, whether or not client ingestion interacted with a user’s information (and therefor could not be changed), and whether or not a user has the correct security access to be granted different abilities.

To further prevent confusion, we also added a left navigation that updated as a user scrolled, so that a user can see all information that relates to the section they might be looking for.

There were lots of different settings we had to include in this feature, all of which would vary depending on each client and the package they purchased. We had to make sure that things were easy to understand when creating these different settings, because a client manager may not remember all the context that was shared in our training course, and needs to better understand any type of consequences that may come from making a misstep in their process.