strug-banner

"It's important to push yourself further than you think you can go each and every day - as that is what separates the good from the great."

-- Kerri Strug

Strug Design System

Flowspace was born in 2017 and built on Ruby on Rails. Its design library was based largely on Bootstrap, with a series of overrides and a plethora of conflicting CSS files.

While ultimately functional, its design system was inconsistent and demanding; lacking fundamental design principles and absent of intuitive controls. The early devs worked with what they had, and it worked. But it was time for an update.

Enter: Strug. Flowspace's design system built from the ground up.

Fig1. - Flowspace's interactive shipment dashboard, order details, and product inventory.

Roles and Responsibilities

Product Design | Design OPS | Scaling | Hiring | Product Growth | Sass

Principal Designer
Nov 2018 - Current
  • Oversee product design, communication design, user research, and UI system design
  • Structured and built the design organization
  • Aid the strategic development of complex product areas
  • Design Flowspace's market-facing and user-facing applications
  • Conduct extensive user research to derive key product insights
  • Work with Product to ensure OKR assurance
Favorite Tools
  • LoFi - Sketch
  • HiFi - Figma & UXPin
  • Usability - Userpilot
  • User Engagement - Smartlook
  • My awesome teammates
  • Ruby on Rails, HTML, SCSS, JS/React

The User Interface

It's my opinion that a good user interface encompasses three aspects. That it be: memorable, natural, and convenient.

This essentialy translates to having a standard set of design elements, components, patterns, and views, that aid the user in accomplishing tasks in a way that they can remember.

Fig2. - Early iteration of the introduction to the Strug design system

The Need for a Design System

Consistent design not only helps our customers understand what is expected of a certain action or feature, it also helps our internal teammates to make the best, most informed decisions possible.

The Design Aspect
How design components work hierarchically and functionally from a design perspective
  • Start with the layout and organizational design elements
  • Define and clarify colors, font sizes, interactivity, and their usage
  • Build on customer expectations with intuitive and conventional designs
  • Flesh out complex design elements with annotations, semantic colors, and actionable copy
  • Group like elements and separate differentiating design clusters
The Code Aspect
How a code based design system speeds up developer ramp-up and eases designer fatigue
  • Write clear, easy to replicate code
  • Make components cross-functional and repeatable throughout the app
  • Don't keep adding new code - try to re-use existing classes
  • BEM and similar methodologies work best for applications that scale
icons
Fig3. - Incorporating consistent sets of visuals and documentation

Documenting Everything

It was important to document all the updates to the design system. Why? Bootstrap has a comprehensive documentation library full of examples and code snippets that our devs could reference. Yet, even with that Bootstrap documentation, there was no single source of truth that would lead our devs to make consistent design decisions (that's not their job anyway)!

With Strug growing quickly (I devoted much of my time outside of feature work and sprints to it), documenting when to use components, how to make design decisions, and how to use which elements became the sole focus. With each iteration, our devs were already ramping up toward consistent design.

Internal Design System

Onboarding new developers (and designers) should be an easy process, but learning a brand new stack (or design system) can be a daunting task.

As Flowspace grew, and new talent joined the team, new developers were often spending time redesigning components that already existed in the Strug design system.

Instead of tasking the dev teams to stop feature work, I was able to build out the Strug design system into usable components in Sass and React/Typescript. All the design elements once trapped in pixel land, now became functional usable code.

css
Fig4. - Building the Strug design system in Sass/SCSS

Understanding the Business Value

Design systems are nothing new. They are helpful to reference patterns and design components, explaining in detail how design elements are used in an application, and for having a repository showing the growth and maturity of an application and its design.

In the case of Strug, onboarding devs and new designers became a breeze. We realized how much sooner we should have implemented the design system. Feature and story work were completed faster and more consistently.

internal-design
Fig5. - Flowspace's interal design system: Strug

Creating a Library that Works

What good is a design library if the designers and devs don't know how to access it? Using our already existing code stack, I coded up an internal design library that showcased our application's design elements, the example code in which it is used, and constraints for each component.

Since I already coded up the classes and components, I organized each component hierarchically to refrence each usable and repeatable element in our app.

Building for the Future

After implementing Strug, we realized, "why not take this a step further?" Not only did we use a code-based design system, but we even expanded the design library to include branding requirements for our marketing teams.

We now had a place for consultants and contractors to reference our colors, logo use, and more in one, self contained application.

fs-logo-app
Fig6. - What not to do with Flowspace's logo

Problems Faced - Problems Solved

Strug helps onboard designers and developers. It aids in making complex design decisions.

Problems
Employees...
  • ...need to understand how our application is organized
  • ...must work together to develop features and stories
  • ...do not always understand how our design elements are used together
  • ...want to make consistent design decisions
  • ...do not want to have to re-code everything every time
Solutions
Strug...
  • ...thoroughly explains how our design system works
  • ...allows designers, engineers, and product managers to collaborate on design efforts
  • ...uses conventional and relatable user interface elements
  • ...details how larger design layouts are created with smaller design components
  • ...has all the code built in

"It's great having a place to see all of our components and how they're used throughout our app. As a new front-end engineer, I've already saved tons of time."

--Actual Flowspace Developer