The Evolution of Documentation in NASDAQ

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