GPSS
UW Website
Redesign

GPSS PROJECT · UI/UX DESIGN

old Mac with a s reenshot of old GPSS website vs new iMac with a screenshot of a redesign GPSS website

Intro

Duration

August—October 2016

Skills

Research
Prototyping
User Testing
Coding

Tools

Sketch app logo Origami Studio logo

Problem

I was hired to redesign the Graduate and Professional Student Senate (GPSS) of the University of Washington website. It was super outdated visually, its overall information architecture was chaotic, the menu consisted of duplicated pages, and many links were leading to an empty content. All these discrepancies were causing low engagement and generally negative feedback from GPSS' users.

Here's the link to the old version of the GPSS website.

Approach

  1. Interviewing GPSS officers to acquire general knowledge about their office structure, operations, and website's usage.
  2. Conducting heuristic evaluation of current website, learning about its overall functionality, and identifying existing flaws.
  3. Conducting a participatory design session with various categories of the users, identifying common user flows and building up the website's information architecture.
  4. Prototyping page layouts, testing, iterating and building them in the Wordpress CMS.
notes from interviews

Interviews' Insights

GPSS is an official government for UW graduate students. It consists of several committees and being governed by senators, representing each committee.

Main user categories by their use cases:

  1. Graduate students—seeking for events and funding information.
  2. GPSS officers and staff—using an archive and calendars.
  3. Fresh or potential students—searching for general information about GPSS.
Flaws of the old GPSS website

Heuristic Evaluation

As it's shown on the image above the old GPSS website failed several Jacob Nielsen's Heuristic Principals:

  • Consistency and standards—the top level navigation led to duplicate, or even empty pages.
  • Flexibility and efficiency of use—the breadcrumb and page navigations had wrong, or no indications.
  • Aesthetic and minimalist design—the overall website's design was clearly outdated.

notes from interviews

Affinity Map

To rebuild website's information architecture I organized a participatory design session with GPSS' officers, staff and various categories of users (7 participants totally).

We started with laying out website's content elements on sticky notes, then sorted them into categories, and finally organized by pages, keeping in mind specific use cases.

To receive additional feedback, we displayed the board for a couple weeks in the office, which allowed us to make several significant improvements.

New website diagram

Diagram

Website's wireframes iterations home page

Wireframes: Homepage

Website's wireframes iterations content page

Wireframes: Content Page

During the second round of interviews, I tested website's prototypes with several GPSS staff members and Grad students.

As a result, I added three panel-links to the most useful elements of the website to the bottom of the Homepage and used accordions for the long-form content of a page to decrease the amount of scrolling.

On the content page, I added Useful Links, GPSS Events, and Follow Us elements to the right side widget area. This section is similar across all of the website's pages (except Homepage), which allows the users to interact with the site in a familiar pattern.

When the wireframes were finalized and approved by the GPSS' management, I started to build the website pages in Wordpress CMS, using UW's Wordpress theme and Style Guides.

Results

Homepage screenshot

01

Homepage

The slider section contains the most current events and article links. Right below is the section for major announcements (eventually replaced with article feed.)

The aside section: Twitter Feed, and Messages from the GPSS executives.

Content page screenshot

02

Content Page

The top part of the page contains an excerpt with a description of the content. The long-form content is hidden inside the accordion elements.

The right aside elements are similar across all the content pages of the website.

Records page screenshot

03

Records Page

This page contains links to GPSS' archive, organized by years, months, and dates. The links are arranged into the accordion form factor for the sake of usability.

Contact page screenshot

04

Contact Us Page

The page contains a directory of the GPSS staff, organized by management level. Every contact has Name, Position, Email, and Office Hours information.

Takeaways

While working on this project I learned how to work within design constraints, such as following UW Brand Guidelines and complying with Wordpress CMS platform requirements.

This was also a great experience as my first time working on the real-life project, dealing with real stakeholders and users.

Thank you for reading!