Between its five co-founders, Burokrat had developed three separate tools for helping customers not familiar with German data privacy law make informed decisions when handling sensitive data. Because each of these had been developed by a different member (or group of members) of the founding team, there was virtually no consistency between their interfaces and interactions.
I was brought on by the team to create a scalable design system capable of unifying the product suite.
Goals
Burokrat was the brainchild of several different individuals working in various industries and the experiences of its products reflected this: Each product had been using very different brand assets, UI components, and UX patterns. While each product should differ slightly from the others in the product suite in its visual design, inconsistencies in the interactions and UX patterns would affect the overall user experience too adversely. Surely there was a more systematic way to apply the unique brand of each product to its respective interface without compromising on usability.
With this in mind, we focused on two high-level goals:
1. Create a design system to unify Burokrat's product suite
Each product had been using a slightly different brand assets, UI components, and UX patterns. The goal was to create a single system that could be used across all three.
2. Redesign Burokrat's sign up/log in processes
Create a sign up/log in experience for the suite to replace the individual experiences of each product and create a template for UI design using the newly designed system.
Project environment
The founding team consisted of a three man digital design studio called Dinghy, a data privacy lawyer, and a CEO/developer who was driving the project. I worked closely with one of the Dinghy partners and the company's CEO to set targets, establish workflows, and refine the end product. I worked closely with one of the Dinghy partners and the company's CEO to set targets, establish workflows, and refine the end product. The team members from Dinghy designed Burokrat's brand.
Software
My role
I was responsible for all production but would meet with the team regularly to gather feedback, set targets, establish workflows, and refine the end product.
My tasks:
• Conducting content inventory (mobile + web)
• Competitor research
• User interaction flows
• Prototyping (low and high fidelity)
• Preparing documentation
• Motion and interaction
• Competitor research
• User interaction flows
• Prototyping (low and high fidelity)
• Preparing documentation
• Motion and interaction
Design process
The first step was to conduct a content inventory of all existing UI components to better understand the scope of the project and identify the components in need of re-designing and/or consolidation. After that, I conducted a competitor analysis to better understand how other companies are building their dashboards and a bit of research on sign up/log in processes, as they can be quite tricky to get right and have a high potential interaction cost.
With a better understanding of the project landscape, I began creating user flows for the sign up/log in process, frequently checking in with project stakeholders to ensure alignment. After finalizing the user flows, we moved into production. Considering the relatively short timeline, we opted for Tailwind CSS — a powerful component library with an accompanying Figma board — to drastically increase the speed of prototyping. I then wireframed the layout using the existing components before updating their visual design using Figmas powerful assets and variables libraries.
Content inventory
The content inventory revealed major discrepancies between the products in the visual design of components of the user interface, as well as the behavior of those components.
A visualization of just how much the visual and interaction design differ across the three products in Burokrat’s arsenal.
User flow
Three processes necessary for account access
Design system / component library
Due to time restrictions, we focused only on the components necessary for building the sign up/log in flow and worked to design these using Burokrat's corporate brand assets, developed by Dinghy. This led to a relatively small design library, which I cobbled into some fully formed layouts.
Components in use
Snackbar
Given more time...
Design systems work best when they are built bottom to top using flexible, modular design tokens applied to small UI elements, which are then assembled into increasingly complex units. With this in mind, given additional time and resources, I would have liked to develop a more comprehensive system focused on defining the properties that govern how components and layouts look and behave rather than just making individual components.
