Select Page

PSU Student Life Resource

UX, UI, Web Design, Information Architecture

Home Page

All Topic Page

All Topic Page

All Topic

Academic Integrity Page

Academic Integrity

Academic Integrity


Athletics page

Athletics (A topic page)

All Departments

All Departments Page

All Departments

Disability Page

Disability Resource Center Page

Disability Resource Center

View the site by this link  ( A PSU email is required )

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:

  • keyboard navigation
  • information architecture
  • contrast
  • screen reader compatibility

Design Challenge

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. 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:

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

Video version of the site
From this screen, users select a topic to watch to the end of that topic. If a user wants to follow up a topic, they confronted with a dead-end. 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).


To make some topics obviously accessible, my first ideas is organizing the site by three pages: Quick Links, Library, and Contact.

Quick links: This will display the most popular keywords/topics to help users get into the needed information quickly.

Library: Like the library, this site will contain all of the topics.  All of the topics’ button will be on the left sidebar and behave like a tab. Users click on a tab, a corresponding more detail content will appear on the right side. There are two benefits of the two columns design: the main paragraph text’s length will be around 45em to 75em, which is good for readability; the topic’s button is big enough to be seen and clicked.

Contact: It will be an external link going to the PSU Dean of Student Life Contact’s Page

After meeting with stakeholders, they decided to add Department page. Users who just want to explore what topics are relative to a specific department can utilize this page.

Wireframe and Prototype

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

Redesign and Final Site

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-read11ers 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.