Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
From WTF to BFF
The DesignerDeveloperDuo
www.solstice-mobile.com
Andrew SutherlandJoyce Pang Vargas
DEV
UX
2
CONFIDENTIAL & PROPRIETARY
We engineer idea-driven
digital experiences to bring
our customers closer to
their customers.
S...
www.solstice-mobile.com
CONFIDENTIAL & PROPRIETARY
4
www.solstice-mobile.com5
www.solstice-mobile.com6
www.solstice-mobile.com7
Product Perspectives
8
www.solstice-mobile.com9
Dev Perspectives
www.solstice-mobile.com10
if code.isClean() {
product = .Complete

}
www.solstice-mobile.com11
From day one,we learn the importance of working with other developers
www.solstice-mobile.com12
www.solstice-mobile.com13
Design Perspectives
“First impressions are 94% design related.”
— Conversion XL, First Impressions Matter: The Importance of Great Visual Desi...
Inspiration + talent ≠ good design
www.solstice-mobile.com15
Good design is driven by constraints,
considerations,and consistency.
www.solstice-mobile.com16
www.solstice-mobile.com17
Typography
www.solstice-mobile.com18
Typography
VAULT
www.solstice-mobile.com19
Typography
VAULT
www.solstice-mobile.com20
ColorTheory
www.solstice-mobile.com21
ColorTheory
www.solstice-mobile.com22
Alignment and Spacing
www.solstice-mobile.com23
“Every $1 spent on UX brings in between
$2 to $100 in return.”
— Fast Company, The Business Case...
www.solstice-mobile.com24
A Typical Designer/Dev Process…
www.solstice-mobile.com25
Designercompletes
compsandassets
beforesprintbegins
Sprintends
UIreviewnotesare
leftunaddressed
...
www.solstice-mobile.com26
Designercompletes
compsandassets
beforesprintbegins
Sprintends
UIreviewnotesare
leftunaddressed
...
www.solstice-mobile.com27
www.solstice-mobile.com28
www.solstice-mobile.com29
%$#@!
www.solstice-mobile.com30
Tips for Going Lean
www.solstice-mobile.com31
The Agile Manifesto
Individuals and interactions
over processes and tools


Working software
ove...
www.solstice-mobile.com32
LeanTip #1
Start With
Communication
Suggestions
• Nothing helps if you don’t do this first!
• Ha...
www.solstice-mobile.com33
Aha!
Build a Shared Understanding
www.solstice-mobile.com34
24 hours
30 days
Working Increment
of Software
Sprint
Backlog
Prioritized
Product
Backlog
Retros...
www.solstice-mobile.com35
LeanTip #2
Create Smaller
Units of Work
Suggestions
• Create UI review tasks per user story
(the...
User Story 1
User Story 2
User Story 3
User Story 4
www.solstice-mobile.com36
Defined Developing Testing P.O. Review Accept...
User Story 1
www.solstice-mobile.com37
Defined Developing Testing P.O. Review Accepted
User Story 2
User Story 3
User Story...
User Story 2
User Story 3
User Story 4
User Story 5
User Story 1
www.solstice-mobile.com38
Defined Developing Testing P.O. ...
User Story 1
www.solstice-mobile.com39
Defined Developing Testing P.O. Review Accepted
Tasks
UI Review
UI Review
Owner Est....
User Story 1
www.solstice-mobile.com40
Defined Developing Testing P.O. Review Accepted
User Story 2
User Story 3
User Story...
User Story 1
www.solstice-mobile.com41
Defined Developing Testing P.O. Review Accepted
User Story 2
User Story 3
User Story...
www.solstice-mobile.com42
LeanTip #3
Use an
InspectionTool
Suggestions
• Avocode - Works with PSD, Sketch
• Uberlayer - Ov...
www.solstice-mobile.com45
LeanTip #4
Pair vs.Meet
Suggestions
• Use the stand up to communicate
when you are ready to pair...
www.solstice-mobile.com46
Dabbling is fun!
www.solstice-mobile.com47
Not cross-functional
Tedious process
Doesn’t seem to fit agile/scrum
No team accountability
No de...
www.solstice-mobile.com48
www.solstice-mobile.com49
Thank you
The Designer Developer Duo: From WTF to BFF (for product people too!)
The Designer Developer Duo: From WTF to BFF (for product people too!)
Upcoming SlideShare
Loading in …5
×

The Designer Developer Duo: From WTF to BFF (for product people too!)

360 views

Published on

When it comes to agile product development, an emphasis on speedy delivery often puts designers and developers at odds over how good a product looks versus how well it works. How can we come together as design-gineers, leverage the agile framework, and deliver outstanding UI and functionality at equal value—without compromising one over the other? Whether you’re a designer, developer, functional or product person, learn how to adopt and implement a lean UI review process that ultimately results in a higher quality product that users love.

Published in: Technology
  • Be the first to comment

The Designer Developer Duo: From WTF to BFF (for product people too!)

  1. 1. From WTF to BFF The DesignerDeveloperDuo
  2. 2. www.solstice-mobile.com Andrew SutherlandJoyce Pang Vargas DEV UX 2
  3. 3. CONFIDENTIAL & PROPRIETARY We engineer idea-driven digital experiences to bring our customers closer to their customers. Solstice is an innovation and digital engineering firm. 3
  4. 4. www.solstice-mobile.com CONFIDENTIAL & PROPRIETARY 4
  5. 5. www.solstice-mobile.com5
  6. 6. www.solstice-mobile.com6
  7. 7. www.solstice-mobile.com7 Product Perspectives
  8. 8. 8
  9. 9. www.solstice-mobile.com9 Dev Perspectives
  10. 10. www.solstice-mobile.com10 if code.isClean() { product = .Complete
 }
  11. 11. www.solstice-mobile.com11 From day one,we learn the importance of working with other developers
  12. 12. www.solstice-mobile.com12
  13. 13. www.solstice-mobile.com13 Design Perspectives
  14. 14. “First impressions are 94% design related.” — Conversion XL, First Impressions Matter: The Importance of Great Visual Design “The average app loses 77% of its daily active users within the first 3 days post-install.” — Quettra, Mobile Intelligence study based on 125 million mobile users
  15. 15. Inspiration + talent ≠ good design www.solstice-mobile.com15
  16. 16. Good design is driven by constraints, considerations,and consistency. www.solstice-mobile.com16
  17. 17. www.solstice-mobile.com17 Typography
  18. 18. www.solstice-mobile.com18 Typography VAULT
  19. 19. www.solstice-mobile.com19 Typography VAULT
  20. 20. www.solstice-mobile.com20 ColorTheory
  21. 21. www.solstice-mobile.com21 ColorTheory
  22. 22. www.solstice-mobile.com22 Alignment and Spacing
  23. 23. www.solstice-mobile.com23 “Every $1 spent on UX brings in between $2 to $100 in return.” — Fast Company, The Business Case For Investing In UI Design
  24. 24. www.solstice-mobile.com24 A Typical Designer/Dev Process…
  25. 25. www.solstice-mobile.com25 Designercompletes compsandassets beforesprintbegins Sprintends UIreviewnotesare leftunaddressed Developerwrites them downto addresslater Duringthefollowup, morerevisionscomeup Afewdayslater, designerschedules afollowupUIreview Developerwritesdown notestoaddresslater duetotime Designerpresents furtherrevisionsthat areneeded Tobeefficient,developer startstomakerevisions duringmeeting Designerreviewsand presentsUIrevisions Developerdemosthe latestfeatures/screens DesignerschedulesaUI reviewmeetingmid-sprint ornearendofsprint Sprintbegins DEV UX
  26. 26. www.solstice-mobile.com26 Designercompletes compsandassets beforesprintbegins Sprintends UIreviewnotesare leftunaddressed Developerwrites them downto addresslater Duringthefollowup, morerevisionscomeup Afewdayslater, designerschedules afollowupUIreview Developerwritesdown notestoaddresslater duetotime Designerpresents furtherrevisionsthat areneeded Tobeefficient,developer startstomakerevisions duringmeeting Designerreviewsand presentsUIrevisions Developerdemosthe latestfeatures/screens DesignerschedulesaUI reviewmeetingmid-sprint ornearendofsprint Sprintbegins DEV UX v Not cross-functional Tedious process Doesn’t seem to fit agile/scrum No team accountability No definition of done
  27. 27. www.solstice-mobile.com27
  28. 28. www.solstice-mobile.com28
  29. 29. www.solstice-mobile.com29 %$#@!
  30. 30. www.solstice-mobile.com30 Tips for Going Lean
  31. 31. www.solstice-mobile.com31 The Agile Manifesto Individuals and interactions over processes and tools 
 Working software over comprehensive documentation
 Customer collaboration over contract negotiation
 Responding to change over following a plan Scrum Kanban Extreme programming Behavior driven development Scrumban and more…
  32. 32. www.solstice-mobile.com32 LeanTip #1 Start With Communication Suggestions • Nothing helps if you don’t do this first! • Have a UI Review retro; inspect and adapt • Bring challenges to light • Agree on what to try out (avoid forcing a process that the team hasn’t agreed upon) 32
  33. 33. www.solstice-mobile.com33 Aha! Build a Shared Understanding
  34. 34. www.solstice-mobile.com34 24 hours 30 days Working Increment of Software Sprint Backlog Prioritized Product Backlog Retrospective Demo “Lean is about being an athlete,not a skeleton.” — Sami Niemela,Co-founder of IxDA Helsinki
  35. 35. www.solstice-mobile.com35 LeanTip #2 Create Smaller Units of Work Suggestions • Create UI review tasks per user story (the smaller the story, the better) • Creates team accountability, and shared responsibility • Allows for a definition of done 35
  36. 36. User Story 1 User Story 2 User Story 3 User Story 4 www.solstice-mobile.com36 Defined Developing Testing P.O. Review Accepted User Story 5 Tasks UI Review UI Review Owner Est. To Do Andrew Joyce 0.25 0.25 0.25 0.25
  37. 37. User Story 1 www.solstice-mobile.com37 Defined Developing Testing P.O. Review Accepted User Story 2 User Story 3 User Story 4 User Story 5 Tasks UI Review UI Review Owner Est. To Do Andrew Joyce 0.25 0.25 0.25 0.25
  38. 38. User Story 2 User Story 3 User Story 4 User Story 5 User Story 1 www.solstice-mobile.com38 Defined Developing Testing P.O. Review Accepted Defect 1
  39. 39. User Story 1 www.solstice-mobile.com39 Defined Developing Testing P.O. Review Accepted Tasks UI Review UI Review Owner Est. To Do Andrew Joyce 0.25 0.25 0 0 User Story 2 User Story 3 User Story 4 User Story 5 Defect 1
  40. 40. User Story 1 www.solstice-mobile.com40 Defined Developing Testing P.O. Review Accepted User Story 2 User Story 3 User Story 4 User Story 5 Defect 1
  41. 41. User Story 1 www.solstice-mobile.com41 Defined Developing Testing P.O. Review Accepted User Story 2 User Story 3 User Story 4 User Story 5 Defect 1
  42. 42. www.solstice-mobile.com42 LeanTip #3 Use an InspectionTool Suggestions • Avocode - Works with PSD, Sketch • Uberlayer - Overlays comps • Zeplin - Works with Sketch • Marketch - Sketch Plugin 42
  43. 43. www.solstice-mobile.com45 LeanTip #4 Pair vs.Meet Suggestions • Use the stand up to communicate when you are ready to pair • Sit together for approximately 
 15 minute chunks 45
  44. 44. www.solstice-mobile.com46 Dabbling is fun!
  45. 45. www.solstice-mobile.com47 Not cross-functional Tedious process Doesn’t seem to fit agile/scrum No team accountability No definition of done Use an inspection tool Pair vs. meet Use kanban to track UI reviews Create smaller units of work Start with communication
  46. 46. www.solstice-mobile.com48
  47. 47. www.solstice-mobile.com49 Thank you

×