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 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