Website USABILITY AUDIT for Community Learning CEnter in Philadelphia

Community Learning Center
February 2016

Project Goals

I connected with the Community Learning Center in Philadelphia through the Catchafire platform. The audit's goal was to craft a detailed review of their existing website. The audit provided a set of design-based insights outlining where the site merits improvement in terms of usability and communication. The starting point of the site is shown below. 

Initial Impression Audit

Purpose & Message

Score: 9/10

What’s Good: The purpose and mission of the CLC are readily apparent. I quickly understood the importance of addressing adult illiteracy, and appreciated the emphasis on changing lives through empowerment.

What Could Be Improved: Some of the calls to action are weak or buried, especially for potential learners.

Aesthetics

Score: 5/10

What’s Good: The font size/choice is legible and consistent. The blue color is calming. Everything is fairly clear.

What Could Be Improved: Although the orange link color contrasts well with the blue, it reads a little dingy. A bright, warm color would work nicely. Additionally, the alignment throughout the site needs attention, especially around images. Finally, the logo is not crisp which detracts from the site’s legitimacy.

Content

Score: 8/10

What’s Good: The content is clear and relatively comprehensive.

What Could Be Improved: There are quite a few instances of “email so-and-so for more information.” Is there any way to incorporate some of the information onto the site?

Usability

Score: 7/10

What’s Good: On the whole, the site has well-labeled links and navigational items. The text is also clear without distracting icons or gimmicks.

What Could Be Improved: The navigational scheme can be confusing, splitting in two once you leave the homepage. Similarly, the site would benefit from what we call “breadcrumbs” - a form of tracking a user’s location to provide both orientation and a way back. Highlighting the current navigational item or providing a back button would be a good start. Additionally, any links should be consistent, employing descriptive labels throughout rather than bare URLs. Finally, there are some key details (e.g. donation ID numbers, phone number for interested students, etc) that could use some stylistic emphasis.  

 

Cognitive Walk-throughs

Cognitive walkthroughs are a common tool used to evaluate a site’s usability. I began by defining a few tasks based on imagined user goals and the list of target audiences. The tasks are mentioned below, the full text of the evaluation can be read here. 
 
Task 1: As a potential student, I want to know how to start taking a class.
 Task 2: As a current student, I want to know what resources are available to me.
Task 3: I’m an individual donor and interested in helping out with adult illiteracy efforts.

Prioritized Suggestions

I then created a prioritized list of site improvements based on my observations. I utilized Design Heuristics as a basis for my comments. These heuristics focus largely on usability, and place less emphasis on the interface visuals. I ordered the suggestions based on severity ratings. A sampling are outlined below, but you can see the full evaluation here.

  • Heuristic Violated: Error Prevention
    Description: The “About” link at the top of the sub navigation on the “For Students” page is broken!
    Suggestion: This link should be labeled “For Students” and send the user back to that section’s landing page.
    Severity Rating: 5

  • Heuristic Violated: Show System Status
    Description: There is no sense of orientation within a page (i.e. the user’s current location is not indicated on the menu).
    Suggestion: There needs to be what we call a “breadcrumb” - some indicator of where I am in the site. One way to do this is by highlighting the current page on the navigation.
    Severity Rating: 4

  • Heuristic Violated: Consistency & Standards
    Description: Throughout most of the site, links are coupled with descriptive text, but in some cases they are just a bare URL.
    Suggestion: Pick a single style (I’d strongly recommend the descriptive text label), and don’t be afraid to use buttons or other style tools to emphasize actionable options.
    Severity Rating: 3

  • Heuristic Violated: Minimalist & Aesthetic Design
    Description: Across the site, the spacing between the headings and content is not consistent.
    Suggestion: Make sure the spacing is the same throughout, and try to avoid having two headers back to back (this occurs in a few places, such as the Donate page with “Thanks for your generosity! Your gift is truly making a difference!”). If you want to emphasize certain text, by all means do, but don’t use the same treatment as you do for a section header.
    Severity Rating: 1