Chicago Roboto - Design Develop Deploy!

http://chicagoroboto.com/sessions/design-develop-deploy/

Video: https://vimeo.com/217561013

Transcript

1. Design Develop Deploy!
   Our Journey & Process to Build Better Products Together
   Chicago Roboto 2017
   #chicagoroboto
   

   View Slide

2. View Slide

3. Yash Prabhu
   Software Engineer, Android Lead
   @yashvprabhu, yprabhu.com
   Jessica Moon
   Sr. Interaction Designer
   @swnmn
   Image credit: androidify.com
   MISSION
   

   View Slide

4. Design + Dev =
   Product
   

   View Slide

5. 2011
   TIMELINE I The Beginning
   @swnmn I @yashvprabhu
   

   View Slide

6. 2013
   TIMELINE I DramaFever 2.0
   @swnmn I @yashvprabhu
   

   View Slide

7. 2014
   TIMELINE I Partnership with AMC
   @swnmn I @yashvprabhu
   

   View Slide

8. 2014
   TIMELINE I Partnership with AMC
   @swnmn I @yashvprabhu
   

   View Slide

9. 2015/2016
   TIMELINE I Material Design
   @swnmn I @yashvprabhu
   

   View Slide

10. 2016
    TIMELINE I Warner Archive
    @swnmn I @yashvprabhu
    

    View Slide

11. 2017
    TIMELINE I Boomerang
    @swnmn I @yashvprabhu
    

    View Slide

12. MORE PRODUCTS
    

    View Slide

13. MORE PRODUCTS
    MORE TEAM MEMBERS
    

    View Slide

14. MORE PRODUCTS
    MORE TEAM MEMBERS
    SHORTER TIMELINES
    @swnmn I @yashvprabhu
    

    View Slide

15. View Slide

16. WE NEED
    TO TALK
    Image credit: androidify.com
    to our
    designers
    @swnmn I @yashvprabhu
    to our
    developers
    

    View Slide

17. Designers
    Works for all platforms
    Translating spec into design
    Colors/Dimensions/Fonts
    Journey Map
    Screen sizes/densities
    Breakpoints
    Developers
    CONSTRAINTS
    @swnmn I @yashvprabhu
    

    View Slide

18. Communication
    OUR JOURNEY
    Process
    Modularization
    @swnmn I @yashvprabhu
    

    View Slide

19. Bus Factor
    COMMUNICATION:DESIGN
    @swnmn I @yashvprabhu
    

    View Slide

20. COMMUNICATION:DESIGN I Design Tools
    Design
    Tools
    @swnmn I @yashvprabhu
    

    View Slide

21. GIPHY
    COMMUNICATION:DESIGN I Design Tools
    GIPHY
    vs.
    

    View Slide

22. COMMUNICATION:DESIGN I Guide to Invision @swnmn I @yashvprabhu
    

    View Slide

23. COMMUNICATION:DEV I Design Tools @swnmn I @yashvprabhu
    

    View Slide

24. Collab
    Tools
    COMMUNICATION:DEV
    @swnmn I @yashvprabhu
    

    View Slide

25. COMMUNICATION:DEV I Terminology
    Terms
    wrap_content match_parent
    @swnmn I @yashvprabhu
    

    View Slide

26. Communication
    Process
    Modularization
    OUR JOURNEY
    @swnmn I @yashvprabhu
    

    View Slide

27. Project
    Requirements
    PROCESS
    Designs
    Stylesheet
    Journey Map
    Breakpoints
    Tech
    API calls
    Tech Stack
    Timeline
    @swnmn I @yashvprabhu
    

    View Slide

28. PROCESS:DEV I Tech Handbook @swnmn I @yashvprabhu
    

    View Slide

29. PROCESS:DESIGN I Android Runbook @swnmn I @yashvprabhu
    

    View Slide

30. Agile
    processes
    PROCESS:DEV
    @swnmn I @yashvprabhu
    

    View Slide

31. Communication
    Process
    Modularization
    OUR JOURNEY
    @swnmn I @yashvprabhu
    

    View Slide

32. MODULARIZATION:DESIGN I Stylesheets @swnmn I @yashvprabhu
    

    View Slide

33. MODULARIZATION:DESIGN I Components @swnmn I @yashvprabhu
    

    View Slide

34. Pressed
    Primary
    @swnmn I @yashvprabhu
    MODULARIZATION:DEV I Components
    

    View Slide

35. MODULARIZATION:DESIGN I Common Requirements
    

    View Slide

36. Default - portrait, landscape
    MODULARIZATION:DEV I Breakpoints @swnmn I @yashvprabhu
    

    View Slide

37. 720 - portrait, landscape
    MODULARIZATION:DEV I Breakpoints @swnmn I @yashvprabhu
    

    View Slide

38. 1024 - portrait, landscape
    MODULARIZATION:DEV I Breakpoints @swnmn I @yashvprabhu
    

    View Slide

39. @swnmn I @yashvprabhu
    MODULARIZATION:DEV I Breakpoints
    

    View Slide

40. Image credit: developer.android.com,
    jenkins.io, circleci.com
    @swnmn I @yashvprabhu
    MODULARIZATION:DEV I Modules
    

    View Slide

41. Takeaways
    THE ROAD AHEAD
    Willingness to learn
    Empathy & Patience
    Processes evolve
    @swnmn I @yashvprabhu
    

    View Slide

42. Challenges
    THE ROAD AHEAD
    How do we update a spec
    when it has changed?
    @swnmn I @yashvprabhu
    

    View Slide

43. Challenges
    THE ROAD AHEAD
    How do we update a spec
    when it has changed?
    How do we add agile
    processes for designers?
    @swnmn I @yashvprabhu
    

    View Slide

44. Challenges
    THE ROAD AHEAD
    How do we update a spec
    when it has changed?
    How do we add agile
    processes for designers?
    What if we’re a small team?
    @swnmn I @yashvprabhu
    

    View Slide

45. @swnmn I @yashvprabhu
    tech.dramafever.com
    

    View Slide

46. Thank You
    @swnmn I @yashvprabhu
    

    View Slide