Efficient workflow
for design and
development projects
Slide 2
Slide 2 text
Justin Toupin
CEO & Creative Director, Aten Design Group
Twitter: @justin2pin
Drupal: justin2pin
Blog: atendesigngroup.com/blog/author/justin
Slide 3
Slide 3 text
We’re going to talk
about process. A lot.
Slide 4
Slide 4 text
Why Process Matters
• Consistent results require an effective,
repeatable process.
• Process helps manage expectations.
• Process creates efficiency
Slide 5
Slide 5 text
Not understanding the
process makes it difficult
to finish projects.
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
“ When we understand that slide, we'll have
won the war ”
- US General Stanley McChrystal
Slide 8
Slide 8 text
Defining The Process
• Iterative
• Collaborative
• Three Distinct Phases
• Discovery
• Design
• Implementation
Slide 9
Slide 9 text
Iteration
Slide 10
Slide 10 text
“ A complex system that works is invariably
found to have evolved from a simple
system that worked. … A complex system
designed from scratch never works and
cannot be made to work.
You have to start over, beginning with a
working simple system.”
-John Gall (Gall's Law)
Slide 11
Slide 11 text
Collaboration
Slide 12
Slide 12 text
Project Phases
Slide 13
Slide 13 text
Discovery
Slide 14
Slide 14 text
Discovery is where we
find out what clients
really need.
Slide 15
Slide 15 text
Discovery Objectives
• Establish Goals
• Define Audience
• Assess Content
• Create Structure
• Plan for Implementation
Slide 16
Slide 16 text
Discovery is
challenging.
Slide 17
Slide 17 text
Early discovery is a lot
like a first date.
Slide 18
Slide 18 text
Concepts and deliverables
are abstract.
Slide 19
Slide 19 text
Always use a contract.
Slide 20
Slide 20 text
Stakeholders have
different interests and concerns.
Slide 21
Slide 21 text
Client Surveys
Slide 22
Slide 22 text
Joel Steidl
Senior Designer
Twitter: @joelsteidl
Drupal: joelsteidl
Blog: atendesigngroup.com/blog/author/joel
Simple Deliverables are Good
• Focus on Content, not Format
• Provide Flexibility
• Encourage Change
Slide 34
Slide 34 text
Content Maps
Create Structure
Slide 35
Slide 35 text
Old School - Wireframes
Slide 36
Slide 36 text
New School - Content Maps
Slide 37
Slide 37 text
Requirements
Document
Plan for Implementation
Slide 38
Slide 38 text
Now, on to the
fun stuff.
Slide 39
Slide 39 text
Ken Woodworth
Art Director
Twitter: @kenwoodworth
Drupal: kenwoodworth
Blog: atendesigngroup.com/blog/author/ken
Slide 40
Slide 40 text
Design
Slide 41
Slide 41 text
Our Design Approach
• Design for goals and users
• Present a single design concept, get
feedback, and iterate.
• Design enough to establish art direction.
Slide 42
Slide 42 text
User-Focused Design
Slide 43
Slide 43 text
User-Focused Design
• Design first, worry later
• Design for real users
• Test with real users
• Usability workshops
• Software Solutions
• Feedback Forms
Slide 44
Slide 44 text
Why one design?
Slide 45
Slide 45 text
Why one design?
• Creating multiple designs is almost
always wasted effort.
• Multiple options can lead to creating a
Frankenstein.
• A single design concept establishes
appropriate focus.
Slide 46
Slide 46 text
Tools & Conventions
Baseline Grid
Templates Grid Systems
Slide 47
Slide 47 text
The Design Process
Slide 48
Slide 48 text
Design
Kick-Off
Meeting
Slide 49
Slide 49 text
Design Kick-Off Meeting
• Gather branding materials and style
guides.
• Follow up any of the feedback from the
client surveys.
• Get a feel for the desired style.
Slide 50
Slide 50 text
Mood Boards
Slide 51
Slide 51 text
Mood Boards
• Based on branding materials, client
surveys & client conversations.
• Used to explore possible typography, UI
patterns, and general design styles.
• Prevent heading in the wrong direction.
Slide 52
Slide 52 text
Mood Boards
Slide 53
Slide 53 text
The Design Concept
Slide 54
Slide 54 text
The Design Concept
• Present one or two pages, often one
• Content and Structure have been
established
• Design direction has been explored
Slide 55
Slide 55 text
Feedback
Slide 56
Slide 56 text
Iterate
Slide 57
Slide 57 text
Iterate
• Rarely will you nail a design the first
time.
• Discovery continues throughout the
design process.
• Expect Changes.
Slide 58
Slide 58 text
ICTJ
Slide 59
Slide 59 text
ICTJ
Slide 60
Slide 60 text
RHoK
Slide 61
Slide 61 text
RHoK
Slide 62
Slide 62 text
Design Approved!
What Next?
Slide 63
Slide 63 text
After the Design Phase
• We aren't trying to design everything.
• Establish art direction that can be
applied.
• Move on to working with actual content.
Slide 64
Slide 64 text
Meanwhile…
Slide 65
Slide 65 text
Design
Slide 66
Slide 66 text
Test Now
Win Later
Slide 67
Slide 67 text
First, the Design Concept
Slide 68
Slide 68 text
Next, an Early Prototype
Slide 69
Slide 69 text
Use Drupal
Do less work
Slide 70
Slide 70 text
Poynter’s News University Course as Organic Group
Slide 71
Slide 71 text
Poynter’s News University Course as Ubercart Product