McrFRED talk 25/09/2014

Jake Smith End of level boss / JP74 / @jake74McrFRED / 25 September 2014

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

Apologies and thanks

What I’m going to talk aboutHow 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…

About youStudents?!Designers?!Developers?!Freelancers?!Agency staff?!None of the above?

About meEnd of level boss / director at JP74!Senior front ender!Avid retro gamer

Where I work

JP74 LtdStarted by Jake & Pete (born in…)!We will be thirteen in October!Seventeen full time staff!Based in Lancashire!!

!

!

!

!

jp74.com @jp74

http://jp74.com

JP74 LtdWeb design!Digital agency!Full Service Agency!Web developers!Software developers!Service Design…!!

Web platforms and applications

JP74 LtdTwo founders!Four directors!Administration team!Three production departments

Process

Planning Production

PlanningScoping — why we do it!Func specs & Tech docs!Wireframes

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

Functional specificationAsk lots of questions!Understand their customers needs !Understand the client’s business logic!

Functional specificationThe 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


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



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



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


Developers, designers, front-enders, UX…


Technical DocumentationTechnical 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


Technical Documentation…regardless, technical documentation is often considered a “necessary evil” by developers.



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.

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

Wireframing

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

Finally, we can do some work…

Finally, we can do some work… !

Wait, what?! What have we been doing!?

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…

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

design

tech front end

Production

design

tech front end

planning

Production

design

tech front end

planning

performance optimisation

Production

design

tech front end

user experienceplanning

performance optimisation

Production

design

tech front end

the magic

Production

End of part 1

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

Jake Smith @jake74

Part 2

design

tech front end

the magic

Production

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

The single biggest problem in communication is the illusion that it has taken place!!

George Bernard Shaw

“”

CommunicationAdministration of communication!Email – my biggest time sink!IMs internal/external forces!Informal chatter

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

http://www.huffingtonpost.com/2013/09/18/manage-inbox-email-overload_n_3921823.html

External distractions

Communication

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

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

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

#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

Launch day

Launch dayWeeks on a test server environment!Accountability!SECURITY!!One-click automated deployments

We deploy on Fridays…

Time sheets• haha!

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

Time sheetsAs a creative and technical people and agencies,!time is our most valuable asset

Enjoying workProgression & Assessment!Learning!Tools and process!Ambience!Culture

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

LearningOur industry requires constant learning!Self-initiated projects!Conferences!Paid courses / mentoring!

Tools and processInvest in your team!Invest in yourself!

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

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/

http://randsinrepose.com/archives/a-nerd-in-a-cave/

@jake74

@tosmith84

@s10wen

@quiffboy

@narsqt

@colinrotherham

@tmoitie

Going furtherHow to stay interested and push yourself!Self initiated side projects!Work with good people

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

Discussion

Jake Smith @jake74

McrFRED talk 25/09/2014

Small Business & Entrepreneurship

Transcript of McrFRED talk 25/09/2014