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 full-size slide

  2. Where we started

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Where we are now

    View full-size slide

  8. Surveys Personas

    View full-size slide

  9. Surveys Personas
    Empathy maps

    View full-size slide

  10. Surveys Personas
    Scenario maps
    Empathy maps

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. GUI kit versioning

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. What’s next

    View full-size slide

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

    View full-size slide

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

    View full-size slide