Efficient Workflow for Design and Development Projects

We'll take a look at how our web design and development company moves Drupal projects from concept, to design, to production, using Drupal as the technical backbone for much of the process. We'll discuss how we communicate with clients and manage expectations. We'll also touch on lessons learned and things we do differently after 12 years of doing business.

Transcript

1. Efficient workflow for design and development projects
2. Justin Toupin CEO & Creative Director, Aten Design Group Twitter: @justin2pin Drupal: justin2pin Blog: atendesigngroup.com/blog/author/justin
3. We’re going to talk about process. A lot.
4. Why Process Matters • Consistent results require an effective, repeatable process. • Process helps manage expectations. • Process creates efficiency
5. Not understanding the process makes it difficult to finish projects.
7. “ When we understand that slide, we'll have won the war ” - US General Stanley McChrystal
8. Defining The Process • Iterative • Collaborative • Three Distinct Phases • Discovery • Design • Implementation
9. Iteration
10. “ 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)
11. Collaboration
12. Project Phases
13. Discovery
14. Discovery is where we find out what clients really need.
15. Discovery Objectives • Establish Goals • Define Audience • Assess Content • Create Structure • Plan for Implementation
16. Discovery is challenging.
17. Early discovery is a lot like a first date.
18. Concepts and deliverables are abstract.
19. Always use a contract.
20. Stakeholders have different interests and concerns.
21. Client Surveys
22. Joel Steidl Senior Designer Twitter: @joelsteidl Drupal: joelsteidl Blog: atendesigngroup.com/blog/author/joel
23. Information Architecture
24. Discovery Objectives & Deliverables • Establish Goals • Define Audience • Assess Content • Create Structure • Plan for Implementation • Creative Brief • Audience Statement • Content List • Sitemap • Requirements Documents
25. Creative Brief Establish Goals
26. Audience Statement Define Audience
27. Content List Assess the Content
28. Content List
29. Sitemap Create Structure
30. Site Map, Circa 2004
31. Site Map, Circa 2006
32. Site Map, A Few Weeks Ago
33. Simple Deliverables are Good • Focus on Content, not Format • Provide Flexibility • Encourage Change
34. Content Maps Create Structure
35. Old School - Wireframes
36. New School - Content Maps
37. Requirements Document Plan for Implementation
38. Now, on to the fun stuff.
39. Ken Woodworth Art Director Twitter: @kenwoodworth Drupal: kenwoodworth Blog: atendesigngroup.com/blog/author/ken
40. Design
41. Our Design Approach • Design for goals and users • Present a single design concept, get feedback, and iterate. • Design enough to establish art direction.
42. User-Focused Design
43. User-Focused Design • Design first, worry later • Design for real users • Test with real users • Usability workshops • Software Solutions • Feedback Forms
44. Why one design?
45. 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.
46. Tools & Conventions Baseline Grid Templates Grid Systems
47. The Design Process
48. Design Kick-Off Meeting
49. 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.
50. Mood Boards
51. 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.
52. Mood Boards
53. The Design Concept
54. The Design Concept • Present one or two pages, often one • Content and Structure have been established • Design direction has been explored
55. Feedback
56. Iterate
57. Iterate • Rarely will you nail a design the first time. • Discovery continues throughout the design process. • Expect Changes.
58. ICTJ
59. ICTJ
60. RHoK
61. RHoK
62. Design Approved! What Next?
63. 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.
64. Meanwhile…
65. Design
66. Test Now Win Later
67. First, the Design Concept
68. Next, an Early Prototype
69. Use Drupal Do less work
70. Poynter’s News University Course as Organic Group
71. Poynter’s News University Course as Ubercart Product
72. Poynter’s News University Course as Book
73. Start Risky End Easy
74. Project Phases
75. Thank You!