presented by: jono young, senior designer › files › resources › ... · of 43 site build...

Presented By:

Jono Young, Senior Designer

of 43

Before We Get Started…

� We will be muting all lines. Please use the Q&A box to ask questions

� Please do not put the call on hold – please hang up and call back to eliminate hold music playing during the session

Optimize Viewing the Event

© 2010 Blackbaud

� Hit the F5 key to put the window into full-screen mode

� Close all other applications

� Increase your computer’s screen resolution

• Start Menu

• Control Panel

• Display

• Settings Tab

• Increase screen resolution by moving the slide all the way to the ‘More’ side (right)

• Click Apply and OK

What is Indestructible Design?

of 43


indestructible

in•de•struct•i•ble | adjective

not able to be destroyed

01

© 2010 Blackbaud

of 43


indestructible



02

design

de•sign | verb

to plan and fashion the form and

structure of an object, work of art,

decorative scheme, etc.

© 2010 Blackbaud

of 43


indestructible



03

design

de•sign | verb




© 2010 Blackbaud

A __________ not able to be destroyed

a. plan

b. form

c. structure

d. work of art

e. decorative scheme

of 43


indestructible



04

design

de•sign | verb




© 2010 Blackbaud

A __________ not able to be destroyed

a. plan

b. form

c. structure

d. work of art

e. decorative scheme

Indestructible design | process

a collaborative and objective approach

to solving problems related to design.

of 43


Audience Needs

33%

05

© 2010 Blackbaud

of 43


Audience Needs

33%

06

Client/Stakeholder Needs

33% 33%

© 2010 Blackbaud

of 43


Audience Needs

33%

07


33% 33%

© 2010 Blackbaud

Industry Knowledge

33% 33%

33%

of 43


Audience Needs

33%

08


33% 33%

© 2010 Blackbaud

Industry Knowledge

33% 33%

33%

100% Methodology…

Our Methodology

of 43

Go Behind the Scenes

Input and OutputInformation gathered at the beginning of each project phase is analyzed and converted into usable output. The output of the previous phase becomes

09

© 2010 Blackbaud

output of the previous phase becomes the input of the next phase.

Follow AlongThis process allows you to see how we are

progressing at every step of the project.

No energy is wasted, and every bit of

information that you provide is evaluated and utilized as we design solutions for you and your audience’s problems.

of 43

Our Methodology

Designing a successful Web site requires research, team work, clear

communication, and a strategic approach. This is how we do it:

10

© 2010 Blackbaud

of 43

Visual Design Discovery WorkshopWe learn as much as we can about your organization and goals before

visual design work begins.

11

© 2010 Blackbaud

of 43

Visual Design Discovery Input

� Input

• Creative Worksheet

• Review current site

• Review mission and goals

• Review websites you find appealing

• Review your competitors

12

© 2010 Blackbaud

• Review your competitors

of 43

Visual Design Discovery Output

� Output

• Summary of Design Discovery findings

• Present and validate findings and vision before work begins

13

© 2010 Blackbaud

of 43

Functional Design Discovery WorkshopBased on organization needs, we collaborate to determine a strategy for

how specific functions will be built.

14

© 2010 Blackbaud

of 43

Functional Design Discovery Input

� Primarily handled by Blackbaud NetCommunity Consultant

� High level blueprint for functions that helps to clarify intent and plan

� Overview of affected site map

Identify any gaps in functionality and needs

15

© 2010 Blackbaud

� Identify any gaps in functionality and needs

of 43

Functional Design Discovery Output

� Document decisions for future Design Function Configuration sessions

� Takeaway document outlines what functions receive the highest priority

� Configured Blackbaud NetCommunity parts

16

© 2010 Blackbaud

of 43

Audience AnalysisUnderstanding your audience and their ability to complete various actions

online is critical to planning Web site revisions.

17

© 2010 Blackbaud

of 43

Audience Analysis Input

� …Output from Discovery Workshop

� Define audience segments and sub groups

� Define mission critical tasks per each segment

� Rate frequency of completion for each task

18

© 2010 Blackbaud

of 43

Audience Analysis OutputsInformation is presented in a visual manner so it is easy to understand.

This data sets the stage for the User Research Workshop

19

© 2010 Blackbaud

of 43

User Research WorkshopUnderstanding your audience’s ability to complete mission-critical tasks or

actions online will guide information architecture revisions.

20

© 2010 Blackbaud

of 43

User Research Workshop Input

� …Revisit Output from Discovery Workshop

� …Revisit Output from Audience Analysis

� Usability Test

� Audience Interviews are converted to Persona Documents

21

© 2010 Blackbaud

of 43

User Research Workshop Input – Usability TestAudience Segment tasks are tested (based on priority) and results are

recorded.

22

© 2010 Blackbaud

of 43

User Research Workshop Input – Usability ReportA tiny camera, combined with screen capture software, allows us to record

real-time Web site activity along the user’s facial expressions and voice.

23

© 2010 Blackbaud

of 43

User Research FindingsThe invaluable information and data collected during the User Research

Workshop is organized and presented.

24

© 2010 Blackbaud

of 43

User Research Findings

� Persona Documentation

• Audience profile for each usability test participant

� Usability Test Report

• Real-time recordings of each task and note worth

occurrences during the usability test

� Heuristic Evaluation

25

© 2010 Blackbaud

� Heuristic Evaluation

• Report success rate for each audience task

• Test participant interview questions

• Summary of data, research, and study findings

of 43

User Research Findings OutputsReal-time recordings from the on-site Usability Study captures online user

behavior while Persona Documentation captures actual constituent profiles

26

© 2010 Blackbaud

of 43

User Research Findings OutputThe Heuristic Evaluation summarizes the User Research Workshop data

and findings into a visual and informative presentation.

27

© 2010 Blackbaud

of 43

Information ArchitectureWe can begin to re-architect your Web site now that we have a thorough

understanding of your audience and their behaviors.

28

© 2010 Blackbaud

of 43

Information Architecture Input

� …Revisit Output from previous phases

� Navigation Workshops

• Conduct card sorting exercises with your audience segments to capture their perception of your Web site’s

hierarchy

• Alternately we can conduct a closed Stakeholder Task

29

© 2010 Blackbaud

• Alternately we can conduct a closed Stakeholder Task Sheet navigation workshop if card sorting is not feasible

� Tag common Audience Segment Tasks and Usage Goals from the Persona Documents

� Industry Analysis

of 43

Information Architecture OutputCompare Tagged Audience Segment Tasks to Our Industry Analysis

31

© 2010 Blackbaud

of 43

Information Architecture OutputSite Maps come in many formats; we deliver a format that works best for

our clients – PDF, Microsoft Visio or Microsoft Word

32

© 2010 Blackbaud

of 43

Visual Website DesignWe know your audience, we know where your content will live, and we

know your site’s structure. Now we will make it look great!

34

© 2010 Blackbaud

of 43

Visual Website Design Input

� …Input from previous project phases

� Visual design decisions are made based on findings and data gathered in previous workshops and interviews

� Blackbaud’s design team and Art Director work closely together to make intelligent, and objective design decisions based on research findings and information

35

© 2010 Blackbaud

decisions based on research findings and information architecture

of 43

Site BuildOnce your designs are approved, we will begin the development of your

Blackbaud NetCommunity Web site pages.

37

© 2010 Blackbaud

of 43

Site Build Overview

� Your design is transformed from static art into HTML layouts, templates, and pages inside the Blackbaud NetCommunity CMS

� Pages and “Parts” are built according to your Scope of Work

� We will begin to create all of your Web site pages and

38

© 2010 Blackbaud

� We will begin to create all of your Web site pages and content if your Scope of Work contains Content Migration.

� Your site is delivered and reviewed before we hand over the keys for End User Training

• You will have an evaluation period where you can review

your completed site an submit change requests

of 43

End User TrainingGet familiar with Blackbaud NetCommunity functionality and how it

integrates with The Raiser’s Edge.

40

© 2010 Blackbaud

of 43

Advanced Design TrainingGet the customized training you and your team needs to take your

Blackbaud NetCommunity Web site to the next level.

41

© 2010 Blackbaud

Please feel free to type your question into the Q&A chat box:

Questions?

© 2010 Blackbaud

Think of something later today you wish you’d asked?

If you have questions or would like more information, please feel free to email your account manager or marketing team:

Account Manager Mailbox: [email protected]

Allison Van Diest, Internet Solutions Mktg Mgr: [email protected]

Thank you for joining us today!