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

Chicago Roboto - Design Develop Deploy!

Chicago Roboto - Design Develop Deploy!

Yash Prabhu

April 21, 2017
Tweet

More Decks by Yash Prabhu

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Design + Dev =
    Product

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 2017
    TIMELINE I Boomerang
    @swnmn I @yashvprabhu

    View full-size slide

  11. MORE PRODUCTS

    View full-size slide

  12. MORE PRODUCTS
    MORE TEAM MEMBERS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. MODULARIZATION:DESIGN I Common Requirements

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

  44. Thank You
    @swnmn I @yashvprabhu

    View full-size slide