Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build...
Transcript of Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build...
![Page 1: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/1.jpg)
Presented By:
Jono Young, Senior Designer
![Page 2: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/2.jpg)
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
![Page 3: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/3.jpg)
What is Indestructible Design?
![Page 4: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/4.jpg)
of 43
What is Indestructible Design?
indestructible
in•de•struct•i•ble | adjective
not able to be destroyed
01
© 2010 Blackbaud
![Page 5: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/5.jpg)
of 43
What is Indestructible Design?
indestructible
in•de•struct•i•ble | adjective
not able to be destroyed
02
design
de•sign | verb
to plan and fashion the form and
structure of an object, work of art,
decorative scheme, etc.
© 2010 Blackbaud
![Page 6: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/6.jpg)
of 43
What is Indestructible Design?
indestructible
in•de•struct•i•ble | adjective
not able to be destroyed
03
design
de•sign | verb
to plan and fashion the form and
structure of an object, work of art,
decorative scheme, etc.
© 2010 Blackbaud
A __________ not able to be destroyed
a. plan
b. form
c. structure
d. work of art
e. decorative scheme
![Page 7: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/7.jpg)
of 43
What is Indestructible Design?
indestructible
in•de•struct•i•ble | adjective
not able to be destroyed
04
design
de•sign | verb
to plan and fashion the form and
structure of an object, work of art,
decorative scheme, etc.
© 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.
![Page 8: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/8.jpg)
of 43
What is Indestructible Design?
Audience Needs
33%
05
© 2010 Blackbaud
![Page 9: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/9.jpg)
of 43
What is Indestructible Design?
Audience Needs
33%
06
Client/Stakeholder Needs
33% 33%
© 2010 Blackbaud
![Page 10: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/10.jpg)
of 43
What is Indestructible Design?
Audience Needs
33%
07
Client/Stakeholder Needs
33% 33%
© 2010 Blackbaud
Industry Knowledge
33% 33%
33%
![Page 11: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/11.jpg)
of 43
What is Indestructible Design?
Audience Needs
33%
08
Client/Stakeholder Needs
33% 33%
© 2010 Blackbaud
Industry Knowledge
33% 33%
33%
100% Methodology…
![Page 12: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/12.jpg)
Our Methodology
![Page 13: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/13.jpg)
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.
![Page 14: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/14.jpg)
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
![Page 15: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/15.jpg)
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
![Page 16: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/16.jpg)
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
![Page 17: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/17.jpg)
of 43
Visual Design Discovery Output
� Output
• Summary of Design Discovery findings
• Present and validate findings and vision before work begins
13
© 2010 Blackbaud
![Page 18: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/18.jpg)
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
![Page 19: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/19.jpg)
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
![Page 20: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/20.jpg)
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
![Page 21: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/21.jpg)
of 43
Audience AnalysisUnderstanding your audience and their ability to complete various actions
online is critical to planning Web site revisions.
17
© 2010 Blackbaud
![Page 22: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/22.jpg)
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
![Page 23: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/23.jpg)
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
![Page 24: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/24.jpg)
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
![Page 25: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/25.jpg)
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
![Page 26: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/26.jpg)
of 43
User Research Workshop Input – Usability TestAudience Segment tasks are tested (based on priority) and results are
recorded.
22
© 2010 Blackbaud
![Page 27: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/27.jpg)
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
![Page 28: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/28.jpg)
of 43
User Research FindingsThe invaluable information and data collected during the User Research
Workshop is organized and presented.
24
© 2010 Blackbaud
![Page 29: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/29.jpg)
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
![Page 30: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/30.jpg)
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
![Page 31: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/31.jpg)
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
![Page 32: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/32.jpg)
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
![Page 33: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/33.jpg)
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
![Page 34: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/34.jpg)
of 43
Information Architecture InputCard Sorting Exercises and Stakeholder Navigation Task Sheets
30
© 2010 Blackbaud
![Page 35: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/35.jpg)
of 43
Information Architecture OutputCompare Tagged Audience Segment Tasks to Our Industry Analysis
31
© 2010 Blackbaud
![Page 36: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/36.jpg)
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
![Page 37: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/37.jpg)
of 43
Information Architecture OutputWire Frames place tagged and/or important content
33
© 2010 Blackbaud
![Page 38: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/38.jpg)
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
![Page 39: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/39.jpg)
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
![Page 40: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/40.jpg)
of 43
Visual Website Design Output
36
© 2010 Blackbaud
![Page 41: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/41.jpg)
of 43
Site BuildOnce your designs are approved, we will begin the development of your
Blackbaud NetCommunity Web site pages.
37
© 2010 Blackbaud
![Page 42: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/42.jpg)
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
![Page 43: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/43.jpg)
of 43
Site Build Output
39
© 2010 Blackbaud
![Page 44: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/44.jpg)
of 43
End User TrainingGet familiar with Blackbaud NetCommunity functionality and how it
integrates with The Raiser’s Edge.
40
© 2010 Blackbaud
![Page 45: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/45.jpg)
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
![Page 46: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/46.jpg)
of 43
We’ll take care of best practices…
42
© 2010 Blackbaud
![Page 47: Presented By: Jono Young, Senior Designer › files › resources › ... · of 43 Site Build Overview Your design is transformed from static art into HTML layouts, templates, and](https://reader035.fdocuments.in/reader035/viewer/2022070814/5f0e467e7e708231d43e7418/html5/thumbnails/47.jpg)
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!