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

http://chsweb.me/pbwd2nd

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.)



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


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


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


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


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


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


≡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




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



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



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



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



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…


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



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



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


Age


Technical skills

Key attributes


Website usage goals

http://www.jotform.com

≡DESIGNOSOPHY


Age


Technical skills

Key attributes


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














≡DESIGNOSOPHY














≡DESIGNOSOPHY














≡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

Email

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

Google

http://google.com

http://google.com

http://google.com

≡DESIGNOSOPHY

Monitor Success CriteriaMake it Measurable

THANK YOU!!

SAY HELLO@chsweb

DESIGNOSOPHY

Design

design osoph kind

shouldnt design methodology

discovery goals

discovery worksheet

discovery findings

website goals

project goals

days discovery overview