The (simple &) strategic approach to web design
-
Upload
raheel-gauba -
Category
Documents
-
view
1.053 -
download
0
Transcript of The (simple &) strategic approach to web design
The Strategic Approach to DesignRaheel Gauba
1
Raheel Gauba © 2010 Blackbaud
why?
Raheel Gauba © 2010 Blackbaud
Raheel Gauba © 2010 Blackbaud
why?
Raheel Gauba © 2010 Blackbaud
why?
Raheel Gauba © 2010 Blackbaud
why?
© 2010 BlackbaudRaheel Gauba3
Charity websites are poor campaigning tools and often fail to use the most effective web technologies
“ “- Precedent (Communications agency in UK)
March 19, 2010
...found the sites often lacked basic information about the charity and
appeared to have little overall strategy
© 2010 BlackbaudRaheel Gauba
68%of U.S. online shoppers agree that they will distrust a site that doesn’t have a professional appearance
© 2010 BlackbaudRaheel Gauba
75%of web users admit making judgements about the credibility of an organization based on the design of its website
© 2010 BlackbaudRaheel Gauba
it’s simplewhen users find information quickly and easily, they will return
when users have a positive user experience, they will recommend your site to others
repeat users are extremely valuable, they are more likely to “convert”
© 2010 BlackbaudRaheel Gauba
really?that simple?
© 2010 BlackbaudRaheel Gauba
really?that simple?
© 2010 BlackbaudRaheel Gauba
really?that simple?
© 2010 BlackbaudRaheel Gauba
really?that simple?
© 2010 BlackbaudRaheel Gauba
really?that simple?
Raheel Gauba © 2010 Blackbaud
yes.1. Who is your target audience? (audience analysis)2. What do you want them to do? (tasks)3. How do they do it today? (usability testing)4. What to change? (analysis)
© 2010 BlackbaudRaheel Gauba
Who is your target audience?1. Check your CRM2. Interview staff members (at all levels)3. Think about new categories of audiences4. Prioritize!
© 2010 BlackbaudRaheel Gauba
Audience Analysis
1. SupportersDonors (online, offline), team fundraisers, previous donors, members, email recipients, d.m. recipients, advocates of cure for AIDS, corporate donors, sponsors
2. Event Participants / ConsumersAuction participants, event attendees, ticket buyers, email recipients, fans
3. GranteesGrant recipients, stakeholders within health related services, other organizations
4. ProspectsCorporate, foundations, sponsors, researchers, broadway fans, celebrities, portfolio managers, AIDS researchers, past volunteers, members, email recipients, planned givers
5. Young AdultsActors, theatre/entertainment fans, social network participants
© 2010 BlackbaudRaheel Gauba
What do you want them to do?1. Be thorough...2. Current activities + future desired activities3. Prioritize!4. Select top 5
© 2010 BlackbaudRaheel Gauba
Tasks
1. Supporters1. Donate 2. Subscribe 3. How were the funds used? 4. Learn about sponsorships 5. Share
2. Event Participants / Consumers1. What’s for sale? 2. Buy Tickets 3. Purchase items 4. Order cards 5. Learn about events/merchandise
3. Grantees1. Ways to become a recipient 2. View other grantees 3. Apply online 4. Receive email 5. Feedback
4. Prospects1. Learn about sponsorships 2. How funds have been used 3. Giving opportunities 4. Event info
5. Young Adults1. Get involved via social networks 2. Become a team fundraiser 3. Ways to create awareness 4. Share
© 2010 BlackbaudRaheel Gauba
Usability Testing
1. Invite individuals from target audience2. Ask them to perform the tasks3. Record clicks, actions, expressions, questions4. Don’t help - ask questions instead!
© 2010 BlackbaudRaheel Gauba
Usability Testing
1. Invite individuals from target audience2. Ask them to perform the tasks3. Record clicks, actions, expressions, questions4. Don’t help - ask questions instead!
Silverback plays a vital role in understandinghow folks use Digg.com. While it’s not theonly usability tool I use, it’s the one I amusing most often.
so says Mark Trammell of Digg.com |Next testimonial »
Clearleft presents
Guerrilla usability testing software fordesigners and developers
Capture screen activity
Video the tester’s face
Record the tester’s voice
Add chapter markers on-the-fly
Control recording with theremote
Export to Quicktime
PreviewWatch sessions withinSilverback
Tasks & HighlightsSet tasks and mark noteworthymoments within a session
Batch ExportSave selected sessions, tasks,highlights or projects in one go
PerformanceFaster export, better usability
Features in 2.0 include
Silverback requiresMac OS X (10.4-10.6)
Usability testing is last on everybody’s list ofpriorities. It’s time-consuming, can requirespecialist equipment, and is expensive tooutsource. Not any more.
Silverback makes it easy, quick and cheap foreveryone to perform guerrilla usability testswith no setup and no expense, using hardwarealready in your Mac.
Silverback runs on Mac OSXTiger and Leopard with abuilt-in iSight or somealternative.
The software is free for 30days and only US $69.95 toregister from then on.
Clearleft is donating 10% ofall profits from Silverback tosaving the gorillas.
Clearleft is a user experience design consultancybased in Brighton, UK.
We make websites, and we always like to usability testour designs before letting them loose in the real world.We made Silverback to make our job easier. We hopeit makes yours easier, too.
© 2008-2010 Clearleft Ltd.
Sign up for news by email:
Grab the RSS feed and follow us on Twitter.
Silverback plays a vital role in understandinghow folks use Digg.com. While it’s not theonly usability tool I use, it’s the one I amusing most often.
so says Mark Trammell of Digg.com |Next testimonial »
Clearleft presents
Guerrilla usability testing software fordesigners and developers
Capture screen activity
Video the tester’s face
Record the tester’s voice
Add chapter markers on-the-fly
Control recording with theremote
Export to Quicktime
PreviewWatch sessions withinSilverback
Tasks & HighlightsSet tasks and mark noteworthymoments within a session
Batch ExportSave selected sessions, tasks,highlights or projects in one go
PerformanceFaster export, better usability
Features in 2.0 include
Silverback requiresMac OS X (10.4-10.6)
Usability testing is last on everybody’s list ofpriorities. It’s time-consuming, can requirespecialist equipment, and is expensive tooutsource. Not any more.
Silverback makes it easy, quick and cheap foreveryone to perform guerrilla usability testswith no setup and no expense, using hardwarealready in your Mac.
Silverback runs on Mac OSXTiger and Leopard with abuilt-in iSight or somealternative.
The software is free for 30days and only US $69.95 toregister from then on.
Clearleft is donating 10% ofall profits from Silverback tosaving the gorillas.
Clearleft is a user experience design consultancybased in Brighton, UK.
We make websites, and we always like to usability testour designs before letting them loose in the real world.We made Silverback to make our job easier. We hopeit makes yours easier, too.
© 2008-2010 Clearleft Ltd.
Sign up for news by email:
Grab the RSS feed and follow us on Twitter.
© 2010 BlackbaudRaheel Gauba
Usability Testing
1. Invite individuals from target audience2. Ask them to perform the tasks3. Record clicks, actions, expressions, questions4. Don’t help - ask questions instead!
Language: English Deutsch Français ��� 日本語
Products Downloads Support Community Company Purchase
Site Map | Privacy Policy | Security Center | Site Feedback | Accessibility [0]
© 1995-2010, TechSmith Corporation, All Rights Reserved | About TechSmith | Careers | Contact
Overview Tour Library Media Free Trial Buy Now
NEW VERSION
Camtasia Studio screen recorder and editor for Windows
Record onscreen activity Edit into a professional screencast video Share it anywhere
Download 30-Day TrialOverview Video
How Customers UseCamtasia Studio
Every day, thousands of people around the world use Camtasia Studio to
create videos that train, teach, sell, and more! It's the easiest way to
demonstrate a process, product, or idea.
Inform employees…
Demo screencast for thenew Hudson Intranet
“We were very pleased withhow easy it was to create acomplex production for ourIntranet launch using just onestaff member and less than 2days work.”– Kris Rzepkowski, Hudson
Narrow the distance in distance ed…
Orientation video for IT111 Internet & WebAuthoring
“I've got a nice collection ofmovies that I can often reuse.And instead of downloading alifeless PowerPoint file, studentsexperience something muchmore like a live presentation.”– Jean Kent, emeritus, NorthSeattle Community College
More customer content…
New in Camtasia Studio 7…The new library comes stocked with professionally designed assets you can drag-and-drop into your video. It's also the perfect place to store your callouts, titleslides, and other assets for re-use and sharing.
See all the new features »
Product Tour Download 30-Day Free Trial Buy Now
OverviewNew In Version 7Product Tour
How It's UsedCustomer List
Library MediaNews
Product Info
Free Trial
System Requirements
BuyUpgrade
Version ComparisonHistory
Education PricingHow to Buy
Get Camtasia Studio
Camtasia for Mac: Screen Recorder for MacCamtasia Relay: Enterprise Screen Recorder
Other Camtasia Products
Free TutorialsTechnical SupportUser-to-User ForumsRegister
Learning & Support
Newsletter Sign up
TechSmith Newsletter
Tips, tricks, and more sent
to your email inbox.
Language: English Deutsch Français ��� 日本語
Products Downloads Support Community Company Purchase
Site Map | Privacy Policy | Security Center | Site Feedback | Accessibility [0]
© 1995-2010, TechSmith Corporation, All Rights Reserved | About TechSmith | Careers | Contact
Overview Tour Library Media Free Trial Buy Now
NEW VERSION
Camtasia Studio screen recorder and editor for Windows
Record onscreen activity Edit into a professional screencast video Share it anywhere
Download 30-Day TrialOverview Video
How Customers UseCamtasia Studio
Every day, thousands of people around the world use Camtasia Studio to
create videos that train, teach, sell, and more! It's the easiest way to
demonstrate a process, product, or idea.
Inform employees…
Demo screencast for thenew Hudson Intranet
“We were very pleased withhow easy it was to create acomplex production for ourIntranet launch using just onestaff member and less than 2days work.”– Kris Rzepkowski, Hudson
Narrow the distance in distance ed…
Orientation video for IT111 Internet & WebAuthoring
“I've got a nice collection ofmovies that I can often reuse.And instead of downloading alifeless PowerPoint file, studentsexperience something muchmore like a live presentation.”– Jean Kent, emeritus, NorthSeattle Community College
More customer content…
New in Camtasia Studio 7…The new library comes stocked with professionally designed assets you can drag-and-drop into your video. It's also the perfect place to store your callouts, titleslides, and other assets for re-use and sharing.
See all the new features »
Product Tour Download 30-Day Free Trial Buy Now
OverviewNew In Version 7Product Tour
How It's UsedCustomer List
Library MediaNews
Product Info
Free Trial
System Requirements
BuyUpgrade
Version ComparisonHistory
Education PricingHow to Buy
Get Camtasia Studio
Camtasia for Mac: Screen Recorder for MacCamtasia Relay: Enterprise Screen Recorder
Other Camtasia Products
Free TutorialsTechnical SupportUser-to-User ForumsRegister
Learning & Support
Newsletter Sign up
TechSmith Newsletter
Tips, tricks, and more sent
to your email inbox.
© 2010 BlackbaudRaheel Gauba
Usability Testing - example
© 2010 BlackbaudRaheel Gauba
Usability Testing cont.
1. Create card sets containing top pages of site2. Ask audience to organize information (most
important to least + create groups)3. Observe the flow, record final iterations4. Don’t help - ask questions instead!5. Ask audience to organize info as one group
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Usability Testing - card sorting example
© 2010 BlackbaudRaheel Gauba
Analysis >What to change?1. Look for trends2. Tackle the quick and easy fixes first3. Work on navigation > labels > layout > design4. Repeat!
Raheel Gauba © 2010 Blackbaud
Amazon.com added $2.5B to their revenue stream by adjusting the sort order of user comments.
Raheel Gauba © 2010 Blackbaud
Microsoft’s Bing.com search engine increased their revenue by $80M just by adjusting the color of their hyperlinks
Raheel Gauba © 2010 Blackbaud
American Heart Association enjoyed a 60% increase in donations after conducting a usability analysis and making adjustments to the homepage, updating the design and improved the sign-in process.
© 2010 BlackbaudRaheel Gauba21
questions? answers?
why,thank you!
raheel gauba
brand leader & creative director blackbaud
twitter: @raheelgaubaemail: [email protected]
facebook: Raheel Gauba