✺ A department website that centralizes academic resources of GrC.

In this project, I reviewed and collaborated with several faculty members in the Graphic Communication (GrC) department to redesign the site and establish an atomic webpage template for high quality implementation.

TEAM

Kristy Leung, Samantha Kim

TIMELINE

8 weeks

SOFTWARE

Figma, FigJam

ROLE

UXR + Design

✺ INITIAL PROBLEM DISCOVERY

It’s been over ten years. See the original site.

The Graphic Communication Department at Cal Poly, San Luis Obispo encompasses design for print, packaging, web, and user experience—but the website that represents its disciplines to the public hasn’t been updated in twelve years. Even the Department Chair, Colleen Twomey, disliked the website and wanted a refresh. The current website is displayed below.

✺ UXR

University websites tend to solve problems for the university, not the users themselves.

The Graphic Communication website isn’t the only university site suffering from an outdated interface. Studies have shown that university websites tend to be indigestible. When we did a literature review on heuristic evaluations done on previous university websites, we found three primary causes:

  • Profuse use of jargon

  • Internally-focused, not user-focused

  • University permission limitations

We asked as many students and faculty as we could about their experience about the website. Some of our questions included:

✺ What are your primary goals when visiting this site?

✺ Does anything surprise you about this website?

✺ Describe how you felt when navigating the site.

✺ UXR LEARNINGS

Over 20 students and faculty members experienced confusion and/or frustration.

We found 3 key insights:

01 Need for segmentation

Users visiting the site want segmented information based on their audience (prospective student, transfer student, faculty, etc.)

02 Poor navigation

Users struggled to find pages that answered their questions.

03 Need for clear answers

We found that the most common unanswered question was “What is Graphic Communication?”, yet there was no area with a clear explanation.

Based on our learnings, we landed on this problem statement:

✺ HMW organize website content in a way that is navigable and addresses each segment of site visitors?

✺ AUDITING

We audited the original website to evaluate its information architecture.

During this process, we asked ourselves:

  • What pathways are current users taking to achieve their goals?

  • What categories do users find helpful, and which categories do users find confusing?

  • Which flows are effective and which are not?

✺ MY CONTRIBUTION

I established an atomic design system and built out half the screens.

We conducted several expert reviews to get feedback throughout the process. Here are three key iterations I made on my screens.

✺ “Resources” caused confusion as a navigation category.

✺ Prospective students wanted to questions answered at a glance.

The design system makes it so that all future pages are drag-and-drop.

This makes it easy for new pages to be created and implemented into a CMS with consistent specs and patterns.

✺ VISUAL DESIGN

View the prototype here.

On average, users took 10-15 seconds less to navigate to their destination.

We received an overwhelmingly positive response among faculty. Ken Macro, former Department Chair and current Professor, gave us great feedback to get feedback from parents—the only site visitor segment we didn’t get any insights from.

✺ VALIDATION

LOOKING BACK,

We built relationships with different audiences in the academic community.

We built trust with designers, professors, content specialists, and advisors by learning about their goals. We learned to work with constraints and build out a design that would be able to be implemented into a web content management system.

Our next steps are to pursue permission from the Dean of the College of Liberal Arts to migrate their site to another web content management platform and partner with relevant clubs to push out this website to new audiences.

INTERESTED IN A CHAT?

Let’s get in touch :)