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.

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