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
2. Well, what’s the problem?
3. Expectation Reality
4. We’re going to take you on a journey...
5. ! … and we’ll encounter issues.
6. Kickoff Discovery Sprint 1 Sprint 2
7. Kickoff Discovery Sprint 1 Sprint 2
8. What’s a project kickoff meeting? Who does what? When do things happen? What tools?
9. ! Jump right in?
10. Kickoff Discovery Sprint 1 Sprint 2
11. Mapping it out
12. Kickoff Discovery Sprint 1 Sprint 2
13. Sprint 1 Stakeholder Review Develop Review Design Sprint Planning Design Login Developer Chores Sprint Retro
14. Sprint 1 Stakeholder Review Develop Review Design Sprint Planning Design Login Developer Chores Sprint Retro
15. ! What do devs do without designs?
16. Sprint 1 Stakeholder Review Develop Review Design Sprint Planning Design Login Developer Chores Sprint Retro
17. Wireframing Login
18. Creating a Style Guide Atoms Molecules Organisms Source: Brad Frost
19. Atoms
20. Molecules
21. Annotating Molecules
22. Annotating Wireframes
23. Style Guide Organisms are made of molecules are made of atoms
24. ! So designs are ready for stakeholder approval?
25. Sprint 1 Stakeholder Review Develop Review Design Sprint Planning Design Login Developer Chores Sprint Retro
27. Sprint 1 Stakeholder Review Develop Review Design Sprint Planning Design Login Developer Chores Sprint Retro
28. Sprint 1 Stakeholder Review Develop Review Design Sprint Planning Design Login Developer Chores Sprint Retro
29. Kickoff Discovery Sprint 1 Sprint 2
30. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Develop Review Design Develop Login
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.
32. What makes a good user story?
33. Labels and Epics
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
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
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
37. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Develop Review Design Develop Login
38. Implementing with Shared Language
39. Atoms: Colors In values/colors.xml: <!-- Custom Colors --> <color name="blue">#48D8FD</color> <color name="blueDark">#3EC7EB</color> <color name="red">#FF535F</color> <color name="grayDark">#2C2C2C</color> <color name="grayLight">#DCDCDC</color> <color name="gray">#8A8A8A</color>
40. Atoms: Colors In values/styles.xml: <style name="AppTheme" parent=“Theme.AppCompat.Light.DarkActionBar"> <color name="colorPrimary">@color/blue</color> <color name="colorPrimaryDark">@color/blueDark</color> <color name="colorAccent">@color/red</color> </style> In values/colors.xml: <!-- Custom Colors --> <color name="blue">#48D8FD</color> <color name="blueDark">#3EC7EB</color> <color name="red">#FF535F</color> <color name="grayDark">#2C2C2C</color> <color name="grayLight">#DCDCDC</color> <color name="gray">#8A8A8A</color>
41. Atoms: Type Styles In values/styles.xml: <!-- Text Styles --> <style name="Title" parent="TextAppearance.AppCompat"> <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">bold</item> <item name="android:textSize">20sp</item> </style> ... <style name="Body" parent="TextAppearance.AppCompat"> <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">normal</item> <item name="android:textSize">14sp</item> </style> ...
42. Molecules: EditText In values/styles.xml: <!-- Molecules --> <style name="StandardEditText" parent="Widget.AppCompat.EditText"> <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> </style> ...
43. Molecules: EditText In values/styles.xml: <!-- Molecules --> <style name="StandardEditText" parent="Widget.AppCompat.EditText"> <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> </style> ...
44. Molecules: EditText In values/styles.xml: <!-- Molecules --> <style name="StandardEditText" parent="Widget.AppCompat.EditText"> <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> </style> ... <!-- Text Styles --> ... <style name="Body" parent="TextAppearance.AppCompat"> <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">normal</item> <item name="android:textSize">14sp</item> </style> ...
45. A Screen is an Organism In layout/activity_login.xml: <LinearLayout ...> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_email_hint" style="@style/StandardEditText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_password_hint" style="@style/StandardEditText"/> ... </LinearLayout>
46. A Screen is an Organism In layout/activity_login.xml: <LinearLayout ...> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_email_hint" style="@style/StandardEditText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_password_hint" style="@style/StandardEditText"/> ... </LinearLayout> In values/styles.xml: <style name="StandardEditText" parent="Widget.AppCompat.EditText"> ... </style>
47. Leveraging the Theme <!-- Base application theme. → <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> ... <item name="editTextStyle">@style/StandardEditText</item> </style> <!-- Molecules --> <style name="StandardEditText" parent="Base.Widget.AppCompat.EditText"> <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/red</item> <item name="android:textColorHint">@color/blue</item> </style> ...
48. Theme Style <!-- Base application theme. → <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> ... <item name="editTextStyle">@style/StandardEditText</item> </style> <!-- Molecules --> <style name="StandardEditText" parent="Base.Widget.AppCompat.EditText"> <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/red</item> <item name="android:textColorHint">@color/blue</item> </style> ... <LinearLayout ...> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_email_hint" style="@style/StandardEditText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_password_hint" style="@style/StandardEditText"/> ... </LinearLayout>
49. ! So I followed the style guide. Am I done?
50. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Develop Review Design Develop Login
51. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Develop Review Design Develop Login
52. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA Build Sprint Retro Develop Review Design Develop Login
53. Kickoff Discovery Sprint 1 Sprint 2
54. ! So just do this, and everything’s great?
55. Team must believe in the process.
56. It’s also about the individual.
57. Be responsive. Not reactive.
58. 3 things to remember 1. Be empathetic 2. Check your ego 3. Assume positive intent
59. Close the Loop!
61. @kristinmars @zackiets @bignerdranch Atomic Design: http://bradfrost.com/blog/post/atomic-web-design/