Frontend Makers presentation on how to make usability experts, visual designers and developers work together.

1. Making usability, design & frontend
development work together

2. Hello. I’m Rafa
Rafael David Latorre López - Villalta
• Lead Frontend & UX Chief at Tolq.com
• resetsociety.com founder
9 years of experience developing
experiences which try to be easy for the user
email: sauco82@gmail.com

3. Making usability, design &
frontend development work together
• Part1. How to fuck it up
• Part2. How it should be done
• Part1 vs Part2
• Final conclusions

4. Disclaimer
I usually work the startup way.

5. The frontend team
The visual designer The frontend developerThe usability expert

6. Part1. How to fuck it up
based on true events

7. In our field we tend to look at things like this:

8. Or this:

9. Or this:

10. ooooooooooooohhhhh

11. The calendar
One day our boss arrives.
- We need a better calendar. - He says.
The designer grabs his headset
and begins to work frantically.

12. A few hours later…
The designer comes back with a
huge smile in his face.

13. The day after
The designer comes back with an
even bigger smile in his face.
The developer gets the design to
begin to integrate with the system.

14. The day after
The developer comes back
with an interactive mock in
HTML + CSS.

15. At that moment the team
feels like…

17. But they don’t know yet they
should feel like…

19. The day after
The developer begins to work on a
proper implementation of the calendar.
Uh-uh, first we have to know
what day is today

20. The day after
The developer keeps working on a
proper implementation of the calendar,
but it is not as simple as it seemed.
Formatting the days in the
correct order…

21. 10 days after
The developer keeps working on a
proper implementation of the calendar,
but it turns out is really complicated.
Deciding the correct format…
Localising the calendar…
Transition between months…
Transition between scopes…

22. 1 day after

23. 5 days after
The developer finally finishes the
plugin following the design indications.
The usability expert comes in.

24. 1 day after
The usability expert begins to use
the plugin within the application.
Half of the features of the old selector
are not there anymore.
The animations break the application in
several cases.

25. 1 day after
The usability expert gives a report
to the designer . so the interaction
issues can be solved.
The usability expert gives a report
to the developer so the interaction
issues can be solved.

26. 1 day after
The developer begins to implement
some of the remarks of the usability
expert breaking with it part of what
the designer created.
The designer does something that
makes the current code useless.

27. A few days after…

29. This is what ends implemented

30. Part2. How it should be done
it works, I swear

31. Usability + Development
Developer and usability expert work in
parallel:
• The developer researches the
available plugins to implement a
calendar.
• The usability expert compiles what
the current calendar does and
sketches improvements

32. 1 day after
After a short discussion about the basic
requirements the developer comes
up with a shortlist of candidates.
The usability expert tries the
demos of the different candidates and
selects the ones that will offer better
experience.

33. Usability expert tasks
• Gives the developer the list of features the calendar should
implement.
• Makes sure the interactions and the visual design that is being
created by the designer creates a better experience.

34. Designer tasks
• The designer uses the existing plugin behaviour to derive its own
version.
• Interactions are prototyped and discussed with the developer
before fine tuning and development.

35. Tools are different

36. Developer tasks
• Integrate the select plugin with the rest of the system.
• Implement extra features given by the usability expert .
• Implements visual and interaction design agreed with the designer .

37. And that’s it!

38. Part1 vs Part2

39. Part1 >20 days
repeat until the end of times

40. Part2 < 7 days

41. Energy in Part1 vs Part2
0
25
50
75
100
Start of the project End of the project
Part 1 Part 2

42. Final conclusions
• Just a few small changes increase the efficiency and happiness of
the team greatly
• Design tools give different results than programming tools
• Delaying discussion is sometimes counter productive
• Be wary of situations that make development similar to Part1

43. Thank you!