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

The Evolution of Documentation in NASDAQ

The Evolution of Documentation in NASDAQ

Adekunle Oduye

May 14, 2017
Tweet

More Decks by Adekunle Oduye

Other Decks in Design

Transcript

  1. The evolution of
    documentation in NASDAQ
    Adekunle Oduye
    @adekunleoduye

    View Slide

  2. My name is...
    ● Product Designer at NASDAQ
    ● Co-organizer at Gotham Sass & SassConf
    Adekunle Oduye
    (Add-eh-koon-lay Oh-due-yay)

    View Slide

  3. What I hope everyone will learn:
    ● How to write useful documentation
    ● How docs can increase the usage of a design system

    View Slide

  4. Where we started:
    Pattern Library

    View Slide

  5. What was the purpose of the Pattern Library?
    ● Was created for GCS design team
    ● Used for creating front-end prototypes

    View Slide

  6. How the Pattern Library was use
    Pattern
    Library
    Designer Designer
    Designer
    Designer
    Designer
    GCS Product Design Team

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. Problems with our Pattern Library
    ● Misuse of patterns
    ● Implementation wasn’t intuitive
    ● Too many pattern variations

    View Slide

  11. Where we ended up:
    UI Guidelines

    View Slide

  12. How we wanted UI Guidelines to be used
    UI
    Guidelines
    GCS
    IRI
    GNW
    DOI
    NSS

    View Slide

  13. UI Guidelines Team Breakdown
    UI Guidelines
    Framework Docs
    Creative

    View Slide

  14. I wasn’t too excited about working on docs

    View Slide

  15. Documentation Process

    View Slide

  16. View Slide

  17. Documentation Process

    View Slide

  18. Outline for creating documentation:
    ● Overview
    ● Implementation
    ● Usages
    ● Visual Details *
    ● Dos & Don’ts *
    * These aren’t needed for all patterns

    View Slide

  19. View Slide

  20. View Slide

  21. UI Guidelines: Buttons

    View Slide

  22. UI Guidelines: Buttons

    View Slide

  23. UI Guidelines: Buttons

    View Slide

  24. UI Guidelines: Alerts

    View Slide

  25. View Slide

  26. Using the same process
    for our charting library

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. “As instructions are to a
    product, documentation is to
    design systems”

    View Slide

  33. A design system is an
    educational tool

    View Slide

  34. In Summary:
    ● Good docs contain details about implementation and usage
    ● Have others within the company help when creating docs
    ● Test out your documentation

    View Slide

  35. Thanks for listening!!!!
    Adekunle Oduye
    @adekunleoduye
    www.adekunleoduye.com

    View Slide