A talk about the processes and practices in our studio, tools we've found that work well to increase communication and collaboration

1. Jake Smith
End of level boss / JP74 / @jake74
McrFRED / 25 September 2014

2. “Let’s go to work”
aka what I’ve learned during 18 years in digital

3. Apologies and thanks

6. What I’m going to talk about
How we drive a project through the studio!
How the different elements within a studio work together!
The tools we use to complete a project!
Some stuff to consider that’s not actually production…

7. YMMV

8. About you
Students?!
Designers?!
Developers?!
Freelancers?!
Agency staff?!
None of the above?

9. About me
End of level boss / director at JP74!
Senior front ender!
Avid retro gamer

10. Where I work

11. JP74 Ltd
Started by Jake & Pete (born in…)!
We will be thirteen in October!
Seventeen full time staff!
Based in Lancashire!
!
!
!
!
!
jp74.com @jp74

12. JP74 Ltd
Web design!
Digital agency!
Full Service Agency!
Web developers!
Software developers!
Service Design…!
!
Web platforms and applications

21. JP74 Ltd
Two founders!
Four directors!
Administration team!
Three production departments

22. JP74 Ltd
Two founders!
Four directors!
Administration team!
Three production departments

23. Process
Planning Production

24. Planning
Scoping — why we do it!
Func specs & Tech docs!
Wireframes

25. http://curlygirlcoop.blogspot.co.uk/2013/11/shhhhhh-its-my-yarn-winder.html

26. Functional specification
Ask lots of questions!
Understand their customers needs !
Understand the client’s business logic!

27. Functional specification
The documentation typically describes what is
needed by the system user as well as requested
properties of inputs and outputs…
http://en.wikipedia.org/wiki/Functional_specification

28. Functional specification
When the user clicks the OK button, the dialog is closed
and the focus is returned to the main window in the
state it was in before this dialog was displayed.
http://en.wikipedia.org/wiki/Functional_specification

29. Functional specification
• To let the developers know what to build!
• To let the testers know what tests to run!
• To let stakeholders know what they are getting
http://en.wikipedia.org/wiki/Functional_specification

30. Functional specification
• To let the developers know what to build!
• To let the testers know what tests to run!
• To let stakeholders know what they are getting
http://en.wikipedia.org/wiki/Functional_specification
Developers, designers, front-enders, UX…

31. Technical Documentation
Technical documentation refers to any type of
documentation that describes handling, functionality
and architecture of a technical product or a product
under development or use.
http://en.wikipedia.org/wiki/Technical_documentation

32. Technical Documentation
…regardless, technical documentation is often
considered a “necessary evil” by developers.
http://en.wikipedia.org/wiki/Technical_documentation

34. Wireframing
[it] is a visual guide that represents the skeletal
framework of a website.!
!
Wireframes are created for the purpose of
arranging elements to best accomplish a particular
purpose.

35. Wireframing
• Allows input without fear of undoing hours
of design work!
• Allows all teams (including client) to have input and
move elements around and ‘test drive’ the layout!
• Saves time by identifying problems in UX early on

36. Wireframing

42. End of planning
Here’s what we’re going to design and build for you.!
Here’s what it’ll cost you.

43. Finally, we can do some work…

44. Finally, we can do some work…
!
Wait, what?! What have we been doing!?

45. How do you work?
Turn up, sit down, do stuff?!
!
Read your emails, reply, inbox zero, tweet, and
start designing/devving?!
!
Stand up meeting to discuss progress, delegate
the days tasks, email admin, check your To Do /
Task Manager app of choice, Git pull (fix merge
issue, test, push), get going…

46. Production
project management!
stand up meetings!
tasks and management thereof!
Sass, node bower etc!
Working in teams!
issue tracking!
time management!
testing!
deploying and automation

47. design
tech front end
Production

48. design
tech front end
planning
Production

49. design
tech front end
planning
performance optimisation
Production

50. design
tech front end
user experience
planning
performance optimisation
Production

51. design
tech front end
the magic
Production

52. End of part 1

53. “Let’s go to work”
aka what I’ve learned during 18 years in digital
Jake Smith
@jake74

54. Part 2

55. design
tech front end
the magic
Production

56. Communication
Agile / waterfall etc fluidity of project management!
Stand up meetings!
Tasks and management there of…!
Working in teams!
Issue tracking!
Time management!
Testing!
Deployment

57. The single biggest problem in
communication is the illusion
that it has taken place!
!
George Bernard Shaw
“
”

58. Communication
Administration of communication!
Email – my biggest time sink!
IMs internal/external forces!
Informal chatter

59. The time it would take for us to binge-watch the
complete first season of “Orange Is The New Black”
is equivalent to the amount of time we actually
spend each week dealing with email.
http://www.huffingtonpost.com/2013/09/18/manage-inbox-email-
overload_n_3921823.html
Death by email

61. External distractions

62. Communication

64. Collaboration
Collaboration is working with others to do a task
and to achieve shared goals.

67. Collaboration
• No obvious chain of command, a lot of autonomy!
• Enthusiasm!
• Democratic process of idea evaluation!
• Shared eating environment…

68. Tools of the trade
• I’m not here to argue which language/process is best!!
• Keep an open mind!
• Set aside time to try new things!
• Have an interest and build things and investigate
around your subject of interest

69. #irc -webkit- HTML5 LESS AJAX
XSS .md Sass FTP AWS
CSS3 Git Django Node vim
UX PPC SVG Rails .psd
Swift Bower pip SVN PHP

70. Launch day

72. Launch day
Weeks on a test server environment!
Accountability!
SECURITY!!
One-click automated deployments

73. We deploy on Fridays…

78. Time sheets
• haha!

79. Time sheets
• But seriously…!
• Life blood of a digital agency!
• Time should be accounted and charged for!
• Time sheets should be done by everyone

80. Toggl

83. Time sheets
As a creative and technical people and agencies,!
time is our most valuable asset

84. Enjoying work
Progression & Assessment!
Learning!
Tools and process!
Ambience!
Culture

85. Progression & Assessment
How do you measure progression?!
360º assessments with staff and line manager!
Clear goals and requirements for job role and pay

86. Learning
Our industry requires constant learning!
Self-initiated projects!
Conferences!
Paid courses / mentoring!

87. Tools and process
Invest in your team!
Invest in yourself!

88. Ambience
You spend around 8+ hours with people at work!
Make the studio a place you want to be!
Make yourself comfortable!

89. A nerd in a cave
• A computer on a desk with ready access to the Internet!
• World-canceling features … a door or noise-reducing headphones!
• A random collection of comforting nerd knick knacks!
• Something to drink!
• A well-defined layout!
• A view
http://randsinrepose.com/archives/a-nerd-in-a-cave/

90. @jake74

91. @jake74

92. @tosmith84

93. @s10wen

94. @quiffboy

95. @narsqt

96. @colinrotherham

97. @tmoitie

100. Going further
How to stay interested and push yourself!
Self initiated side projects!
Work with good people

105. What we covered…
Process!
Planning!
Wireframing!
Production!
Communication!
Collaboration!
Personal development!
Some stuff about video games!

106. Discussion
Jake Smith
@jake74