By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
As one of two designers, I helped to build a foundation to grow design ops at Pectus. We setup a design system, established smooth collaboration processes with engineers and created a product vision that will guide the start-up over the next years.
Pectus aims to replace outdated tools like Excel. It accelerates data-driven decision-making through easy data access and enhanced collaboration (s. designing the table).
Creating a system
When building digital products, designers have to put on many hats. Not only do they access user needs, ideate solutions and test implemented designs, they also define the visual and interactive design of products.
That’s why we use design systems to document and streamline the look and feel of the UI. Defining color, typography and spacing conventions accelerates designing and creating components. It also raises the quality of the software. If well-defined states and patterns are in place, users can easily learn them which in turn reduces their cognitive load.
Pectus DS
We created a custom design system using resources in line with industry standards:
1. Ant Design - UI component library as the basis of our design system 2. Radix colors - color system optimized for accessibility 3. IBM icons - exhaustive, versatile and well-designed collection of icons
Minimaltistic, functional & modern
In a series of initial conversations with our team, we concluded that our target users would likely appreciate a minimalistic and functional but modern UI. Based on this goal, we made some initial decisions regarding color, typography, spacing, and composition.
The idea was not to design the whole brand identity at this stage, but rather to build a solid foundation that could be iterated upon later as we learn more and more about our users.
Collaborating closely with engineers, and taking these rules as a starting point, we were able to quickly specify and implement a consistent look and feel throughout the application. This also enabled us to design and ship at a higher velocity than we could have done otherwise.
Screen with Pectus Design System applied
Evolving frontend <> design collab
After a few months using this setup, it became evident that there was opportunity for us to improve. Since the company was moving towards fundraise, speed was often favoured and design QA sometimes fell under the table. As my design lead had left us, I needed to think of a way to handle the increased workload while supporting our team during development.
That’s why I proposed to create a new framework for frontend <> design collaboration. After securing support of our CPO I set out to research solutions and align with engineers on a process.
State of the art tools
Additionally the engineers and I discussed how to improve design QA. We decided to integrate Storybook in our process to enhance implementation quality and QA time. As a joint point for design and engineering, the tool additionally would help us to:
Simplify collaboration by enabling comparison of components in an isolated environment and by establishing a common language between engineers and designers to reference those.
Document the frontend while being accessible for the whole team and help to scale up later.
Link design files to components making both easier to reference.
Perform visual and automated testing of UI components.
Introducing a process
Defining process can be very tricky. While we want to build high-quality software that can be maintained easily, a process that is too complex could potentially block the team. Still touch points between the product manager, the designer and frontend engineers are vital to leverage the team’s expertise and keep everyone aligned.
The process that I proposed therefore includes only the essential steps with responsible stakeholders assigned to them.
