The Pivotal Challenge in Building the Design System

01.06.2023 / Ven Chen

In the vast, complex world of design, we often hear the phrase, “Don’t reinvent the wheel.” It’s a poignant reminder that not everything requires innovation from scratch. Instead, it’s often about refining what’s already there. Such was the challenge I faced when embarking on the creation of a design system for the Sanoma Ad Manager.

Contextualizing the Sanoma Ad Manager
Sanoma Ad Manager wasn’t a fresh slate. Its design has been in place, serving its users, and while it didn’t have a structured design system supporting it, its existing design was functional and familiar to its users. Completely overhauling the design was not only potentially detrimental to user familiarity but also a hefty cost proposition for the client.
 
The Challenge at Hand
The most significant challenge was finding that sweet spot – the balance between creating a more structured and efficient design system without making sweeping changes that would disrupt the user experience or cost our client in terms of time and resources. The key was in being able to differentiate between what needed to be retained and what needed to be enhanced or reimagined.
 
The Component Audit 
The foundational step to navigating this challenge was the component audit. This was an exhaustive, detailed assessment of every design component present in the existing Sanoma Ad Manager. From buttons to navigation bars, every element underwent scrutiny.
The goal was twofold:
  1. Identify components that fit seamlessly into the envisaged design system and were consistent with the desired user experience.
  2. Spot components that were outliers – those that either did not fit the desired system in their current state or could be optimized further for better usability.
Benefits of the Component Audit
The audit wasn’t just about pinpointing which elements fit the bill and which didn’t. It had broader implications:
Consistency and Scalability: By reusing and refining the best of the existing components, we ensured that the design system was consistent. Moreover, this approach made the system more scalable. As Sanoma Ad Manager evolves, the system can now accommodate new components while maintaining design and functional consistency.
Resource Management: By not over-reinventing, we significantly reduced design, development, and testing hours, leading to substantial savings in terms of time and costs.
 
User Familiarity: For products that have a longstanding user base, a sudden and radical design change can be jarring. By retaining key components, we ensured that the learning curve for existing users was minimized.
 
Let’s delve deeper into how I conducted this comprehensive audit.
  1. Cataloging Existing Components
    Our first task was to list every design component in the Sanoma Ad Manager. No component, however minor, was overlooked. Whether it was a primary navigation button or a seldom-used icon, everything was accounted for. We used collaborative tools like Figma and InVision to visually map out and categorize these components, ensuring that the entire team had a clear view of the current design landscape.
  2. Classifying Components
    After cataloging, we classified components based on their functionality and usage frequency. Grouping them into categories like “Navigation,” “User Interaction,” “Feedback,” etc., helped us understand patterns and inconsistencies.
  3. Assessing Aesthetics and Function
    Each component was then evaluated on two primary fronts: aesthetic appeal and functional efficiency.
    Aesthetic Appeal: Does the component align with the desired look and feel of the new design system? Does it have contemporary design attributes, or does it feel dated?
    Functional Efficiency: Beyond just looking good, does the component serve its purpose effectively? Is it intuitive for users? Does it enhance or hinder the user experience?
  4. User Feedback Loop
    To ensure we were on the right track, we sought feedback from actual users. This involved creating prototype screens with existing components and gathering insights on their usability and visual appeal. Direct feedback from end-users provided invaluable data, highlighting components they found most and least effective.
  5. Decision Time: Keep, Refine, or Redesign
    Based on our assessments and user feedback, decisions were made for each component:
    Keep: Components that met the desired criteria both in design and functionality were marked for retention without modification.
    Refine: Some components had the right foundation but needed tweaks for optimal performance. These components were enhanced to fit into the new design system better.
    Redesign: Components that neither met the aesthetic requirements nor served their functional purpose effectively were flagged for a complete overhaul.
  6. Documentation and Rationale
    Every decision made during the audit was meticulously documented. This documentation wasn’t just a list but a detailed rationale for each choice, ensuring that team members and stakeholders understood the “why” behind each decision. This made the transition to the new design system more transparent and justifiable.
 
Conclusion
Building a design system for Sanoma Ad Manager was more than just a design task; it was a strategic endeavor. It demanded a keen understanding of the product’s history, user expectations, and client objectives. The component audit became our north star, guiding our decisions and ensuring that the final design system was not just visually appealing, but also functional, efficient, and in line with the essence of Sanoma Ad Manager.
 
As designers, our job isn’t always to create something entirely new. Sometimes, it’s about recognizing and appreciating what’s already there, understanding its value, and integrating it into the new narrative we are trying to weave. And that’s exactly the path we treaded with Sanoma Ad Manager’s design system.