PSU Student Life Resource
UX, UI, Web Design, Information Architecture
Home Page
All Topic Page
All Topic
Academic Integrity Page
Academic Integrity
Athletics
Athletics (A topic page)
All Departments
All Departments
Disability Page
Disability Resource Center
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
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?
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).
Ideate
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
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.
