The (simple &) strategic approach to web design

The Strategic Approach to DesignRaheel Gauba

1

Raheel Gauba © 2010 Blackbaud

why?


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


75%of web users admit making judgements about the credibility of an organization based on the design of its website


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”


really?that simple?


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)


Who is your target audience?1. Check your CRM2. Interview staff members (at all levels)3. Think about new categories of audiences4. Prioritize!


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


What do you want them to do?1. Be thorough...2. Current activities + future desired activities3. Prioritize!4. Select top 5


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


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!


Usability Testing


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:

[email protected]

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:

[email protected]

Grab the RSS feed and follow us on Twitter.


Usability Testing


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.


Usability Testing - example


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


Usability Testing - card sorting example


Analysis >What to change?1. Look for trends2. Tackle the quick and easy fixes first3. Work on navigation > labels > layout > design4. Repeat!


Amazon.com added $2.5B to their revenue stream by adjusting the sort order of user comments.


Microsoft’s Bing.com search engine increased their revenue by $80M just by adjusting the color of their hyperlinks


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.

why,thank you!

raheel gauba

brand leader & creative director blackbaud

twitter: @raheelgaubaemail: [email protected]

facebook: Raheel Gauba

mailto:[email protected]

mailto:[email protected]

The (simple &) strategic approach to web design

Documents

Transcript of The (simple &) strategic approach to web design