A new brand identity and design system
New teams bring new possibilities, but without structure, they can also bring chaos and confusion.
This is my story of establishing Off The Record’s first design system as the company’s founding Product Designer.
My role
In early 2024, I moved from the Customer Service & Operations team to become the company’s first ever Product Designer. This design system project began in May of 2024 and continues to the current day. I worked on this project primarily with my co-designer Kristina Beliaieva, consulting closely with our CEO and founder Alex Guirguis, and CTO and co-founder Mark Mikhail.
I was responsible for facilitating the exploration and adoption of new brand typography, colors, and general style, as well as technical components such as input fields, buttons, interaction states, and modals.
THE PROBLEM
Design chaos in a startup
As the company's first design team, we were starting our design operations from scratch. The lack of consistency and outdated style guide across our digital products led to confusion among users and hindered our design and development processes. We identified a clear need for a cohesive design approach. To address these challenges, I pitched and facilitated the launch of the company's first comprehensive design system in combination with a branding refresh.
OBJECTIVES
Build a brand we’re proud of
The primary objectives of the project were to
RESEARCH & PLANNING
What do top companies do?
To begin the process, my team and I conducted research to understand how best to go about this task, which included:
DEVELOPMENT PROCESS
Building a design system MVP
Once the project was greenlit, I implemented a structured process:
👥 Established a Core Team: I assembled a cross-functional team comprising Kristy and I as co-designers, our CTO, and our CEO (acting as Head of Product) to collaborate on the design system.
🚘 Created Brand Identity: We defined our brand identity to help guide our decisions and maintain consistency throughout the system.
🧩 Component Library Development: The team worked to create an MVP library of reusable components, including buttons, inputs, modals, and more, ensuring accessibility and responsiveness.
📄 Documentation: We developed comprehensive documentation detailing usage guidelines and best practices both for designers and developers to consistently implement the components.
IMPLEMENTATION
Communicate & iterate
The launch strategy was critical to ensure smooth adoption
RESULTS
Old design
Outdated style
Inconsistent icons
RESULTS
New design
Consistent elements
Fresh colors & styles
OUTCOMES
From chaos to cohesion
The successful launch of the design system resulted in
REFLECTION
Proactive communication is key
The biggest mistake in rolling out the design system was not involving the development team closely enough from the beginning. I, for example, made an assumption about how our developers implement icons from our designs, and after a couple of projects with misaligned icons, we realized we needed to realign our entire icon set to fit the technical requirements of our development team. This caused extra time, work, and confusion. If I were to redo the project, I would put more energy into:
💬 Proactive communication with developers about the design system.
🔁 Establishing a synchronous feedback loop with developers early on.
This would have helped to overcome misunderstandings and technical setbacks and address missed use cases earlier on.
We've taken steps to improve, and communication between design and development is already much better.