SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Downloaden Sie, um offline zu lesen
The Strategic Approach to Design
           Raheel Gauba


                1
why?
   Raheel Gauba   © 2010 Blackbaud
Raheel Gauba   © 2010 Blackbaud
why?
   Raheel Gauba   © 2010 Blackbaud
why?
   Raheel Gauba   © 2010 Blackbaud
why?
   Raheel Gauba   © 2010 Blackbaud
“   Charity websites are poor
    campaigning tools and
    often fail to use the most
                     “
    effective web - Precedent (Communications agency in UK)
                                       March 19, 2010
    technologies

                        ...found the sites often lacked basic
                           information about the charity and
                      appeared to have little overall strategy


3                           Raheel Gauba               © 2010 Blackbaud
68%
 of U.S. online shoppers agree that
 they will distrust a site that doesn’t
 have a professional appearance




            Raheel Gauba           © 2010 Blackbaud
75%
 of web users admit making judgements
 about the credibility of an organization
 based on the design of its website




            Raheel Gauba          © 2010 Blackbaud
it’s simple
when users find information quickly and easily,
they will return
repeat users are extremely valuable,
they are more likely to “convert”
when users have a positive user experience,
they will recommend your site to others
                     Raheel Gauba          © 2010 Blackbaud
really?
that simple?
      Raheel Gauba   © 2010 Blackbaud
really?
that simple?
      Raheel Gauba   © 2010 Blackbaud
really?
that simple?
      Raheel Gauba   © 2010 Blackbaud
really?
that simple?
      Raheel Gauba   © 2010 Blackbaud
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)
                       Raheel Gauba          © 2010 Blackbaud
Who is your target
audience?
1. Check your CRM
2. Interview staff members (at all levels)
3. Think about new categories of audiences
4. Prioritize!
                      Raheel Gauba           © 2010 Blackbaud
Audience Analysis
1. Supporters
  Donors (online, offline), team fundraisers, previous donors, members, email recipients, d.m. recipients,
  advocates of cure for AIDS, corporate donors, sponsors
2. Event Participants / Consumers
  Auction participants, event attendees, ticket buyers, email recipients, fans
3. Grantees
  Grant recipients, stakeholders within health related services, other organizations
4. Prospects
  Corporate, foundations, sponsors, researchers, broadway fans, celebrities, portfolio managers, AIDS
  researchers, past volunteers, members, email recipients, planned givers
5. Young Adults
  Actors, theatre/entertainment fans, social network participants
                                                Raheel Gauba                                  © 2010 Blackbaud
What do you want
them to do?
1. Be thorough...
2. Current activities + future desired activities
3. Prioritize!
4. Select top 5
                        Raheel Gauba           © 2010 Blackbaud
Tasks
1. Supporters
  1. Donate 2. Subscribe 3. How were the funds used? 4. Learn about sponsorships 5. Share
2. Event Participants / Consumers
  1. What’s for sale? 2. Buy Tickets 3. Purchase items 4. Order cards 5. Learn about events/merchandise
3. Grantees
  1. Ways to become a recipient 2. View other grantees 3. Apply online 4. Receive email 5. Feedback
4. Prospects
  1. Learn about sponsorships 2. How funds have been used 3. Giving opportunities 4. Event info
5. Young Adults
  1. Get involved via social networks 2. Become a team fundraiser 3. Ways to create awareness 4. Share


                                             Raheel Gauba                               © 2010 Blackbaud
Usability Testing

1. Invite individuals from target audience
2. Ask them to perform the tasks
3. Record clicks, actions, expressions, questions
4. Don’t help - ask questions instead!
                       Raheel Gauba         © 2010 Blackbaud
Clearleft presents




Usability Testing
   Silverback plays a vital role in understanding
   how folks use Digg.com. While it’s not the
   only usability tool I use, it’s the one I am
   using most often.
   so says Mark Trammell of Digg.com |
   Next testimonial »                               Guerrilla usability testing software for
                                                    designers and developers
                                                       Capture screen activity              Add chapter markers on-the-fly

                                                       Video the tester’s face              Control recording with the
                                                                                            remote
                                                       Record the tester’s voice
                                                                                            Export to Quicktime



1. Invite individuals from target audience
                         Features in 2.0 include
2. Ask them to perform the tasks                        Preview                         Batch Export


3. Record clicks, actions, expressions, questions
                                                        Watch sessions within           Save selected sessions, tasks,
                                                        Silverback                      highlights or projects in one go

                                                        Tasks & Highlights              Performance


4. Don’t help - ask questions instead!
                                                        Set tasks and mark noteworthy   Faster export, better usability
                                                        moments within a session




                                                       Raheel Gauba                                                        © 2010 Blackbaud
              Silverback requires
Language:   English   Deutsch    Français


        Products      Downloads             Support               Community            Company           Purchase




Usability Testing                        Overview          Tour        Library Media        Free Trial     Buy Now




    NEW VERSION

1. Invite individuals from target audience
2. Ask them to perform the tasks
     Record onscreen activity          Edit into a professional screencast video            Share it anywhere



3. Record clicks, actions, expressions,Windows
        Camtasia Studio screen recorder and editor for questions

4. Don’t help - ask questions instead!                                   Overview Video      Download 30-Day Trial




     How Customers Use                 Every day, thousands of people around the world use Camtasia Studio to
                                                    Raheel Gauba                                                © 2010 Blackbaud
                                       create videos that train, teach, sell, and more! It's the easiest way to
     Camtasia Studio
Usability Testing - example




                         Raheel Gauba   © 2010 Blackbaud
Usability Testing cont.
1. Create card sets containing top pages of site
2. Ask audience to organize information (most
   important to least + create groups)
3. Observe the flow, record final iterations
4. Don’t help - ask questions instead!
5. Ask audience to organize info as one group
                       Raheel Gauba          © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Usability Testing - card sorting example




                         Raheel Gauba      © 2010 Blackbaud
Analysis >
What to change?
1. Look for trends
2. Tackle the quick and easy fixes first
3. Work on navigation > labels > layout > design
4. 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.



                     Raheel Gauba      © 2010 Blackbaud
questions? answers?



21           Raheel Gauba   © 2010 Blackbaud
why,
thank you!
    raheel gauba
           brand leader & creative director   blackbaud
email: raheel.gauba@blackbaud.com twitter: @raheelgauba
                           facebook: Raheel Gauba

Weitere ähnliche Inhalte

Ähnlich wie The (simple &) strategic approach to web design

GA - product management for entrepreneurs
GA - product management for entrepreneursGA - product management for entrepreneurs
GA - product management for entrepreneurs
zhurama
 
User Experience: Process and Guidelines
User Experience: Process and GuidelinesUser Experience: Process and Guidelines
User Experience: Process and Guidelines
Nirish Shakya
 
Add usability testing to your skill set!
Add usability testing to your skill set!Add usability testing to your skill set!
Add usability testing to your skill set!
dcmistry
 
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Bootstrap Creative
 

Ähnlich wie The (simple &) strategic approach to web design (20)

A/B Testing Framework Design
A/B Testing Framework DesignA/B Testing Framework Design
A/B Testing Framework Design
 
Nonprofit Homepage Design Slam - 10 tips for Effective Homepage Design
Nonprofit Homepage Design Slam - 10 tips for Effective Homepage DesignNonprofit Homepage Design Slam - 10 tips for Effective Homepage Design
Nonprofit Homepage Design Slam - 10 tips for Effective Homepage Design
 
GA - product management for entrepreneurs
GA - product management for entrepreneursGA - product management for entrepreneurs
GA - product management for entrepreneurs
 
Beyond usability
Beyond usability Beyond usability
Beyond usability
 
Get Out Of The Frying Pan
Get Out Of The Frying PanGet Out Of The Frying Pan
Get Out Of The Frying Pan
 
Utah PMA Quarterly Meeting, June, 2009
Utah PMA Quarterly Meeting, June, 2009Utah PMA Quarterly Meeting, June, 2009
Utah PMA Quarterly Meeting, June, 2009
 
Online Engagement for Higher Ed
Online Engagement for Higher EdOnline Engagement for Higher Ed
Online Engagement for Higher Ed
 
User Experience: Process and Guidelines
User Experience: Process and GuidelinesUser Experience: Process and Guidelines
User Experience: Process and Guidelines
 
Surviving a Hackathon and Beyond
Surviving a Hackathon and BeyondSurviving a Hackathon and Beyond
Surviving a Hackathon and Beyond
 
Six Sigma Project Replication Webinar Slides
Six Sigma Project Replication Webinar SlidesSix Sigma Project Replication Webinar Slides
Six Sigma Project Replication Webinar Slides
 
Best practice ecommerce design
Best practice ecommerce designBest practice ecommerce design
Best practice ecommerce design
 
Add usability testing to your skill set!
Add usability testing to your skill set!Add usability testing to your skill set!
Add usability testing to your skill set!
 
UX in Action: IBM Watson
UX in Action: IBM WatsonUX in Action: IBM Watson
UX in Action: IBM Watson
 
Overview of Agile for Business Analysts
Overview of Agile for Business AnalystsOverview of Agile for Business Analysts
Overview of Agile for Business Analysts
 
15 Free CRO Tools
15 Free CRO Tools15 Free CRO Tools
15 Free CRO Tools
 
Jacada Agent Scripting on the cloud_ slideshare
Jacada Agent Scripting on the cloud_ slideshareJacada Agent Scripting on the cloud_ slideshare
Jacada Agent Scripting on the cloud_ slideshare
 
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
Web Development Tutorial Workshop for Beginners - Learn Responsive Web Design...
 
White Labeling Your Data Analytics
White Labeling Your Data AnalyticsWhite Labeling Your Data Analytics
White Labeling Your Data Analytics
 
Ultimate Dogfooding: Behind the Scenes of Building the New Jira
Ultimate Dogfooding: Behind the Scenes of Building the New JiraUltimate Dogfooding: Behind the Scenes of Building the New Jira
Ultimate Dogfooding: Behind the Scenes of Building the New Jira
 
Sora Web Analytics Getting Buy In Oct132009 V Final
Sora Web Analytics Getting Buy In Oct132009 V FinalSora Web Analytics Getting Buy In Oct132009 V Final
Sora Web Analytics Getting Buy In Oct132009 V Final
 

The (simple &) strategic approach to web design

  • 1. The Strategic Approach to Design Raheel Gauba 1
  • 2. why? Raheel Gauba © 2010 Blackbaud
  • 3. Raheel Gauba © 2010 Blackbaud
  • 4. why? Raheel Gauba © 2010 Blackbaud
  • 5. why? Raheel Gauba © 2010 Blackbaud
  • 6. why? Raheel Gauba © 2010 Blackbaud
  • 7. Charity websites are poor campaigning tools and often fail to use the most “ effective web - Precedent (Communications agency in UK) March 19, 2010 technologies ...found the sites often lacked basic information about the charity and appeared to have little overall strategy 3 Raheel Gauba © 2010 Blackbaud
  • 8. 68% of U.S. online shoppers agree that they will distrust a site that doesn’t have a professional appearance Raheel Gauba © 2010 Blackbaud
  • 9. 75% of web users admit making judgements about the credibility of an organization based on the design of its website Raheel Gauba © 2010 Blackbaud
  • 10. it’s simple when users find information quickly and easily, they will return repeat users are extremely valuable, they are more likely to “convert” when users have a positive user experience, they will recommend your site to others Raheel Gauba © 2010 Blackbaud
  • 11. really? that simple? Raheel Gauba © 2010 Blackbaud
  • 12. really? that simple? Raheel Gauba © 2010 Blackbaud
  • 13. really? that simple? Raheel Gauba © 2010 Blackbaud
  • 14. really? that simple? Raheel Gauba © 2010 Blackbaud
  • 15. really? that simple? Raheel Gauba © 2010 Blackbaud
  • 16. 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) Raheel Gauba © 2010 Blackbaud
  • 17. Who is your target audience? 1. Check your CRM 2. Interview staff members (at all levels) 3. Think about new categories of audiences 4. Prioritize! Raheel Gauba © 2010 Blackbaud
  • 18. Audience Analysis 1. Supporters Donors (online, offline), team fundraisers, previous donors, members, email recipients, d.m. recipients, advocates of cure for AIDS, corporate donors, sponsors 2. Event Participants / Consumers Auction participants, event attendees, ticket buyers, email recipients, fans 3. Grantees Grant recipients, stakeholders within health related services, other organizations 4. Prospects Corporate, foundations, sponsors, researchers, broadway fans, celebrities, portfolio managers, AIDS researchers, past volunteers, members, email recipients, planned givers 5. Young Adults Actors, theatre/entertainment fans, social network participants Raheel Gauba © 2010 Blackbaud
  • 19. What do you want them to do? 1. Be thorough... 2. Current activities + future desired activities 3. Prioritize! 4. Select top 5 Raheel Gauba © 2010 Blackbaud
  • 20. Tasks 1. Supporters 1. Donate 2. Subscribe 3. How were the funds used? 4. Learn about sponsorships 5. Share 2. Event Participants / Consumers 1. What’s for sale? 2. Buy Tickets 3. Purchase items 4. Order cards 5. Learn about events/merchandise 3. Grantees 1. Ways to become a recipient 2. View other grantees 3. Apply online 4. Receive email 5. Feedback 4. Prospects 1. Learn about sponsorships 2. How funds have been used 3. Giving opportunities 4. Event info 5. Young Adults 1. Get involved via social networks 2. Become a team fundraiser 3. Ways to create awareness 4. Share Raheel Gauba © 2010 Blackbaud
  • 21. Usability Testing 1. Invite individuals from target audience 2. Ask them to perform the tasks 3. Record clicks, actions, expressions, questions 4. Don’t help - ask questions instead! Raheel Gauba © 2010 Blackbaud
  • 22. Clearleft presents Usability Testing Silverback plays a vital role in understanding how folks use Digg.com. While it’s not the only usability tool I use, it’s the one I am using most often. so says Mark Trammell of Digg.com | Next testimonial » Guerrilla usability testing software for designers and developers Capture screen activity Add chapter markers on-the-fly Video the tester’s face Control recording with the remote Record the tester’s voice Export to Quicktime 1. Invite individuals from target audience Features in 2.0 include 2. Ask them to perform the tasks Preview Batch Export 3. Record clicks, actions, expressions, questions Watch sessions within Save selected sessions, tasks, Silverback highlights or projects in one go Tasks & Highlights Performance 4. Don’t help - ask questions instead! Set tasks and mark noteworthy Faster export, better usability moments within a session Raheel Gauba © 2010 Blackbaud Silverback requires
  • 23. Language: English Deutsch Français Products Downloads Support Community Company Purchase Usability Testing Overview Tour Library Media Free Trial Buy Now NEW VERSION 1. Invite individuals from target audience 2. Ask them to perform the tasks Record onscreen activity Edit into a professional screencast video Share it anywhere 3. Record clicks, actions, expressions,Windows Camtasia Studio screen recorder and editor for questions 4. Don’t help - ask questions instead! Overview Video Download 30-Day Trial How Customers Use Every day, thousands of people around the world use Camtasia Studio to Raheel Gauba © 2010 Blackbaud create videos that train, teach, sell, and more! It's the easiest way to Camtasia Studio
  • 24. Usability Testing - example Raheel Gauba © 2010 Blackbaud
  • 25. Usability Testing cont. 1. Create card sets containing top pages of site 2. Ask audience to organize information (most important to least + create groups) 3. Observe the flow, record final iterations 4. Don’t help - ask questions instead! 5. Ask audience to organize info as one group Raheel Gauba © 2010 Blackbaud
  • 26. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 27. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 28. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 29. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 30. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 31. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 32. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 33. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 34. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 35. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 36. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 37. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 38. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  • 39. Analysis > What to change? 1. Look for trends 2. Tackle the quick and easy fixes first 3. Work on navigation > labels > layout > design 4. Repeat! Raheel Gauba © 2010 Blackbaud
  • 40. Amazon.com added $2.5B to their revenue stream by adjusting the sort order of user comments. Raheel Gauba © 2010 Blackbaud
  • 41. Microsoft’s Bing.com search engine increased their revenue by $80M just by adjusting the color of their hyperlinks Raheel Gauba © 2010 Blackbaud
  • 42. 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. Raheel Gauba © 2010 Blackbaud
  • 43. questions? answers? 21 Raheel Gauba © 2010 Blackbaud
  • 44. why, thank you! raheel gauba brand leader & creative director blackbaud email: raheel.gauba@blackbaud.com twitter: @raheelgauba facebook: Raheel Gauba