UPDATE: A reference that I missed to place in the presentation - Mr. T diagram comes from Neil Turner's article "What makes a good UX designer?" http://www.uxforthemasses.com/what-makes-good-ux-designer/ Do you miss the times when Front-End devs were called Web MASTERS? When you did not have to wait for ages for someone else to design a simple form? When there was nobody stalking you to move a button 2px to the left? When there was no philosophy behind the placement of a search field? Anyway… these days are gone, baby. UX is here to stay, at least for some time, so let’s figure out ways to work together. In the end we all want to make things we are proud of. We’ll learn what you can actually request from your UX team (guess what, it’s not just prototypes!), when to speak up and how to communicate with UX folks to be effective.

1. UX Terror. Know your rights.
Front Trends 2015, Natalia Rózycka
.

3. Prototype

4. Spot 10 differences
Prototype What I get from the dev team

5. Are UX people #$%^!?

6. No.

7. The end

9. Myth 1:
UX = prototyping

10. BUSINESS TEAM
WORKING
GRAPHIC
DESIGN
Depth of
experience
DESIGN TECHNICALRESEARCH
Mr. T from
the “A-
Team”

11. Myth 2:
Lo-fi prototypes are sufficient

15. Myth 3:
UX folks are stubborn

17. ★ Consistency of the entire solution

18. ★ Consistency of the entire solution
★ Known UI patterns

19. ★ Consistency of the entire solution
★ Known UI patterns
★ Already tested on users

20. Smooth
FE / UX collaboration
in 3 easy steps

21. Step 1:
Lean in

23. Step 2:
Set it up like a pro

24. UX
Deliverables

25. UX
Deliverables
Business
context and
users’ insights

26. UX
Deliverables
Business
context and
users’ insights
Styleguide

27. UX
Deliverables
Business
context and
users’ insights
Styleguide Prototypes

28. UX
Deliverables
Business
context and
users’ insights
Styleguide Prototypes
Supplementary
documentation:
e.g. workflows
links to examples

29. UX
Deliverables
Business
context and
users’ insights
Styleguide Prototypes
Graphic design
(as a proxy)
Supplementary
documentation:
e.g. workflows
links to examples

30. Prototypes
(make)
Planning &
managing tasks
Documentation
(share & comment)
Designs
(share & comment)
Other files
(share)

31. Axure
JIRA
gDocs
InVision
Prototypes
(make)
Planning &
managing tasks
Documentation
(share & comment)
Designs
(share & comment)
Other files
(share) gDrive

32. Prototypes
(make)
Planning &
managing tasks
Documentation
(share & comment)
Designs
(share & comment)
Other files
(share)
JIRA
Axure
gDocs
InVision
gDrive
source of truth

33. Step 3:
Learn the design critique

34. Seeing UX deliverable

35. Seeing UX deliverable
Got comments?

36. Seeing UX deliverable
Got comments?
No
Think again

37. Seeing UX deliverable
Got comments?
Is the timing right?
No
Think again

38. Seeing UX deliverable
Got comments?
Is the timing right?
Design comment
Refer to: consistency, flow,
proportions, colors, UI patterns
… or just say it looks weird
No
Think again

39. Seeing UX deliverable
Got comments?
Is the timing right?
Design comment Implementation comment
Use numbers:
effort to implement,
load time etc.
Refer to: consistency, flow,
proportions, colors, UI patterns
… or just say it looks weird
No
Think again

40. P.S. A weird thing

41. Design
enthusiast
Hardcore
developer

42. Design
enthusiast
Hardcore
developer
Beautiful
code
feed with
raw meat
requires
detailed designs
technology
-centric

43. Design
enthusiast
Hardcore
developer
Beautiful
code
Beautiful
UI
feed with
raw meat
requires
detailed designs
technology
-centric
does not
implement 1:1
wants to know
users & business
interested
in design

44. Beautiful
code
Beautiful
UI
feed with
raw meat
requires
detailed designs
technology
-centric
does not
implement 1:1
wants to know
users & business
interested
in design
Bad Good

45. GoodBad
Beautiful
code
Beautiful
UI
does not
implement 1:1
requires
detailed designs
technology
-centric
does not
implement 1:1
wants to know
users & business
interested
in design

46. Thank you!
slideshare.net/nrozycka