Increasing internal efficiency and consistency across the design and development teams

Taking on All Challengers Right Out of the Gate

While most people would focus on “testing the waters” when taking on a role at a new company, I just couldn’t sit idly by knowing there was a more efficient way of building products.

New role and new ways of thinking

I joined Ambassador in March of 2015. Prior to my joining, the product designer role had gone unfilled for over a year. Without that guiding resource, certain aspects of the design and development process had diminished.

Nearly every style was scoped to an individual component. Solid consistency was lacking. There were too many UI elements created to address one-off issues.

This way of working wasn’t fit for delivering a great UX, especially with tight deadlines. Change was necessary—immediately.

Luckily for me, the frontend team was gearing up to transition from Angular to React, meaning they had to create an entire component library from scratch. This presented the perfect opportunity to get us on the right track going forward.

Building a case for leadership buy-in

As a growing company in the tech space, undoubtedly there were multiple initiatives our leaders had to deal with. However, I firmly believed this one was a high priority.

And while our leadership recognized the importance of what I envisioned, I had to “sell” them on the immediacy needed in taking action. Thankfully, after explaining the benefits, including reduced design and development time and a consistent brand identity presented to our customers, I received approval.

Time to go forth and conquer.

Building the Design System of the Future, Now

I began with a kickoff meeting with key stakeholders to determine what we needed to accomplish. Through our collaboration, we set the following goals:

  • Create a unified design language
  • Improve our cross-team workflow
  • Encourage solid reasoning

From the fray, Reactions was born. (Credit for the name goes to the frontend team: “React” + “ions” = a twist on React plus atomic design!)

We organized Reactions in a logical manner:

  • Foundations — Where we housed our core styles (i.e., typography, iconography, grid, and color library).
  • Components — A place for all our components.
  • Patterns — Common design patterns that would be used within our app.
  • Resources — Brand assets (e.g., logos, badges, etc.).
Reactions in the wild

Creating a unified design language

With multiple parties having handled Ambassador’s brand identity over the years, it had lost its sharpness. And one important factor was lacking: Consistency.

I started this stage by taking a full inventory of all the styles that made up Ambassador—every granular detail, from color to font size to line height.

I addressed the core elements. Every color was given a meaning. Every font size adhered to a predefined scale. Any style that didn’t have a distinct purpose was removed.

The next step was rebuilding each of our UI components, one at a time, from the ground up. And in doing so, I was a stickler for ensuring each element had a logical use case. Again, everything had to have a purpose; we would not simply create for creation’s sake and produce unnecessary clutter.

Each component is mirrored as a Sketch symbol in our master file.

Improving our cross-team workflow

Moving from product to people, the goal here was to remove any unnecessary back and forth between teams.

Whether it’s miscommunication, or the lack of communication altogether, this issue drags down teams and adds unnecessary burden to the build process, which negatively impacts the quality and timeline of the product.

However, with Ambassador using a global style guide, in many cases we no longer needed to maintain high-quality assets or produce hi-fidelity mocks. A designer could simply pull together a UI using whatever colors, fonts, or assets they had readily available.

This improvement led to not only reduced design-to-development time, but also lessened communication barriers between teams.

Enabling solid reasoning

While Reactions provided usable styles and components, it was much more than just a style guide. Reactions had certain built-in “beliefs” that guided us in building the product through a design system.

Of note: The difference between a style guide and a design system is that the latter provides us with architectural or experiential rules that drive how a style guide is used.

Kicking Components and Taking Names

The introduction of Reactions to Ambassador was a definite efficiency boost. And it even helped improve morale and interactions between the design and development teams since there were fewer misunderstandings and greater clarity in the build process.

Preview of some our components

Reactions’ evolution

After establishing Reactions, we didn’t stop there. The system wasn’t developed to be static. It is dynamic and still evolving as we continue to refine Ambassador’s brand identity.

Published January 2017