design that scales: methods and best practices to grow gracefully
DESCRIPTION
Presentation done for Refresh the Triangle (http://refreshthetriangle.org/), presented and hosted by Atlantic BT (http://atlanticbt.com). Three part presentation focused "On Growth Patterns: Building a foundation for expansion." The creative’s perspective - Growth demands that your existing processes continuously adapt. Hear how the basics - such as a creative brief - merge with new techniques such as style boards, idea briefs, and co-design, to provide clients with visibility into their projects, preserve quality of the end product, and create the efficiency needed to scale. View Full Presentation - http://www.slideshare.net/atlanticbt/growth-patterns-building-a-foundation-for-expansion-driving-or-being-driven-to-grow-in-order-to-meet-demandTRANSCRIPT
![Page 1: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/1.jpg)
Design that scales
Methods and best practices to grow gracefully.
1
![Page 2: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/2.jpg)
I am Eileen Allen
Super Mom, Photographer, Designer & Creative Director @ AtlanticBT
@eileenallen
2
![Page 3: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/3.jpg)
3
![Page 4: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/4.jpg)
4
![Page 5: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/5.jpg)
Drink the kool aid
Process... Weʼre talking about process?! (Allen Iversonʼs voice)
You have to buy into your process, but donʼt let it handcuff you.
productBRIEF research ideas solution production
5
![Page 6: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/6.jpg)
the setup
The days of starting your project on a blank Photoshop canvas are done. It requires too much wasted time and energy.
BRIEF research ideas
6
![Page 7: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/7.jpg)
Whether you are a team of one, a small shop looking to expand, or a massive force, you can benefit from thorough planning.
Client Brief / WorksheetCreative BriefIdea BriefCo-DesignStyleboard
This collection of “setup” methods is meant to help us do one thing... Think Before We Do.
Our creative arsenal
7
![Page 8: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/8.jpg)
This is usually the first interaction a client has with our design team.It allows clients to share their hopes and dreams.The worksheet is meant to help clients self-evaluate, organize their thoughts, and share their preferences.
Client Brief
8
![Page 9: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/9.jpg)
Example Question
How involved do you want to be in the design process of your site?I trust your expertise and leave the design decisions up to you.I would like to have a say in the design of my site.I know exactly what I want and would like you to follow my instructions.
Visit Atlantic BTʼs Actual Worksheet http://www.atlanticbt.com/client-worksheet.php
9
![Page 10: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/10.jpg)
This is NOT your grandmaʼs brief. Instead, we ask a series of five questions during the client kick off meeting.
creative brief
10
![Page 11: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/11.jpg)
Define purpose. Why do you feel like you need a site?Define sales process. How do you communicate who you are to clients?Define the users. Who is the site for?Define the end user goal (for each class if more than one). What is the desired action?Define the look and feel. Confirmation of client brief (theme, colourway, risk factor)
creative brief
11
![Page 12: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/12.jpg)
idea brief
“An idea brief is a sentence, or two, that sums up the project and frames it as a problem statement. A question that needs an answer.”
- Mark Boulton
Source http://www.alistapart.com/articles/savingthespark/
12
![Page 13: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/13.jpg)
Actual examples of our previous brief briefs include:This client needs to distinguish themselves from the competition by making a complex process easy for customers to understand. This client needs the site to reflect the innovation in their technology, communicate how they are ahead of the curve in their industry, and highlight their credibility.This client needs a site design that better reflects their reputation and attract high-end clientele.
idea brief
13
![Page 14: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/14.jpg)
Co-Design is a brainstorming session where the project team collaborates and share their perspective on the common goals.
Use the idea brief to springboard into the co-design workshop.
Co-Design can happen:You and a clientYou and another designerYou and UXYou and UX and marketing and PMYou and all of the above
co-design
The concept was adopted from Leah Buley, formerly of Adaptive Path.
14
![Page 15: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/15.jpg)
The benefits of co-design sessions include:
No one comes in empty handed.Helps to prioritize elements and features.We identify/solve the layout through ideation.Everyone has a voice, because all ideas are good ideas.Bada-bing: Wireframe!
co-design
15
![Page 16: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/16.jpg)
Itʼs like if a style guide and a mood board had a baby!Have you ever had a client:
Be surprised by your design choices? Ever point out that you used the wrong kind of camo for the background of their military equipment catalog site?
To prevent these surprises and potentially embarrassing mistakes, we start with style boards to help the client visualize our direction before we begin designing.
style board
16
![Page 17: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/17.jpg)
17
![Page 18: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/18.jpg)
18
![Page 19: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/19.jpg)
The key benefits of a style board include:Eliminates surprises.Designers are better prepared.Avoids designing in a vacuum.
style board
19
![Page 20: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/20.jpg)
sharing is caring
20
![Page 21: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/21.jpg)
THank You
21
![Page 22: Design that Scales: Methods and best practices to grow gracefully](https://reader034.vdocuments.mx/reader034/viewer/2022051512/540b93a48d7f72f36a8b4858/html5/thumbnails/22.jpg)
Photo Credits
http://designingfortheweb.co.uk/
http://manpacks.com/blog/wp-content/uploads/2011/01/underwear_icon-200x150.png
http://tinawatkins.files.wordpress.com/2010/09/care-bears.jpg
22