Header image

How we improved our design process to build runway-ready applications

May 29, 2020 blog-post design-system react-component-library

Imagine this: you’re late for work but you haven’t laid out your outfit for the day! This is a disaster; you’ve got 5 minutes to put on a good outfit and you can’t decide which one you should go with.

Here at Thinking Machines, we ask the same questions too—except that instead of dressing up for ourselves, we dress up our output materials, whether they are branding materials, internal web applications, or marketing decks.

Like any other design team in a startup, we used to do things ad hoc. This worked for us alright for a while. Now that we’re growing, the need for a design system became more apparent to us. Having inconsistent styling, creating similar components from scratch repeatedly, and making design decisions unsystematically don’t translate well to the increasing number of people in our team. And so we took a step back and rounded up frequently asked questions in our team to assess how we can improve our design process into something that’s scalable and impactful.

Our design dilemmas

“Which color should I use?”

Just like deciding what color of pants to use or what color combination to apply for an outfit, this was the million-dollar question that people asked very frequently. Which color should I use for the body text? What’s the font style to be used for this deck? Why are there multiple versions of this “blue”? These questions were rooted in the problem that we didn’t have a complete and accessible style guide for our current branding. We had a bunch of branding documents, but they were either incomplete or outdated.

The problem manifested in design inconsistencies throughout our output materials. We noticed how we were using different color hex codes for similar-looking elements.

Another fault was that we were using inconsistent styling in decks. The images below show how we were using different colors just for the body of the slide.

In fact, there were so many inconsistencies that even though it takes more than a second to see the differences, comparing them to multiple materials makes it more evident.

“Do you have an existing piece for this purpose?”

We create a lot of internal web apps in the company, whether it’s for a demo or an internal tool. Most of these web apps use the same components. The problem was that they were all built from scratch. Since different people were working on separate applications, it was hard to coordinate with one another on “already existing” chunks of code, thus creating this array of components that have the same purpose but have inconsistent styling.

It’s not sustainable to buy new clothes every day and wear them once. Just like clothing, we need to reuse components to save time and effort. In the end, fashion is all about contemporary trends where we reinvent styles rather than creating them from scratch.

“Hey, which one looks better?”

Another problem that most developers encounter is that they spend too much time on design decisions. There was no existing system that we follow for making design decisions, so for every web app or branding material we create, it’s all based on the subjective reasoning of the creator. This creates disparity among elements that are being produced across the team. Not to mention the amount of time wasted comparing 2px to 3px to 4px to 5px and so on when we could’ve had a systematic way of drawing out our design decisions.

Here comes Asimov, TM’s fashion guru

From the problems presented above, we have two ultimate goals: To deliver a consistent visual experience across all TM assets and user interfaces To drive value and business impact through rapid prototyping of user interfaces at scale

To achieve these goals, Asimov was built to be a single source of truth for all of TM’s design needs. Asimov is composed of three main parts: the design system, React component library, and a living style guide and documentation. Asimov is a repository of rules to maintain consistent design across all platforms - much like Asimov’s “Three Laws of Robotics”, a list of rules for thinking machines.

Design System

The design system was accomplished by revisiting TM’s branding guidelines and creating a guide of styles, symbols, and components. This will be the one-stop-shop for all design principles, processes, and design tokens. The goal of the design system is to maintain consistent design across all platforms, which hits objective #1 right at its core.

React component library

The React component library was built by developing a list of customizable UI components equipped with TM-specific styles as default. The component library aims to solve objective #2, which is to drive value and business impact through rapid prototyping of user interfaces at scale.

Style guide and documentation

Having the design system and React component toolkit is not meaningful if it is not accessible and being used by the team. The style guide and documentation was created to showcase the guidelines and documentation on using TM’s design system and UI component library. This hits both objectives; it will aid the team to deliver a consistent visual experience and help drive value by providing good documentation on the React component toolkit.

Our 2020 Ready-to-Wear Collection

With our design system in place, the amount of time spent designing mockups in Figma was reduced by up to 20%. We didn’t have to redesign the same components again and our decision-making process was made more efficient by narrowing down our options.

Demos and other internal applications were also built at extraordinary speed as our components were already dressed up with the TM branding. With the world’s current situation, fast executions are now more relevant than before. Setting up Asimov was our step onto shifting our approach, from rummaging our wardrobe for a proper outfit to curating our ready-to-wear collection.

Beep boop, what’s next?

As to how all wardrobes should go, Asimov will be constantly updated and improved to cater to more complex problems. We’ve got the essentials already laid out, and the team will be working together to improve it so that each of our projects is runway-ready.

Are you experiencing the same problems as we did? Start rounding up pain points from different people, and you might be surprised, a simple color repository or scaling system can help 10x the value your startup is delivering.

MORE STORIES

Avoid These 4 EDSA Southbound Chokepoints

We uncovered potential chokepoints on EDSA Southbound using Waze data to show you exactly where you shouldn’t be during weekdays.

6 Use Cases of Geospatial Analytics That Change Your View of the World

Successful businesses use geospatial analytics wisely and we’ll tell you why you should start using it too.

Dots are people too: Learnings from Information+

Our Data Designer, writes about what she learned from attending Information+, one of the few data visualization related conferences that targets both researchers and practitioners.