Role:
Design Lead
Principal Designer
2022-2023, 16 weeks (2 phases)
Design Lead
Principal Designer
2022-2023, 16 weeks (2 phases)
CNN | Vossi Design System
Evolve and scale CNN’s Design language to operate as an internal product that serves all digital properties by enabling teams with a flexible and up-to-date toolkit to enable greater consistancy, flexibility and efficency.
Evolve and scale CNN’s Design language to operate as an internal product that serves all digital properties by enabling teams with a flexible and up-to-date toolkit to enable greater consistancy, flexibility and efficency.
The challenge:
CNN entered a familiar intersection many companies undergoing several aquistions and organizational change; a plethora of inconsistent experiences across their core experience, different practices in both design and engineering, and a struggling DesignOps team under constant pressure to deliver without the correct structure or resources.
CNN entered a familiar intersection many companies undergoing several aquistions and organizational change; a plethora of inconsistent experiences across their core experience, different practices in both design and engineering, and a struggling DesignOps team under constant pressure to deliver without the correct structure or resources.
Approach:
Through a series of 35 interviews across product, engineering and design, we learned that, for an editorial organization like CNN that moves at the speed of news, there were particular pain points in discoverability, transparency, and consistency when it came to building products and stories—they needed a flexible design system supported by guardrails. We needed to re-establish a governance model that made sense and could scale, while giving them the tools they needed to deliver.
Through a series of 35 interviews across product, engineering and design, we learned that, for an editorial organization like CNN that moves at the speed of news, there were particular pain points in discoverability, transparency, and consistency when it came to building products and stories—they needed a flexible design system supported by guardrails. We needed to re-establish a governance model that made sense and could scale, while giving them the tools they needed to deliver.
Outcome:
In tight collaboration with stakeholders, we created 3 key takeway deliverables:
In tight collaboration with stakeholders, we created 3 key takeway deliverables:
- A governance and operations playbook that outlined how teams could use and contribute back to the DLS
-
Figma libraires with built-in auto-layout, variants, and design tokens
- UI token toolchain and custom Figma plug-in that automated and translated tokens into live working code
Governance & operations model:
We adopted industry best practices and combined them with current CNN team rituals to avoid disruptive changes. We focused on optimizing the flow, clarifying roles and responsibilities, and building in additional layers of transparency and communication.
We adopted industry best practices and combined them with current CNN team rituals to avoid disruptive changes. We focused on optimizing the flow, clarifying roles and responsibilities, and building in additional layers of transparency and communication.
Providing tools to support the model:
We built custom tools to unlock a seemless workflow from design to code with our design token service software. The token service converts design tokens from Figma into platform specific coded packages via plugin.
We built custom tools to unlock a seemless workflow from design to code with our design token service software. The token service converts design tokens from Figma into platform specific coded packages via plugin.
Providing Guidance:
Upon handing off the work, we made a series of Loom videos providing guidance on the design system to the Vossi team at CNN.
Upon handing off the work, we made a series of Loom videos providing guidance on the design system to the Vossi team at CNN.
