Download - DESIGNOSOPHY
DESIGNOSOPHY
The Moment
“They’re asking us to build this crazy
balloon raft, and all they’re giving us is a
bunch of hammers and nails. This is not
going to end well for anybody.”#jonoism
Theory, Lenses & Core Principles
@%#! Designers Say, but Shouldn’t
Design Methodology
There are four Cs in CONVERSION
(Confused, Curious, Convinced & Continuing)
Save Time. Feel Good.
Make Money.
The Golden Circle.(Why. How. What.)
As Soon as You’re Born You Start Learning
(Teach)
The Grammar of Interactive Design
(Silence, Surprise, Rhythm, Subtraction, Magic & Serendipity)
Be Predictable(Create opportunity for surprises)
DemonstrateDesign Principles
(Layout & Composition, Color, TextureTypography, Imagery, etc.)
The Principles of Beautiful Web Design http://chsweb.me/pbwd2nd
Leverage Givens(More design. Less thinking.)
Leverage Givens(More design. Less thinking.)
Tell the Story(What is and what could be.)
Nancy Duarte, The secret structure of great talks http://chsweb.me/nncydrt
Examples(Cars. Computers. Athletes.)
Theory, Lenses & Core Principles
@%#! Designers Say, but Shouldn’t
Design Methodology
≡DESIGN OSOPH
@%#! you said… …they’re thinking
TRY THIS INSTEAD:
“What questions do you have?”
“Do you have any questions?” “No way I’m asking a question, everybody will think I am dumb.”
≡DESIGN OSOPH
@%#! you said… …they’re thinking
TRY THIS INSTEAD:
“Did I explain that well enough?”“What part of that can I explain better?”
“Does that make sense?” “Are you smart enough to understand what I just told you?”
≡DESIGN OSOPH
@%#! you said… …they’re thinking
TRY THIS INSTEAD:
I recommend blue, because [x] & [y].
“Honestly, blue is better…” “Wait, we’re you lying before? Are you not being honest all the time? Wait, time out, I missed that next bit.”
≡DESIGN OSOPH
@%#! you said… …they’re thinking
TRY THIS INSTEAD:
Earlier, we decided to make it blue because…
“Again, we made it blue because…” “Geez, you are getting irritated with me! You’re assuming I’m too dumb or wasn’t listening THE FIRST TIME?”
≡DESIGN OSOPH
@%#! you said… …they’re thinking
TRY THIS INSTEAD:
Replace with a pause (1…2…3) instead.
“No offense, but [insert anything]” “I am offended!! And now, I’m gonna’ be a real ass hat for the next 5 minutes.”
≡DESIGN OSOPH
@%#! you said… …they’re thinking
TRY THIS INSTEAD:
Replace with a pause (1…2…3) instead.
“You know, [insert anything]” “Nope, I don’t know. If I did know, I wouldn’t need to pay you to tell me.”
≡DESIGN OSOPH
“I can see where you are coming from, but blue is much better”
“Blah blah blah, but blue is much better…
I can see where you are coming from, however your audience prefers blue.
TRY THIS INSTEAD
@%#! you said… …they’re thinking
≡DESIGN OSOPH
“kind of, sort of, maybe…” You don’t know, you are not confident, you may not be dependable or you are hiding something.
Let me add that to my list of action items & I’ll follow up with you right away.
TRY THIS INSTEAD
@%#! you said… …they’re thinking
Theory, Lenses & Core Principles
@%#! Designers Say, but Shouldn’t
Design Methodology
DiscoveryUser Research
Information ArchitectureVisual Design
ProductionLaunch
Discovery(Goals, Audience & Strategy)
≡DESIGNOSOPHY
Client Name Here I Create. You Learn. WePiphany® Discovery
WePiphany, LLC | PROPRIETARY INFORMATION PAGE 2
1 Discovery Overview This Discovery Worksheet will help the entire project team articulate, identify, and understand how well the current website is performing, where it can be improved, and where it is doing very well and needs to be preserved. Completing this Worksheet will provide <My Company Name> with a deeper understanding of your organization’s needs so that we can make recommendations for a better web experience for your organization and your organization’s target audiences.
1.1 What Does This Worksheet Cover? 1. Target Audience Analysis 2. Goal S.W.O.T.S. Analysis 3. Website Channel Evaluation 4. Findings & Recommendations
1.2 Who Should Complete this Worksheet? Work collaboratively amongst your organization’s primary stakeholders, or have each primary decision maker complete his or her own survey. Whether completed collaboratively or individually, what’s most important is that we get consensus from everyone with decision-making responsibilities or influence. Answering each question in a thorough but concise manner will allow <My Company Name> to provide more specific recommendations.
1.3 Expected Completion Time You should be able to complete this worksheet in 90 minutes; add additional time for internal collaboration to reach final consensus amongst your decision-making team.
1.4 Project Milestones
Mobile Project Calls Purpose Date Discovery Kickoff Website Discovery overview, gather requirements, identify
project goals August 19, 2014
Target Audiences and Goal S.W.O.T.S.
Complete organization information for target audiences and website goals.
Month DD, YYYY
Findings & Recommendations
Presentation of the Discovery findings and recommendations Month DD, YYYY (+10 days)
Discovery Close Optional call to address any remaining questions or concerns
Month DD, YYYY (+5 days)
Discovery OverviewSummarize what is included
Tell them who should participate
Outline project milestones
≡DESIGNOSOPHY
Client Name Here I Create. You Learn. WePiphany® Discovery
WePiphany, LLC | PROPRIETARY INFORMATION PAGE 8
3 Goal S.W.O.T.S. Analysis Defining goals for your website is a significant step in developing an effective and successful website strategy and marketing plan. However, simply having goals is not enough. <My Company Here>’s comprehensive approach to website strategy and marketing is based upon understanding the Strengths, Weaknesses, Opportunities, Threats and Success Criteria (S.W.O.T.S.) as they relate to each of your organization’s website and marketing goals.
What are Strengths? Strengths are things that your organization currently does very well or activities that have lead to positive and measurable outcomes. Strengths are also characteristics of an organization that provide a competitive advantage over others in the industry.
What are Weaknesses? Weaknesses are things that your organization currently does not do very well or activities that have resulted in negative outcomes. Weaknesses, whether perceived or actual, interfere with or have a negative impact on a competitive advantage over others in the industry.
What are Opportunities? Opportunities are activities or initiatives that provide an organization with additional positive growth without negatively impacting existing strengths. Opportunities are also activities or initiatives that your competitors are unaware of that customers relative to your organization need; these are known as gap opportunities. Gap opportunities may not last long; competitors relative to your organization may become aware of the same gap and meet the need before your organization can.
What are Threats? Threats are known or predictable factors beyond the organization’s control, which could place an organization’s mission or operation at risk. Threats that are perceived as internal should be categorized as opportunities or weaknesses. Threats are subject to change over time; a threat today may not be a threat next year.
What is Success Criteria? Success Criteria is a measurable figure or metric that we can capture and monitor for a particular goal. For example, “Increase our email list from 9,000 subscribers to 12,000 in six months.”
Using the information above, complete the following Goal S.W.O.T.S. information:
Teach your customers firstWhat are Strengths?
What are Weaknesses?
What are Opportunities?
What are Threats?
What is Success Criteria?
≡DESIGNOSOPHY
Client Name Here I Create. You Learn. WePiphany® Discovery
WePiphany, LLC | PROPRIETARY INFORMATION PAGE 9
3.1 Website Goal 1 of 3
Enter your first website goal here…
3.1.1 Strengths What Strengths exist for this goal? Elaborate here…
3.1.2 Weaknesses What Weaknesses exist for this goal? Elaborate here…
3.1.3 Opportunities What Opportunities exist for this goal? Elaborate here…
3.1.4 Threats What Threats exist for this goal? Elaborate here…
3.1.5 Success Criteria: How will we know if we achieve this goal? What current or desired metrics have been established for this goal? Elaborate here…
3.2 Website Goal 2 of 3
Enter your second website goal here…
3.2.1 Strengths What Strengths exist for this goal? Elaborate here…
3.2.2 Weaknesses What Weaknesses exist for this goal? Elaborate here…
Make it easy to define project goalsStrength
Weakness
Opportunity
Threat
Success Criteria
≡DESIGNOSOPHY
Client Name Here I Create. You Learn. WePiphany® Discovery
WePiphany, LLC | PROPRIETARY INFORMATION PAGE 4
2 Audience Analysis The success of your website is highly dependent on how effectively it communicates with your organization’s target audiences and how effectively it enables them to complete mission-critical tasks online. The first step in communicating with your target audiences is to identify who they are and what they need to be able to do on your website. The purpose of this section of the document is to identify target audiences, the subgroups (or variations) that exist within each segment, and the tasks that each subgroup must be able to complete online. <My Company name> will discuss each target audience segment, subgroup, and task below in greater detail during the upcoming Visual Design Discovery phase of your project.
What are Target Audience Segments? Target Audience Segments are broad or encompassing categories that can be used to group similar types of website audiences together. For example, Alumni, Donors, or Activists are just a few potential target audience segments. Each target audience segment will have different goals or different reasons for visiting your website.
What are Target Audience Subgroups? Subgroups are variations that exist within a target audience segment. Subgroup variations are generally based on demographic information or desired website actions or activities. For example, the Alumni target audience segment might include the following subgroups: Recent Graduates, Older Graduates, or Alumni active on Social Networks.
What are Target Audience Tasks? Think about the activities, tasks, or actions that each of the target audiences segments and subgroups can do to support your organization. What would you have them do if you had 100% control over the activities or tasks that they completed on your website? Keep in mind that you may have hundreds of a particular target audience accessing your website every day – what would you have all of them do?
What are Tasks Priority Ratings? A priority rating is assigned to each task based on the scale outlined below. Assigning a rating helps us focus our attention and energy on what matters most to your audience and your organization’s leadership. Task Priority Frequency Impact on Mission
High Daily Critical
Medium Weekly Significant
Low Monthly/Yearly Minimal
Note: A task with low frequency can still be a high priority where impact on mission trumps the frequency.
Using the information above, complete the following audience segment and task information:
Teach your customers firstWhat are Target Audiences?
What are Audience Subgroups?
What are Audience Tasks?
What are Task Priority Ratings?
≡DESIGNOSOPHY
Client Name Here I Create. You Learn. WePiphany® Discovery
WePiphany, LLC | PROPRIETARY INFORMATION PAGE 5
2.1 Target Audience Segment 1 of 3 (e.g. Doctors)
Define your first target audience segment here…
2.1.1 Subgroup 1 of 2 (e.g. Orthopedic Surgeons) Define the first subgroup (or variation) for this segment here…
Subgroup Tasks Enter up to three tasks for this subgroup. For each task, place an “X” in the appropriate priority-rating cell to the right.
Task Priority High Medium Low
This is a sample task with a “High” priority rating; replace me with your first task & rating. X
Enter a website task this subgroup needs to be able to complete on the new site…
Enter a website task this subgroup needs to be able to complete on the new site…
Tip - Enter your task; then press the tab key to move horizontally across the Task Priority cells to enter “X” where appropriate.
2.1.2 Subgroup 2 of 2 (e.g. Orthopedic Assistants) Define the second subgroup (or variation) for this segment here…
Subgroup Tasks Enter up to three tasks for this subgroup. For each task, place an “X” in the appropriate priority-rating cell to the right.
Task Priority High Medium Low
This is a sample task with a “High” priority rating; replace me with your first task & rating. X
Enter a website task this subgroup needs to be able to complete on the new site…
Enter a website task this subgroup needs to be able to complete on the new site…
Tip - Enter your task; then press the tab key to move horizontally across the Task Priority cells to enter “X” where appropriate.
2.2 Target Audience Segment 2 of 3
Define your first target audience segment here…
2.2.1 Subgroup 1 of 2 Define the first subgroup (or variation) for this segment here…
Target AudienceMake it easy to define target audiences
• Target Audiences
•Audience Subgroups
•Audience Tasks
•Task Priority Ratings
≡DESIGNOSOPHY
Target Audience AnalysisData makes things better
•See trends in tasks & tags
•Priorities become clear
• Informs Content Strategy
• Informs the Site Map
• Informs wireframes
• Informs conversion testing
≡DESIGNOSOPHY
Client Name Here I Create. You Learn. WePiphany® Discovery
WePiphany, LLC | PROPRIETARY INFORMATION PAGE 11
4 VISUAL DESIGN STRATEGY The purpose of this section of the document is to explore your organization’s creative side by focusing on word association, your organization’s brand, and websites for inspiration. <My company name> will discuss each response below in greater detail during the upcoming Visual Design Discovery phase of your project.
4.1 What is the purpose of your organization? Give your organization’s “elevator pitch.” Describe the change you affect on a day-to-day basis, the people you help, and why your constituents work with you rather than your competitors. Why is your organization the best?
4.2 Why have you chosen a website redesign at this time? Explain why you decided on a website redesign at this time? Do you have organizational changes that require a new web presence? Describe the nature of this project and include any relevant background information that will help Blackbaud understand your organization’s need for a website redesign.
4.3 Tell us more about your current website(s). Does your current website promote a favorable user experience? Why or why not? Have you had specific constituent feedback regarding your current site? What specific areas of your site do you feel are successful? What shortcomings exist? Please cite specific examples and include links to examples where possible.
4.4 Project Staffing I: Who are the primary decision makers? List the individual names, titles, and email addresses of primary decision makers whom will influence and ultimately approve project decisions and deliverables.
4.5 Project Staffing II: Who are the “final” decision makers? Do the primary decision makers listed above report to Board Members, the CEO, or higher level of decision makers within your organization? If so, how do you currently prefer to communicate with them?
Visual Design StrategyWhat is your mission?
Who are the decision makers
Adjectives and Emotions
Inspiration sites
Current marketing material
Access or install Google Analytics
≡DESIGNOSOPHY
Findings & RecommendationsPresent findings
Make objective recommendations
Review inspiration sites
Get sign off on proposed direction
User Research
≡DESIGNOSOPHY
Personas for Target AudiencesName
Age
Relationship to organization
Technical skills
Key attributes
Day-in-the-life overview
Website usage goals
vv
≡DESIGNOSOPHY
Personas for Target AudiencesName
Age
Relationship to organization
Technical skills
Key attributes
Day-in-the-life overview
Website usage goals
≡DESIGNOSOPHY
Personas for Target AudiencesName
Age
Relationship to organization
Technical skills
Key attributes
Day-in-the-life overview
Website usage goals
≡DESIGNOSOPHY
Easy Usability TestingUsability Hub
Test conversion paths from Discovery Goals and Target Audience Tasks
•Send tests to target audience email
•Test with general users
•Restrict to defined demographics
• Test current solution (if possible)
• Test again on wireframes
• Test again on visual designs
• Test again in Google Analytics
Get 40 free test credits
http://chsweb.me/1i22wM5
≡DESIGNOSOPHY
Easy Usability TestingUsability Hub
Test conversion paths from Discovery Goals and Target Audience Tasks
•Send tests to target audience email
•Test with general users
•Restrict to defined demographics
• Test current solution (if possible)
• Test again on wireframes
• Test again on visual designs
• Test again in Google Analytics
Get 40 free test credits
http://chsweb.me/1i22wM5
≡DESIGNOSOPHY
Easy Usability TestingUsability Hub
Test conversion paths from Discovery Goals and Target Audience Tasks
•Send tests to target audience email
•Test with general users
•Restrict to defined demographics
• Test current solution (if possible)
• Test again on wireframes
• Test again on visual designs
• Test again in Google Analytics
Get 40 free test credits
http://chsweb.me/1i22wM5
≡DESIGNOSOPHY
Easy Usability TestingUsability Hub
Test conversion paths from Discovery Goals and Target Audience Tasks
•Send tests to target audience email
•Test with general users
•Restrict to defined demographics
• Test current solution (if possible)
• Test again on wireframes
• Test again on visual designs
• Test again in Google Analytics
Get 40 free test credits
http://chsweb.me/1i22wM5
≡DESIGNOSOPHY
Findings & RecommendationsPresent findings
Make objective recommendations
Review inspiration sites
Get sign off on proposed direction
InformationArchitecture
≡DESIGNOSOPHY
Site Maps via Target Audience DataResearch and data collected during Visual Design Discovery and User Research inform the development of a more effective, more audience-centric site map.
•Target Audience Tasks
• Convert tags to links based
• Sort by total occurrences & priority rating
•Google Analytics
•Usability Test Findings
≡DESIGNOSOPHY
Site Maps via Card Sorting (on site)Conducted with real people that align target audience personas
•great if you can get it
• the best way to learn is in person
•Expensive
≡DESIGNOSOPHY
Site Maps via Card Sorting (online)Conducted online with real people that align target audience personas
• free to low cost option
• still
≡DESIGNOSOPHY
Site Maps via Card Sorting (online)Conducted online with real people that align target audience personas
• free to low cost option
• still
≡DESIGNOSOPHY
Building Site MapsFor one reason or another, site maps always seem to end up back in Microsoft Word.
•Keep the presentation simple
•HTML is cool, but not easy to edit
•Simple bullet lists are fast & easy
≡DESIGNOSOPHY
WireframesTarget audience tasks with the highest priority, and most occurrences are mapped to prime website real estate via wireframes.
•This is where copy editors shine
• content-first focus
•Convert The Four Cs
•Don’t forget Why > How > What
Visual Design
≡DESIGNOSOPHY
Visual Design
≡DESIGNOSOPHY
≡DESIGNOSOPHY
≡DESIGNOSOPHY
≡DESIGNOSOPHY
≡DESIGNOSOPHY
Production
≡DESIGNOSOPHY
≡DESIGNOSOPHY
≡DESIGNOSOPHY
Launch
≡DESIGNOSOPHY
Coming Soon Pro for WordPress
Don’t Wait to Go Live
Set up in minutes
Built right here in Charleston!
Lots of customization & integrations
≡DESIGNOSOPHY
Coming Soon Pro
Integrated with Campaign Monitor
Ran a referral contest
33% of sign ups referred somebody
≡DESIGNOSOPHY
Go Live Campaign Planning
Convert what you know in to content
Market Discovery Goals
•Apply S.W.O.T.S.
Speak to the Target Audience
•Revisit Personas
Funnel into Conversion Path
•The Four Cs
•Why > How > What
•Save time. Feel Good. Make Money.
Measure
•Revisit Success Criteria
1. What is our mission?
You can skip this one if you want, but it may help to have your mission in front of you while thinking about writing this content.
2. What is the objective of this campaign/initiative?
Keep this answer short, less than 60 characters, including white space.
3. What is a single word, or a two or three word phrase that describes this campaign or initiative?
Summarize #2 above using a single word or phrase
4. Elevator pitch! You’ve got 5 seconds, tell us why this initiative is worth our time.
Keep this description short, 120 characters or less. Make sure that you include the word or phrase from #3 as close to the beginning as possible.
5. What photo and/or video can be used to illustrate this initiative/campaign? Alternate Text:Photo or video file (.jpg, .png, .mov, .mp4, etc.) Close your eyes and describe this photo or video using as few words as possible. Include #3.
6. What is the web address for more information? QR Code:Friendly URL containing the the word or series-of-words-separated-by-dashes from #3 above. Shortened URL and QR code for this web address (E.g. bit.ly).
F1st Paragraph
Title (Meta)A
D
E
B Friendly URL Friendly URL
C Heading One
Keyword(s)
Description (Meta)
G Photo/Media
B
≡DESIGNOSOPHY
Convert what you know in to content
TXT MSG
Direct Mail
FacebookTwitter
YouTube
SearchEngines
Directory
Content
≡DESIGNOSOPHY
Convert what you know into content
Title (Meta)
Friendly URL
Heading One
Keyword(s)
1st Paragraph
Description (Meta)
Photo/Media
A
B
C
D
E
F
G
http://google.com
≡DESIGNOSOPHY
Monitor Success CriteriaMake it Measurable
THANK YOU!!
SAY HELLO@chsweb