Close the Loop: Designing and Developing Together (Droidcon NYC, September 2016)

(Co-presented with Zack Simon. Will add link to video when posted.)

Whether you work as a developer or designer at a product company, as an independent contractor, or as part of a team of consultants, you will leave this session with new techniques to streamline your “dev+sign” process, making it a more enjoyable and effective experience for all.

At Big Nerd Ranch we’ve forged a process where Android developers and designers work hand-in-hand throughout the life of a project to support each other in creating the most awesome Android app possible. We will walk you through real examples from the trenches (names will be changes to protect the innocent!) and talk about what we learned from our mistakes.

From presenting a united front in advocating for standard Android conventions, to creating a shared language for common elements to reduce code redundancy and prevent a rat’s nest of styles, we will share details about processes we follow to solve problems we have faced in creating apps for clients.

Transcript

1. Close the Loop
   Designing and Developing Together
   Kristin Marsicano
   @kristinmars
   Zack Simon
   @zackiets
   Big Nerd Ranch
   @bignerdranch
   

   View Slide

2. Well, what’s the problem?
   

   View Slide

3. Expectation Reality
   

   View Slide

4. We’re going to take you
   on a journey...
   

   View Slide

5. !
   … and we’ll encounter
   issues.
   

   View Slide

6. Kickoff Discovery Sprint 1 Sprint 2
   

   View Slide

7. Kickoff Discovery Sprint 1 Sprint 2
   

   View Slide

8. What’s a project kickoff meeting?
   Who does what? When do
   things happen?
   What tools?
   

   View Slide

9. !
   Jump right in?
   

   View Slide

10. Kickoff Discovery Sprint 1 Sprint 2
    

    View Slide

11. Mapping it out
    

    View Slide

12. Kickoff Discovery Sprint 1 Sprint 2
    

    View Slide

13. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro
    

    View Slide

14. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro
    

    View Slide

15. !
    What do devs do
    without designs?
    

    View Slide

16. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro
    

    View Slide

17. Wireframing Login
    

    View Slide

18. Creating a Style Guide
    Atoms Molecules Organisms
    Source: Brad Frost
    

    View Slide

19. Atoms
    

    View Slide

20. Molecules
    

    View Slide

21. Annotating Molecules
    

    View Slide

22. Annotating Wireframes
    

    View Slide

23. Style Guide
    Organisms are made of molecules are made of atoms
    

    View Slide

24. !
    So designs are ready
    for stakeholder approval?
    

    View Slide

25. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro
    

    View Slide

26. View Slide

27. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro
    

    View Slide

28. Sprint 1
    Stakeholder
    Review
    Develop Review Design
    Sprint Planning
    Design Login
    Developer Chores
    Sprint Retro
    

    View Slide

29. Kickoff Discovery Sprint 1 Sprint 2
    

    View Slide

30. Sprint 2
    Stakeholder
    Review Design Signup
    Sprint Planning
    Design QA Build
    Sprint Retro
    Develop Review Design
    Develop Login
    

    View Slide

31. User Stories and Design
    User can see login screen
    when they launch the app.
    User can see error text when
    entering invalid email.
    User is logged into app after
    entering valid credentials and
    pressing the Login button.
    

    View Slide

32. What makes a good user story?
    

    View Slide

33. Labels and Epics
    

    View Slide

34. “User sees login screen when they launch the app.”
    Preconditions/Test Steps:
    1. Make sure user is logged out
    2. Click app icon from launch screen
    

    View Slide

35. “User sees login screen when they launch the app.”
    Preconditions/Test Steps:
    1. Make sure user is logged out
    2. Click app icon from launch screen
    Acceptance Criteria:
    1. Login screen is styled according to design, containing
    2. toolbar with title of app
    3. an email field
    4. a password field
    5. a login button with active, disabled, pressed, and focused state
    

    View Slide

36. “User sees login screen when they launch the app.”
    Preconditions/Test Steps:
    1. Make sure user is logged out
    2. Click app icon from launch screen
    Acceptance Criteria:
    1. Login screen is styled according to design, containing
    2. toolbar with title of app
    3. an email field
    4. a password field
    5. a login button with active, disabled, pressed, and focused state
    Not Included:
    Error states for email and password fields
    Functionality of login button
    

    View Slide

37. Sprint 2
    Stakeholder
    Review Design Signup
    Sprint Planning
    Design QA Build
    Sprint Retro
    Develop Review Design
    Develop Login
    

    View Slide

38. Implementing with Shared Language
    

    View Slide

39. Atoms: Colors
    In values/colors.xml:
    
    #48D8FD
    #3EC7EB
    #FF535F
    #2C2C2C
    #DCDCDC
    #8A8A8A
    

    View Slide

40. Atoms: Colors
    In values/styles.xml:
    <br/><color name="colorPrimary">@color/blue</color><br/><color name="colorPrimaryDark">@color/blueDark</color><br/><color name="colorAccent">@color/red</color><br/>
    In values/colors.xml:
    
    #48D8FD
    #3EC7EB
    #FF535F
    #2C2C2C
    #DCDCDC
    #8A8A8A
    

    View Slide

41. Atoms: Type Styles
    In values/styles.xml:
    
    <br/><item name="android:fontFamily">sans-serif</item><br/><item name="android:textStyle">bold</item><br/><item name="android:textSize">20sp</item><br/>
    ...
    <br/><item name="android:fontFamily">sans-serif</item><br/><item name="android:textStyle">normal</item><br/><item name="android:textSize">14sp</item><br/>
    ...
    

    View Slide

42. Molecules: EditText
    In values/styles.xml:
    
    <br/><item name="android:textAppearance">@style/Body</item><br/><item name="android:textColor">@color/grayDark</item><br/><item name="android:textColorHint">@color/grayLight</item><br/>
    ...
    

    View Slide

43. Molecules: EditText
    In values/styles.xml:
    
    <br/><item name="android:textAppearance">@style/Body</item><br/><item name="android:textColor">@color/grayDark</item><br/><item name="android:textColorHint">@color/grayLight</item><br/>
    ...
    

    View Slide

44. Molecules: EditText
    In values/styles.xml:
    
    <br/><item name="android:textAppearance">@style/Body</item><br/><item name="android:textColor">@color/grayDark</item><br/><item name="android:textColorHint">@color/grayLight</item><br/>
    ...
    ...
    <br/><item name="android:fontFamily">sans-serif</item><br/><item name="android:textStyle">normal</item><br/><item name="android:textSize">14sp</item><br/>
    ...
    

    View Slide

45. A Screen is an Organism
    In layout/activity_login.xml:
    
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_email_hint"
    style="@style/StandardEditText" />
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_password_hint"
    style="@style/StandardEditText"/>
    ...
    
    

    View Slide

46. A Screen is an Organism
    In layout/activity_login.xml:
    
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_email_hint"
    style="@style/StandardEditText" />
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_password_hint"
    style="@style/StandardEditText"/>
    ...
    
    In values/styles.xml:
    <br/>...<br/>
    

    View Slide

47. Leveraging the Theme
    
    <br/><item name="android:textAppearance">@style/Body</item><br/><item name="android:textColor">@color/red</item><br/><item name="android:textColorHint">@color/blue</item><br/>
    ...
    

    View Slide

48. Theme Style
    
    <br/><item name="android:textAppearance">@style/Body</item><br/><item name="android:textColor">@color/red</item><br/><item name="android:textColorHint">@color/blue</item><br/>
    ...
    
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_email_hint"
    style="@style/StandardEditText" />
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/login_password_hint"
    style="@style/StandardEditText"/>
    ...
    
    

    View Slide

49. !
    So I followed the style
    guide. Am I done?
    

    View Slide

50. Sprint 2
    Stakeholder
    Review Design Signup
    Sprint Planning
    Design QA Build
    Sprint Retro
    Develop Review Design
    Develop Login
    

    View Slide

51. Sprint 2
    Stakeholder
    Review Design Signup
    Sprint Planning
    Design QA Build
    Sprint Retro
    Develop Review Design
    Develop Login
    

    View Slide

52. Sprint 2
    Stakeholder
    Review Design Signup
    Sprint Planning
    Design QA Build
    Sprint Retro
    Develop Review Design
    Develop Login
    

    View Slide

53. Kickoff Discovery Sprint 1 Sprint 2
    

    View Slide

54. !
    So just do this, and
    everything’s great?
    

    View Slide

55. Team must believe in the process.
    

    View Slide

56. It’s also about the individual.
    

    View Slide

57. Be responsive. Not reactive.
    

    View Slide

58. 3 things to remember
    1. Be empathetic
    2. Check your ego
    3. Assume positive intent
    

    View Slide

59. Close the Loop!
    

    View Slide

60. View Slide

61. @kristinmars
    @zackiets
    @bignerdranch
    Atomic Design:
    http://bradfrost.com/blog/post/atomic-web-design/
    

    View Slide