Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NYDSC Meetup | Dec. 2016 | Union: The Knot's New Design System

silviatc
December 16, 2016

NYDSC Meetup | Dec. 2016 | Union: The Knot's New Design System

Silvia Tueros-Cossio (Senior Product Designer) and Phil Kelly (Senior Engineer) describe where they started, where they are now, and what's next with The Knot's new design system, Union.

silviatc

December 16, 2016
Tweet

Other Decks in Technology

Transcript

  1. Union: The Knot’s
    New Design System
    Silvia Tueros-Cossio, Senior Product Designer
    Phil Kelly, Senior Engineer

    View Slide

  2. Where we started

    View Slide

  3. We help couples (and everyone who loves them!) navigate and enjoy life’s biggest moments together.
    Perez Photography, Shang Chen Photography, Thinkstock

    View Slide

  4. View Slide

  5. We saw it as a project, not a product.
    No dedicated support + No iterations = No cohesive design language.

    View Slide

  6. UNION
    Unified Information Architecture
    Consistent Design Language
    Consistent UX Patterns
    Consistent Voice and Tone

    View Slide

  7. UNION
    Unified Information Architecture
    Consistent Design Language
    Consistent UX Patterns
    Consistent Voice and Tone

    View Slide

  8. Where we are now

    View Slide

  9. Surveys

    View Slide

  10. Surveys Personas

    View Slide

  11. Surveys Personas
    Empathy maps

    View Slide

  12. Surveys Personas
    Scenario maps
    Empathy maps

    View Slide

  13. http://bit.ly/salesforce-team-model
    http://bit.ly/eightshapes-team-models
    The Federation

    View Slide

  14. Component cut-up workshop
    http://bit.ly/component-cut-up-workshop

    View Slide

  15. Airtable!
    http://bit.ly/content-display-patterns

    View Slide

  16. GUI kit versioning

    View Slide

  17. Documentation powered by Jekyll
    https://xogroup.github.io/union/

    View Slide

  18. Managing Sass with NPM packages
    1) Packages are published to an npm repo which apps include
    in package.json and bundle as they see fit (probably
    webpack).
    2) Simpler monolithic structure similar to ant.design
    https://github.com/ant-design/ant-design

    View Slide

  19. What’s next

    View Slide

  20. http://bit.ly/union-kanban

    View Slide

  21. Thank you!
    Silvia Tueros-Cossio
    @silviatc
    Phil Kelly
    @chatche

    View Slide