Convictional was in need of consistent visual and experiential design standards that streamlined the design and development processes, reduced inefficiency and inconsistency, and captured the essence of the brand.
When I joined Convictional shortly before their Series B announcement, their product UI was an amalgamation of various UI elements taken from 3 different UI kits used to build and ship features.
In the company’s early growth stages it made sense to enable teams to quickly deliver impactful features on smaller time scales but without having design direction or guidelines to help developers stay consistent with each other, the product became riddled with inconsistent UI patterns that created multiple issues such as:
It was clear the team was missing design guidance and struggled with alignment on how to implement a cohesive visual product experience. So, as the founding product designer, one of my primary roles was to establish the company’s design principles that would ultimately lead to more engaging and cohesive designs, establish guidelines, processes and alignment, and dedicate a proactive approach to shaping up the future of the product.
Correct product UI inconsistencies to improve user trust.
Establish usage guidelines and find cross-functional alignment for a more structured product building process.
Speed up product development cycles and help reduce technical debt.
Reenforce brand awareness by more closely aligning product to marketing and brand.
Improve and promote accessibility by correcting issues in accordance with WCAG guidelines.
Exist to improve design and development efficiency.
Maintain alignment with the brand paying attention to style, behavior, and voice.
Only include what’s relevant, omit objects that are not used or needed.
Elevate consistency and improve quality.
Solve the easy problems so products can solve problems more easily.
Given that the Convictional product was already fairly mature in regard to the usage of various UI elements, I knew an extensive audit would be needed to identify what was currently used in production. This audit aimed not only to assess the current production landscape but also to delve into the intricate details, states, scope, and complexity of the UI elements that were already in use.
By embarking on this audit, I sought to gain a deep understanding of the existing design ecosystem, paving the way for informed decision-making, and effective component creation and implementation.
I spent roughly a week capturing every product screen and documenting specific instances of each component I could find. I made notes about states, variations, interaction principles and tucked the findings away until I was ready to design a reimagined asset.
The creation of Convictional’s design system would be my first endeavor in creating a comprehensive, large scale system from scratch. My previous experiences leveraged kits such as Material Design to establish foundations while allowing me flexibility to customize each component to find the likeness of the brand. However, with the current challenge at hand, I was acutely aware of the considerable magnitude of the task ahead. As such, I was inclined to invest dedicated time in conducting thorough research to explore the best practices that encompassed:
During my interview process before coming onboard, one of the standout things about Convictional that drew me into the organization was the execution of Ben Lidgard's brilliant work on the newly revamped marketing site. He had managed to create a visually compelling, interesting, and unique visual language that supported the mission and essence of the brand: connecting the world’s trading partners.
It was of paramount importance to draw upon his work to inspire, inform, and translate the existing visual language into a product UI kit that maintained a meaningful relationship to the core brand values. In this process, I began by narrowing in on just what exactly that essence was by studying a brand positioning survey exercise the team completed to identify key descriptors.
In my experience, every visual element has the unique ability to convey specific, intangible brand characteristics that encapsulate emotional and visceral responses. After a further study of the brand, some key thematic takeaways I wanted to maintain were:
While Brad Frost’s canonical work on atomic design has inspired numerous generations of design system taxonomies, I started questioning, as others have done, “what exactly IS an organism?”. Or, “how do I differentiate between molecules and atoms?”. “How do I create a language around logical groupings that scale and inherently communicate intention without additional abstraction?"
Along the way I stumbled upon Hannah Heinson’s brilliant write up reapproaching chemistry and design metaphors with Atomic 2.0 and, while this approach still maintains some ambiguity because of the abstraction layer, we found it somewhat easier to digest and land on consensus of common language between design and engineering.
However, after much debate with my lead engineer and many hours of lost sleep pontificating the meaning of design life, I arrived at the conclusion that, well for me, it just depends on how you choose to define these things for yourself. We landed somewhere in the middle of this debate without the chemistry taxonomic metaphors and, while our definitions provided some amount of internal clarity, I can’t guarantee that I would reuse this approach again. We still found ourselves asking, “What’s a component? What’s a block?” etc, without the need for a legend or key.
Or.. so I thought. My initial attempt at creating the Convictional Design System or, “CDS” as it was colloquially referred to, was to combine all design tokens, assets, components, patterns, and blocks into one “mega-library”.
One primary reason for doing so was that I had hoped to make it easy for anyone to come into the design system and quickly ramp up on component and style usage. Additionally, I hoped to streamline workflows by simplifying this as much as possible but what I didn’t realize at the time was how resource intensive this would be on Figma and my laptop.
Including hundreds of objects in one file (looking at you, icons) made it difficult to navigate, create, and modify objects when file performance slowed to a crawl. As I neared the end of Phase I, I realized I needed a better approach to account for file limitations yet one that made it easy for library consumption.
An additional learning moment came when I realized my initial structure wouldn’t support multiple products, marketing or API documentation in an elegant way as these were separate digital entities using different technology stacks.
I needed a way to establish a core library of design primitives and tokens that would propagate to each specific use case in much the same way a mature design organization would handle working on multiple products.
My V2 approach to this would follow a more robust hierarchy of library classifications as follows:
Luckily, I had the luxury of working on a small team with relatively few screens in our product so making breaking file changes wasn’t a great concern. I managed to find ways to cut components out of my existing library, paste them into the new libraries, publish changes, and maintain component references without disrupting other designers' work. I also was able to configure which libraries to consume in new product and marketing design files to eliminate the guesswork of choosing the appropriate set of design styles and components.
In taking on such a large design system project, I decided to strictly adhere to the notion of not reinventing the wheel. I knew there were a ton of existing patterns, craftily executed hundreds of times before me. Since our team culture emphasized focused intensity, I didn't see purpose in pushing boundaries or spending time researching all the implications of what a Button could do. I wanted to get brand relative UI components to product quickly so I made a checklist of things to consider:
Net new components or components with a deeper subset of interaction design considerations or use cases needed a more thorough process to ensure a successful outcome. In addition to the above process, I made sure to spend time researching other design systems or component work to examine best practices and applications.
Components in a design system are only as good as the documentation and guidelines you create and disseminate to the team. Its value lies not only in the clarity it bestows upon designers but also in the empowerment it offers developers, product managers, and stakeholders. With each principle and component articulated, the documentation removes ambiguous interpretations and expedites decision-making, bolstering efficiency and diminishing the risk of design divergence.
.png)
Like any good project managing time, resources, constraints, and risks needs careful planning to eliminate undue expenditures. Since a design system is an atomic system of interdependent tokens and objects, it made sense to scale up vertically from a base layer of dependencies. In an effort to create an efficient product adoption workflow, I created a phased project approach to reduce technical risk.
To monitor our team’s progress, I also created a simple Kanban board so we could identify where in the process each component was at. This helped communicate to leadership where the adoption project stood and allowed us to effectively track and handoff component creation. It also allowed me to ensure I was working ahead of engineering to help prevent any roadblocks from occurring.
Consistency is King: Through countless iterations, I've learned that consistency isn't just a design principle – it's the cornerstone of a remarkable user experience. A design system isn't about stifling creativity; it's about providing a cohesive framework that empowers designers to innovate within well-defined boundaries. By establishing consistent visual elements, typography, and interactions, we create a seamless journey for users, enhancing usability and brand recognition. Think of it as the rhythm that ties all design components together into a symphony of familiarity.
Flexibility Breeds Resilience: While consistency is vital, I've also discovered that a design system should have the elasticity to adapt to various contexts. Building in modularity and flexibility allows us to cater to diverse platforms, devices, and user needs without compromising the brand's essence. This means considering components that can be combined, extended, or adjusted to suit different scenarios. It's about giving designers the tools to create without constraints, while maintaining the system's core identity.
Continuous Evolution: In the dynamic landscape of design, stagnation is the enemy. Through experience, I've realized that a design system is a living organism that demands constant nurturing. Regular updates, feedback loops, and staying attuned to industry trends are essential. Just as a cityscape evolves with new buildings, a design system should incorporate fresh patterns and interactions to stay relevant. By fostering a culture of ongoing refinement, we ensure that the design system remains a wellspring of inspiration and guidance for the entire design team.
