BLADE Design System

“A lightweight framework for fast iteration.”

THE CHALLENGE

Create a design system to improve user experience, increase coherence of user interface, and streamline product management, marketing, and business development decisions.

My Role

I worked with the Director of Product to unify the user experience of the BLADE app, and turn that into the foundation of the BLADE Design System.

The Process

Audit

I began by auditing the existing design, looking for variations in UI elements and patterns and estimating how effective they might be at their given task. After I gathered everything in one place, I began to look at the content surrounding the UI. Most aspects of the app were created using an internal CMS tool, with content, style, and interaction hardcoded into pages.

I built an understanding of the content strategy and the processes that shaped the app into what it was, and engaged stakeholders on new practices of producing and maintaining content.

Strategize, Prototype, Iterate

The company culture demanded frequent changes, responding to feedback from many stakeholders, in an environment where time was of the essence.

The strategy I chose was to work within this framework to produce design artifacts as needed; given the pace, putting together a formal design library, styleguide, or brand bible wasn’t going to work. On any given project, I would produce a number of wildly different concepts without worrying about a core interaction model — it would all be getting an update anyway. Rapid sketching, prototyping, testing, and iterating eventually led to something that had the most buy-in from stakeholders before moving into development.

As the product direction came into focus, I was able to settle down and produce a design library centered around my standard principles: consistency, clarity, iteration, and value creation. The goal was to streamline the concept development and interface design process by making it easier to quickly iterate on products without incurring debt.

Alignment

The most important task in setting up a design system is making sure it aligns a constellation of needs: product, design, engineering, marketing, business, and most importantly the user. To that end, the BLADE Design System is a more lightweight framework than I’ve previously attempted.

Certain aspects such as navigation elements are tightly controlled, yet for the most part the product is very content-driven. Producers need the flexibility to write a sprawling novel on a product description page, if that’s what the situation calls for.

Ultimately, the design system formalizes and ties together the core interactions of the app while providing the scalability and flexibility to customize content and flows according to the needs of new product initiatives.

The Result & Takeaways

• Having a clear value proposition for the design system is the key to increasing adoption by stakeholders.

• Design systems are good for scaling up products, but not so good when the product is inherently inconsistent and iterative.

• When a goal of the design system is to improve collaboration, the system will only be as successful as its weakest link.

You can read more about the BLADE Design System here