Box has been offering cloud services for more than 20 years. In that time, we've never had a unified, organized design system — until now. I spoke with Chuck Espeleta, a staff product designer at Box, to learn why we created this new system, named Blueprint, and how it works.
How did you get involved with the design system project?
Chuck Espeleta: I joined Box five years ago, during the pandemic, specifically to help out on Canvas, our collaborative-whiteboarding experience. At that time we lacked a traditional design system, but there were a few designers and engineers already working on the foundations of a system. I saw an opportunity to help out, I’ve been working on it ever since.
What's the design system history at Box?
Chuck Espeleta: For most of Box's history, internal teams did their best to make everything look and feel the same across experiences, but we lacked a mechanism or method to unify how we worked. The underlying goal of Blueprint is to unify the wide scope of Box experiences by creating a foundation that teams can build off of. The biggest challenge we faced was building a design system based on an existing look and feel that wasn’t always consistent, with the goal of easing our teams’ migrations to Blueprint over time. Fortunately, this migration has provided this ability to experiment and adopt these modern patterns in a much more effective way.
How would you define a design system?
Chuck Espeleta: A design system combines tools, processes and cross-team alignment in service of creating a consistent experience and identity. I'm a big fan of Legos, which I think is one of the best examples of a successful design system that has stood the test of time. They're standardized building blocks — where you can use instructions to build wildly different ‘compositions’ – or create them from scratch – without ever changing the underlying stud-and-tube system. That's a strong system: everything at the root level works with everything at the macro level, and still allows for expression and evolution.
What are the different elements of a design system?
Chuck Espeleta: You start at the foundation by defining the styles: colors, typography, spacing, icons, etc — all the styling properties that can be applied to a component. Next you have components which consist of presentational and functional compositions like cards and buttons, which are combinations of our styling properties, or “primitives.” Then those components can be combined into larger compositions to create what are often called "molecules" — larger constructs like comboboxes and form fields, which are combined to create more complex features, like a ‘Share modal’, which are often called “organisms.”
How do you go about putting a design system together?
Chuck Espeleta: Lots of meetings! Design systems are a powerful forcing function because they bring all the designers and stakeholders together to define, adopt and evolve a method of building experiences. When we want to introduce changes, it’s a group discussion, not one person's decision. That collaborative process helps us iterate towards better experiences.
How has AI influenced the design system?
Chuck Espeleta: Box AI has been a major driver of this effort. In the market, we’ve seen AI use cases quickly evolving new paradigms and patterns, which have created a more modern look and feel. Fortunately, we can leverage our new system to introduce these iterations at scale to our internal teams.
Without Blueprint, we'd be asking every team that’s responsible for a product to make these updates on its own. As you could imagine, it would be a nightmare to maintain consistency. Now we can introduce a change and share it across multiple experiences. The speed of change in the era of AI makes it essential to have this unified system to combine our efforts.
So our Box AI team has been leading the charge by introducing these newer, more modern patterns, which we then incorporate into Blueprint and can share across our different teams to maintain a consistent, high-quality experience.
What were the biggest challenges in this process?
Chuck Espeleta: The biggest challenge was figuring out how we wanted to evolve our design language. At a company that's been around for 20 years, many of us dream of different ways to modernize things, but we also want the experience to remain familiar and easy-to-use.
Before Blueprint, any thoughts of modernizing weren’t possible due the difficulty in coordinating multiple teams without a single source of truth. This release is one of many that we’ll use to establish a modern foundation that we can build off of going forward.
Can you walk us through the tools and processes behind Blueprint?
Chuck Espeleta: Absolutely. We use Figma, which is a great tool for collaborating in real time. It gives us the mechanisms to support and distribute a design system. We organize our system by categories of components, which consist of primitives and organisms which are to create more complex components, which are then combined to form templates and pages.
And throughout these evolutions we do our best to maintain a source of truth, so that when someone refers to a certain type of button, we know exactly how it should look.
Beyond Figma, governance is critical. We use a documentation portal called Zeroheight, where we lay out the system’s foundations and how stakeholders can collaborate and contribute to Blueprint. By having a bit of structure and a clearer process, we’ve been able to better align and move faster.
On the engineering side, we use Storybook — that's where the implemented components live. Engineers can reference every variant of any component. We’re also looking at leveraging some AI tooling to help scale our efforts in the near term.
What specific visual improvements has Blueprint delivered?
Chuck Espeleta: One example is color! Previously, we had a limited color palette, and there were quite a few gaps — as the color of a background got darker, fewer of our colors met the minimum color contrast for accessibility, which made it hard to maintain our brand across different scenarios. With Blueprint we've doubled our color palette, so we can now stay on brand across an array of light and dark backgrounds.
We've also redesigned our icons. The previous set was inconsistent, so we’ve refreshed them to feel more approachable. And we’re using new processes and techniques to make it easier to update these in the future as well.
Looking forward, what are the next steps for the Box design system?
Chuck Espeleta: Most importantly, we're looking at new ways that our teams can use these building blocks to envision a future Box, sooner rather than later.
When a Box customer sits down to this updated UI, what do you hope they take away?
Chuck Espeleta: We hope they feel like it’s familiar, but also refreshed and modern. And we want customers to know that we're listening to them, learning from their use cases, and evolving alongside their needs.
