Skip to content
    DG logo
    Wow Design System

    Wow: Building a Design System Across a Multi-Product Platform

    How I contributed to Prezi's first shared design foundation - tokens, components, and cross-product consistency across three products and millions of users.

    Role

    Contributing Senior Product Designer

    Timeline

    2021 – 2022

    Scope

    Token system · Component library · Cross-product consistency

    Team

    VP of Design · DS Manager · Engineering · Brand

    Key results

    -0%

    Handoff time

    0

    Products unified

    Overview

    Three products, zero shared foundation

    Before Wow existed, Prezi's three products - Present, Video, and Design - each had their own visual patterns and components.

    The cost was felt everywhere: designers duplicated work across products, engineers implemented inconsistent UI, and new features took longer because there was no shared starting point.

    Wow started as a system for Prezi Video. New platform gave us the opportunity to rewrite the components using new codebase and scale it to the entire product range. What began as a Video-specific foundation was eventually expanded into a shared backbone for Present, Video, and Design, covering the full end-to-end platform experience.

    What I worked on

    Tokens and components, simultaneously

    Token layer

    My contribution spanned two layers of the system simultaneously.

    On the token side, I worked with the design team on the foundational decisions - colour, typography, spacing, and elevation - that needed to hold up across three products with different visual contexts.

    Colors

    Grey

    50#F6F7F9
    100#ECEDEF
    200#DFE1E4
    300#D3D6DA
    400#B1B8BE
    500#929AA3
    600#747C87

    Red

    50#FFF0F2
    100#FFD7DC
    200#FFAEB9
    300#FF7D91
    400#FA375A
    500#C8002D
    600#7D002D

    Orange

    50#FFFEC3
    100#FFF00A
    200#FFC805
    300#FF9105
    400#F05A0F
    500#C83205
    600#801705

    Green

    50#F0FFCD
    100#BCFC8F
    200#85E870
    300#44CB67
    400#1AA651
    500#007850
    600#004F3F

    Teal

    50#E1FFFA
    100#9BF5F5
    200#5FE1E1
    300#00C6C6
    400#00A0AA
    500#00717F
    600#004B64

    Blue

    50#E6F5FF
    100#BBE8FF
    200#82C8FF
    300#50AAFF
    400#3181FF
    500#1E55EB
    600#192D9B

    Purple

    50#FFEBFF
    100#FFC8FF
    200#FF96FC
    300#FD6AFA
    400#E628E1
    500#A409B8
    600#62008F

    Icons

    Property (Selected examples)

    Add
    Add
    AddSlide
    AddSlide
    AlignCenter
    AlignCenter
    AlignConte…
    AlignConte…
    AlignConte…
    AlignConte…
    AlignConte…
    AlignConte…
    AlignConte…
    AlignConte…
    AlignConte…
    AlignConte…
    AlignConte…
    AlignConte…
    AlignJustify
    AlignJustify
    AlignLeft
    AlignLeft
    AlignRight
    AlignRight
    AverageHei…
    AverageHei…
    AverageWid…
    AverageWid…
    Bold
    Bold
    BorderColor
    BorderColor

    Content (Selected examples)

    Animation
    Animation
    ArrowsAnd…
    ArrowsAnd…
    AssetError
    AssetError
    Audio
    Audio
    BrandKit
    BrandKit
    Camera
    Camera
    CameraOff
    CameraOff
    Caption
    Caption
    Charts
    Charts
    Chat
    Chat
    Comment
    Comment
    Docs
    Docs
    Draft
    Draft
    Equations
    Equations
    FadeIn
    FadeIn
    FadeOut
    FadeOut

    Action (Selected examples)

    AddUser
    AddUser
    Bookmark
    Bookmark
    Clicker
    Clicker
    Download
    Download
    Export
    Export
    FolderWith…
    FolderWith…
    GoLive
    GoLive
    Heart
    Heart
    HeartBroken
    HeartBroken
    HeartOutline
    HeartOutline
    HiddenNew
    HiddenNew
    Import
    Import
    Link
    Link
    LivePrezi
    LivePrezi
    Login
    Login
    Logout
    Logout

    Component library

    Design system avatar
    Slide container component

    On the component side, I contributed to building and documenting components from the core library: buttons, inputs, cards, navigation patterns, with production-ready handoff specifications. The design-to-engineering gap was one of the most expensive problems in the old system.

    Components existed in Figma but weren't being implemented consistently in code because the specs weren't precise enough to remove ambiguity. I treated every component as a joined effort between design and engineering.

    Notification variant 1
    Tooltip variant 1Tooltip variant 2Tooltip variant 3
    Navbar variant 1Navbar variant 2Navbar variant 3Navbar variant 4
    Input field state 1Input field state 2Input field state 3Input field state 4
    Button variant 1Button variant 2Button variant 3Button variant 4
    The hardest problem

    Legacy adoption

    Getting existing products to adopt new components was the real challenge.

    The old codebase had deeply nested, product-specific code with no token layer - values were baked directly into components. Swapping in new tokens wasn't a find-and-replace operation. Adoption was slower than the system's quality warranted - not because teams didn't want to use it, but because the technical migration cost was real and had to be sequenced carefully alongside live product work.

    I was tasked with making the new components precise enough that engineers could trust them without negotiation. The goal was to make adopting Wow easier than continuing to maintain the legacy system.

    Impact

    Faster launches, fewer back-and-forths

    Prezi canvas editor

    40%+ faster handoff

    Design-to-dev handoff dropped by more than 40% compared to the pre-Wow baseline. Engineers had a shared reference they could trust, which meant fewer rounds of back-and-forth clarification before build could start.

    Shorter review cycles

    Design review cycles shortened. With a shared component language in place, reviews shifted from resolving inconsistencies to evaluating decisions - a fundamentally different conversation that moved faster.

    Higher designer velocity

    Designer velocity improved across the board. Fewer decisions per screen, less time spent recreating solved problems, and faster onboarding for anyone new to the product because the system carried the baseline.

    Full platform migration

    All three products - Present, Video, and Design - migrated to Wow. What started as a Video-specific foundation became the shared language for Prezi's entire platform.

    What I learned during this project

    Systems thinking over component craft

    Adoption matters more than architecture.

    A design system is only as good as its adoption rate. The most architecturally elegant token structure means nothing if engineers can't implement it or designers route around it. The hardest design problem in system work isn't the components - it's the migration path from whatever existed before.

    Interested in
    working together?

    Open to Senior and Lead roles in product-led teams. Especially interested in AI, SaaS B2B products, and 0-1 work.

    LinkedInResume