Blueprint

Role: Product/Visual Designer
Skills: User Research, Visual and Interaction Design
Blueprint is an open-source design system implemented as a collection of React components and optimised for desktop applications.

Project purpose

Until a few years ago, the user interfaces of Palantir's core products were built in Java. It was the good old type of software you had to download and install. Web technologies were not mature enough to build performant and maintainable analytics software, but that started to change as browsers evolved and new web technologies were developed. Suddenly, we could deliver the full depth of our data analysis software right in the browser.

We soon realised something important was missing. Our work was siloed: platform teams were not leveraging each other's work, forward-deployed engineers built one-off solutions, and our designers and product engineers often ended up reinventing the wheel. As a result, our ecosystem of applications lacked a cohesive user experience, inefficiencies slowed us down, and the quality of our work suffered.

Early explorations of Blueprint components.

The approach

Our ultimate goal was to build a design system that allowed us to:

Focus on what really matters. By providing reliable defaults for visuals and interactions that are easy to use and pass a high quality bar, we free our designers and engineers from recreating the same work over and over again, thus allowing them to use their time and talent to solve critical problems.

Bridge the gap between design and engineering. Designers spend a disproportionate amount of time crafting mockups and prototypes that are idealistic representations of how the software should look and behave, trying desperately to communicate their ideas to developers and product stakeholders. Throughout this process, many details get lost in translation because of the inefficiencies of our tools. Better tools bridge the communication gap, allowing designers and engineers to speak the same language and maximize each other's impact.

Make it work and feel like Palantir. Palantir platform stacks are configured based on specific customer workflows, which means that we might deploy a different set of platform capabilities from one use case to another depending on the analytical goal. By leveraging the same design system to build each capability, we ensure a consistent, high-quality user experience across the platform that sets clear expectations for our users - this helps make our ecosystem predictable and trustworthy.

Application template using early version of Blueprint.

The solution

Blueprint establishes a common design language and provides an implementation of certain design principles that we hold to be important for high quality desktop applications.

The architecture was guided by a set of principles that we believe are critical for effective design systems.

Composability - Blueprint is composed of styles, interactive components and reusable high-level concepts such as visual intents, actions, minimal states, and more. Any of these atomic concepts can be applied to elements across the board - this is what makes our design system composable.

Blueprint follows Atomic Design methodology with a set of atoms, molecules, and organisms.

Accessibility - Colours have been designed to be accessible to as many people as possible, even those who are visually impaired or experiencing any kind of colourblindness. Our colours have not only been chosen to go well together but to also adhere to WCAG 2.0 standards.

Blueprint includes colour scheme generator for better data visualizations.

Extensibility - Blueprint lays a solid foundation. Any developer can build on top it, in addition to customizing what is provided out-of-the-box. This is because interactive components publicly expose their properties and functions.

Full documentation helps speed up the development process.

Data Density - Blueprint has been designed to support high scale data applications. We've made sure that the design system is able to display large quantities of information in a clear way.

Blueprint Charts provide responsive charting library

Final result

Blueprint is used by hundreds of forward-deployed engineers, product engineers, and designers at Palantir. It has become the foundation of our product design infrastructure.

Blueprint leverages open source technologies and is completely open source itself.

Blueprint powered Interactive map for the Syria Conflict Mapping Project.

Challenges

The biggest challenge we faced throughout this project was balancing the design and engineering priorities and concerns, whilst collaborating with the entire company. Since this project touched every part of our business, we needed to coordinate and get approval from many teams and stakeholders.

Hello

I'm Piotr Adam Kwiatkowski. Ever since I was a child, I have wanted to be a visual artist. I made my very first steps into graphic design on my trusty Amiga with Deluxe Paint IV. At school I was introduced to web & product design and instantly fell in love with it. From that moment, I knew I wanted to be a designer. I currently live in London, UK where I work as a product & visual designer.

Dribbble Behance Twitter Instagram

← Back