Web Development: Content & Information Architecture for the CLUE website

  Header for the Academic Support Programs Website

Header for the Academic Support Programs Website

The Details:

  • My role: Content development and website design
  • Collaborators: Emery Lohrasbi, Program Manager for Academic Support Programs, and Jenn Stock, Website Developer at Academic Support Programs
  • Timeframe: Sept. 2017 - present

THe Task

I've been searching for projects that live at the intersection of UX design, content, and higher education - and this project fits the bill!

I worked with some of the staff at Academic Support Programs (ASP) at the University of Washington (UW) to update the website and make it more 1) intuitive to use, 2) informative for students and faculty, and 3) full of engaging and relevant content that helps students follow-up on our services or work independently. As a student, UW tutor with ASP, and rising fourth-year student in Human Centered Design & Engineering, I thought I could bring a valuable student perspective and some knowledge about how to create and position student-facing content.

We focused on developing a website that is accessible, welcoming, user-friendly, and content rich. We wanted it to be seen as:

  • Supportive: Our web content has the same goal of ASP at large, which is to provide academic and personal support to students on campus.
  • Inclusive: We welcome people of all identities and backgrounds, and we want people to feel comfortable bringing their most authentic selves to our work.
  • Engaging: Our content addresses the current needs of students, and we offer specific resources, people, and places where a student can follow-up.

Competitive analysis

We started by doing a competitive analysis of other academic support programs at campuses that were similar in size. We landed on University of Oregon’s Teaching and Learning Center as a baseline for comparison

Landing page of the University of Oregon’s Teaching and Learning Center has the following mission statement on their home page

Things we liked:

  • A landing page with a specific list of resources and a statement of purpose e.g. “We are committed to your academic success.”
  • Features of student and tutor testimonials.
  • Concise wording and easy-to-follow content!

information Architecture

Screenshot of the old website

We decided to re-organize the content in a more intuitive way because it wasn't clear how students could follow-up. In the old set-up, the "Helpful Tips" page didn't have an intuitive name that suggested content about academic success, and this link was buried under the "More" link. Additionally, most students were not selecting the "Other Campus Resources" page, and we wanted its presence to be more prominent. 

Screen Shot 2017-11-20 at 12.47.15 PM.png

In the new website, we decided to put all of the academic resources of ASP under the name "Get Help" which includes a link of academic resources including the CLUE Study Center, private tutoring, and other campus resources. That way, a student would come to this link and access all of our academic resources. We also changed the name of "Helpful Tips" to "Improve Your Study Skills" to it would be more obvious that this was a list of independent study resources.

Making the content more visual & Engaging

Screen Shot 2017-09-19 at 11.05.52 PM.png

My first priority was making the pages more visual - luckily, I was fresh off an internship at Microsoft and spent a lot of time talking with designers. One resource that I was introduced to was icons8, which has thousands of free flat icons that helped me make the content just a little more visual. For example, when editing a page titled "Tips for Success at the UW," I added a relevant icon for each tip to make the content list more visual.

Screenshot of the Tips for Success at the UW page on the ASP website

I also added sections called "Try this:" that had specific, actionable tips that a reader could follow-up on:

Screen Shot 2017-09-19 at 11.21.44 PM.png

I also refreshed the content with the following updates:

  • Refreshed the language so it would be more colloquial and relevant for college students
  • Added links to external resources that explained the research and provided opportunities to follow-up with current academic resources.