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.

1. From WTF to BFF
The DesignerDeveloperDuo

2. www.solstice-mobile.com
Andrew SutherlandJoyce Pang Vargas
DEV
UX
2

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. www.solstice-mobile.com
CONFIDENTIAL & PROPRIETARY
4

5. www.solstice-mobile.com5

6. www.solstice-mobile.com6

7. www.solstice-mobile.com7
Product Perspectives

8. 8

9. www.solstice-mobile.com9
Dev Perspectives

10. www.solstice-mobile.com10
if code.isClean() {
product = .Complete
}

11. www.solstice-mobile.com11
From day one,we learn the importance of working with other developers

12. www.solstice-mobile.com12

13. www.solstice-mobile.com13
Design Perspectives

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. Inspiration + talent ≠ good design
www.solstice-mobile.com15

16. Good design is driven by constraints,
considerations,and consistency.
www.solstice-mobile.com16

17. www.solstice-mobile.com17
Typography

18. www.solstice-mobile.com18
Typography
VAULT

19. www.solstice-mobile.com19
Typography
VAULT

20. www.solstice-mobile.com20
ColorTheory

21. www.solstice-mobile.com21
ColorTheory

22. www.solstice-mobile.com22
Alignment and Spacing

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. www.solstice-mobile.com24
A Typical Designer/Dev Process…

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. 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. www.solstice-mobile.com27

28. www.solstice-mobile.com28

29. www.solstice-mobile.com29
%$#@!

30. www.solstice-mobile.com30
Tips for Going Lean

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. 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. www.solstice-mobile.com33
Aha!
Build a Shared Understanding

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

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

46. www.solstice-mobile.com46
Dabbling is fun!

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

48. www.solstice-mobile.com48

49. www.solstice-mobile.com49
Thank you