Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UXPG: Usability Review for CanadaHelps.org

1,586 views

Published on

Created and presented by:
Jamy Li, User Experience Consultant
Julian Lising, Information Architect
Nathalie Crosbie, Sr. Information Architect / UX Designer
Matthew Burpee, Web Consultant

Published in: Design, Technology
  • Be the first to comment

UXPG: Usability Review for CanadaHelps.org

  1. 1. CanadaHelps.org
  2. 2. <ul><li>Group Introduction </li></ul><ul><li>Testing Methodology & Severity Ranking </li></ul><ul><li>User Scenarios </li></ul><ul><li>Other Observations </li></ul><ul><li>Conclusion </li></ul>
  3. 3. <ul><li>Jamy Li </li></ul><ul><li>User Experience Consultant </li></ul>Nathalie Crosbie Sr. Information Architect / UX Designer Matthew Burpee Web Consultant Julian Lising Information Architect
  4. 4. <ul><li>Asked five participants to perform common tasks </li></ul><ul><ul><li>4 females, 1 male </li></ul></ul><ul><ul><li>Aged: 20 to 40 </li></ul></ul><ul><ul><li>No previous experience with CanadaHelps.org </li></ul></ul><ul><ul><li>Tests were performed in August/September 2009 </li></ul></ul><ul><li>Usability lab was donated by Klick Communications </li></ul><ul><ul><li>Webcam – captured user audio/video reactions </li></ul></ul><ul><ul><li>Morae – captured screen interactions </li></ul></ul><ul><ul><li>Observer – recorded notes on the fly in another room </li></ul></ul><ul><ul><li>Moderator – guided the user through the test </li></ul></ul>
  5. 5. <ul><li>High </li></ul><ul><ul><li>Likely to cause many users to fail a particular task or permanently lose information. </li></ul></ul><ul><li>Medium </li></ul><ul><ul><li>Likely to cause user frustration and errors but don’t cause irreversible issues. </li></ul></ul><ul><li>Low </li></ul><ul><ul><li>Minor problems that may cause some confusion or loss of time for users but won’t prevent task continuation. </li></ul></ul>  
  6. 6. <ul><li>Find CanadaHelps.org </li></ul><ul><li>Select a charity of your choice </li></ul><ul><li>Make a one-time donation </li></ul><ul><li>Make/Cancel a monthly donation </li></ul><ul><li>Update your profile </li></ul><ul><li>Send a charity gift card </li></ul>
  7. 7. <ul><li>User Scenario #1 </li></ul>
  8. 8. <ul><li>Issue: </li></ul><ul><li>Users can’t identify the site from the search result snippet </li></ul><ul><li>Recommendations: </li></ul><ul><li>Consider changing title, “CanadaHelps – Donate to any charity in Canada” </li></ul><ul><li>Ensure page meta tag/description makes it clear that you can donate to multiple charities. </li></ul>
  9. 9. <ul><li>Issue: </li></ul><ul><li>The purpose of the site is not clear to the user. </li></ul><ul><li>Recommendations: </li></ul><ul><li>Make it clear that the site’s purpose is facilitating donations to any Canadian charity. </li></ul>
  10. 10. <ul><li>User Scenario #2 </li></ul>
  11. 11. <ul><li>Issue: </li></ul><ul><li>Important charity information shows “N/A” </li></ul><ul><li>Recommendations: </li></ul><ul><li>Ensure that charity details are present prior to posting the charity online </li></ul><ul><li>Do not display headings for unavailable information </li></ul>
  12. 12. <ul><li>Issue: </li></ul><ul><li>“ Search for a Charity” search box is below the page fold </li></ul><ul><li>Placement is inconsistent with homepage </li></ul><ul><li>Recommendations: </li></ul><ul><li>Place search box above the page fold </li></ul><ul><li>Maintain placement consistency across entire site </li></ul> ?
  13. 13. <ul><li>Issue: </li></ul><ul><li>Some organizations are in upper case and others lower case </li></ul><ul><li>Charity Business Number is irrelevant to the user when searching for a charity </li></ul><ul><li>Recommendations: </li></ul><ul><li>Ensure text formatting is in sentence case (not all CAPS) </li></ul><ul><li>Consider removing the Business Number in the search results </li></ul><ul><li>Consider adding logos </li></ul>
  14. 14. <ul><li>User Scenario #3 </li></ul>
  15. 15. <ul><li>Issue: </li></ul><ul><li>Users often ignore text-heavy areas </li></ul><ul><li>Recommendations: </li></ul><ul><li>Minimize needless words </li></ul><ul><ul><li>“ People scan Web pages, they don't read them.” – Steve Krug </li></ul></ul><ul><li>Create a clear visual hierarchy to show importance of content </li></ul><ul><li>Break pages up into clearly defined areas </li></ul>
  16. 16. <ul><li>Issue: </li></ul><ul><li>During the donation process, user is unclear on: </li></ul><ul><ul><li>Meaning of “Fund/Designation” </li></ul></ul><ul><ul><li>What information they are meant to enter </li></ul></ul><ul><ul><li>Why the field is displayed if details not available </li></ul></ul><ul><li>Recommendations: </li></ul><ul><li>Ensure a fund description is always present </li></ul><ul><li>Do not display the fund/ designation in cases where a description is not available. </li></ul>
  17. 17. <ul><li>Issue: </li></ul><ul><li>Credit card billing address does not auto-populate based on previously entered information </li></ul><ul><li>Recommendations: </li></ul><ul><li>Create functionality to auto-populate billing address </li></ul>
  18. 18. <ul><li>Issue: </li></ul><ul><li>Donation seems too high when making smaller donations. </li></ul><ul><li>Recommendations: </li></ul><ul><li>Make this a percentage of actual donation or have several amounts for amount ranges. </li></ul>
  19. 19. <ul><li>Issue </li></ul><ul><li>Button terminology is confusing to the user. She’s looking to “donate” to the charity and not “checkout” of shopping. </li></ul><ul><li>Recommendation </li></ul><ul><li>Change button to read “Donate”. </li></ul>
  20. 20. <ul><li>User Scenario #4 </li></ul>
  21. 21. <ul><li>Issue: </li></ul><ul><li>Radio button is greyed out, unable to make a recurring donation. </li></ul><ul><li>Recommendations: </li></ul><ul><li>Don’t display functionality that user can’t control. </li></ul>
  22. 22. <ul><li>Issue: </li></ul><ul><li>User doesn’t want to save credit card number on CH. </li></ul><ul><li>User can’t modify their monthly donation after realizing the CC # must be stored on the site. </li></ul><ul><li>Recommendations: </li></ul><ul><li>Inform users immediately that CC must be saved for monthly donating. </li></ul><ul><li>Allow user to modify donation type during checkout process. </li></ul>
  23. 23. <ul><li>Issue: </li></ul><ul><li>Site does not provide confirmation when user removes a monthly donation </li></ul><ul><li>Recommendations: </li></ul><ul><li>Prompt the user to confirm if they wish to proceed with cancellation </li></ul><ul><ul><li>E.g. 1st option “No”, 2nd “Yes” </li></ul></ul><ul><li>After cancelling, show user a detailed confirmation message </li></ul><ul><li>Optionally, provide a mechanism to capture feedback for cancelling </li></ul>
  24. 24. <ul><li>Issue: </li></ul><ul><li>Confirmation page from a monthly donation transaction displays unrelated information from a previous one-time donation </li></ul><ul><li>Recommendations: </li></ul><ul><li>Include only relevant information specific to the current transaction </li></ul><ul><li>Make donation history information available via ‘view all past donations’ or ‘donation history’ links </li></ul>
  25. 25. <ul><li>Issue: </li></ul><ul><li>The system allows users to select the current date as a start date when that is not a valid choice </li></ul><ul><li>Recommendations: </li></ul><ul><li>Prevent the current date AND previous dates from being selected from the calendar picker </li></ul><ul><ul><li>“ Even better than good error messages is a careful design which prevents a problem from occurring in the first place” – Jakob Nielsen </li></ul></ul>
  26. 26. <ul><li>Issues: </li></ul><ul><li>Monthly donation details pages do not provide sufficient confirmation of the donation start and end dates </li></ul><ul><li>Recommendations: </li></ul><ul><li>Include the start and end dates in all donation details review pages </li></ul>
  27. 27. <ul><li>Issue: </li></ul><ul><li>The calendar widget that starts on Monday is inconsistent with the other calendar which starts on Sunday </li></ul><ul><li>Recommendations: </li></ul><ul><li>Have all calendars start on Sunday </li></ul><ul><li>Maintain consistency for look and feel </li></ul>
  28. 28. <ul><li>User Scenario #5 </li></ul>
  29. 29. <ul><li>Issue: </li></ul><ul><li>Users do not understand that “My Canada Helps” is where they can edit their profile </li></ul><ul><li>Recommendations: </li></ul><ul><li>Use common language such as “Edit Profile”, “My Account” instead of “MyCanadaHelps” </li></ul><ul><li>Display the user’s name once logged in </li></ul>
  30. 30. <ul><li>Issue: </li></ul><ul><li>Presence of multiple ‘save’ buttons in unexpected locations is confusing </li></ul><ul><li>Recommendations: </li></ul><ul><li>Use only one button and place it at the bottom of the page </li></ul>
  31. 31. <ul><li>Issue: </li></ul><ul><li>System does not provide confirmation when the user updates their address </li></ul><ul><li>Recommendations: </li></ul><ul><li>Have the system display a confirmation message </li></ul><ul><ul><li>e.g. “Your changes have been saved” </li></ul></ul>
  32. 32. <ul><li>Issue: </li></ul><ul><li>Upon logging in, the landing page appears to be requesting to “Change your password” </li></ul><ul><li>Recommendations: </li></ul><ul><li>Remove “Change your password” frame from landing page </li></ul><ul><li>Add as an option under “Change my Personal Info” </li></ul>
  33. 33. <ul><li>Issue: </li></ul><ul><li>“ Canada” not easy to find in drop-down list </li></ul><ul><li>Recommendations: </li></ul><ul><li>Keep lists in alphabetical order </li></ul>
  34. 34. <ul><li>Issue: </li></ul><ul><li>If donating more than once, user prefers their preferences saved. </li></ul><ul><li>Recommendations: </li></ul><ul><li>Allow the ability to save preferences for future donations </li></ul>
  35. 35. <ul><li>User Scenario #6 </li></ul>
  36. 36. <ul><li>Issue: </li></ul><ul><li>User is unclear about the gift card validity and delivery mechanism. </li></ul><ul><li>Recommendations: </li></ul><ul><li>Indicate how gift card is delivered to recipient. </li></ul><ul><li>Consider renaming to “electronic gift card” </li></ul>
  37. 38. <ul><li>Issue: </li></ul><ul><li>User encounters donation problem and would prefer to call </li></ul><ul><li>Recommendations: </li></ul><ul><li>Show “…contact us by postal mail, telephone, or fax” at the top </li></ul>
  38. 39. <ul><li>Issue: </li></ul><ul><li>Contact Canada Helps page doesn’t indicate an estimated response time for each option. </li></ul><ul><li>Recommendations: </li></ul><ul><li>Provide an estimated response time. </li></ul>
  39. 40. <ul><li>Issue: </li></ul><ul><li>User is unable to find their tax receipt after completing a recurring donation </li></ul><ul><li>Recommendations: </li></ul><ul><li>Greater visual weight and text isolation is required </li></ul>
  40. 41. <ul><li>Issue: </li></ul><ul><li>Trading photo on home page is visually distracting and confusing </li></ul><ul><li>Recommendations: </li></ul><ul><li>Minimize visual noise </li></ul><ul><li>Display images that are more on brand </li></ul>
  41. 42. <ul><li>Top 3 Usability Issues </li></ul>
  42. 43. <ul><li>Provide a clear description of the website’s purpose </li></ul><ul><ul><li>Ensure page meta tag/description makes it clear that you can donate to multiple charities </li></ul></ul><ul><li>Ensure ALL charities details are complete </li></ul><ul><ul><li>Mission Statement, Description, Fund/Designation </li></ul></ul><ul><li>Provide users with visual feedback </li></ul><ul><ul><li>Saving credit card online, profile changes, donation cancellations </li></ul></ul>Any Questions?

×