Select Page

Overview

Student Life Resources is a web project for the Dean of Student Life at PSU. Through this website, new faculty and staff get to know different resources at PSU. The website satisfies the Web Content Accessibility Guidelines 2.1.

My Tasks

Research, information architecture, wireframe, mockup, usability testing, web development

My Roles

Web Development
Web Design
UX

Design Process

The Challenges

As of September 2017, the Student Life Resource site was in video format. With this presentation style, users often face ​limited customization options for the learning process. There are several challenging such as printing out the material, exploring external resources/links, or adding new contents (which require some video editing skills from administrators.) When the video is replaced with a more interactive website, the users have more freedom to interact with the content.

The design process was guided​ by some of the following questions:

  • 1. How can the information ​be organized so that users can easily find it?
  • 2. How can often-used topics be set aside for future reference?
  • 3. Which platform is edit-friendly for non-developers, since the administrators of this site are PSU faculty?
  • 4. How can the website be optimized​ for users with disabilities, such as vision impairment?

Ideate and wireframe

Development

After the approval of the visual ​design, there are three hosting options for the website: WordPress, Drupal, or Google Sites.​ While WordPress and Drupal have a learning curve, Google Sites was chosen because it is intuitive to use for non-developers.

Usability Testing

The Office of Information Technology at PSU provided usability testing for the website based on WCAG 2.0 & WTAG 2.0 standards. The testing covered website elements such as: page title, alt-text, heading, color contrast, resizable text, visual focus, structure, and keyboard functionality.

The test will benefit people who:

  • have low vision and need to zoom in on the website
  • use keyboard to control the mouse
  • use screen readers
  • have color blindness

The accessibility test identified three main problems:

  • a current state (mode) could not be determined
  • the keyboard functionality was unpredictable
  • the web application platform was missing semantic information

*WCAG: Web Content Accessibility Guideline
*ATAG: Authoring Tool Accessibility Guidelines

Eric Nambo, IT Accessibility Coordinator at PSU

Redesign

As Eric suggestion, the columnar design on old site did not work with a screen reader. The screen reader will keep reading text from left to right without knowing left-sidebar are buttons, the right sidebar is main content. At the stage, Eric and I worked on new Sketch and Wireframe to figure out the best way to design the page that compatible with screen-readers and keyboard functionality.

I came up with two possible re-design, and we pick the first one. The text design will help a screen-reader easily read text from left to right, top to bottom. Each topic page includes essential links bar on the top for quick access. The left-sidebar navigation as the second design version is great for users to explore around, but I have to eliminate it because Google Site hasn’t had that options yet.

Usability Testing
We test the final website again. It works successfully with screen-readers. The text has a clear hierarchy and is resizable. The colors are not only fit with PSU theme (green and yellow) but also have enough contrast.