UC Davis Website Redesign

Summary

My interdisciplinary team of UC Davis students went through a UX process to come up with a redesign for the University Writing Program’s website. The old site’s bad user experience has been a source of frustration for UC Davis students and faculty, so university administrators asked us to explore solutions to the site's problems. We conducted user research and used UC Davis style guides to inform our redesign, and validated our work using a final prototype, which we would present to a group of university stakeholders.

Team Involvement

User Research Team: Vishal Bhaia, Lillian Choi, Aiden Leong, Henry Moore
User Testing Team: Myah Daniels, David Lima
Design Team: Aiden Leong, Henry Moore

Skills and Tools Involved

UX Design

User Research

Information Architecture

Usability Testing

Branding

Adobe XD

UWP Project Preview

Introduction

The Problem

About 30,000 UCD undergraduate students are dealing with poor UX.

The UC Davis University Writing Program (UWP) website is one of the most visited university websites. The site has a lot of different users, but is especially relevant to the 30,000+ undergraduate student population that must use the site at some point in their academic career as it contains information about graduation requirements. Unfortunately, as you will see in the "Personas" section of this case study, users find the site unappealing and are often unable to find the information that they need. As a result, both students and faculty are frustrated with the poor web experience. Here is the site's current interface:

UWP Website Home
UWP Website Home
UWP Website Home

Using this as an opportunity to get students to step in.

There is only one person who works on the website in the UWP department, and unfortunately, he has been unable to redesign it so far. University administrators, who manage department operation, still want to explore improving the user experience:

My student team was tasked with gathering data about the site’s users, and came up with mockups to explore what a redesigned site might look like.

Timeline

  • Timeline User Research 2 Weeks
    • "Surveys"
    • "Interviews"
    • "Use Cases"
  • Timeline Ideation 2 weeks
    • "Information Architecture"
    • "Wireframes"
  • Timeline Validation 2 weeks
    • "Prototype"
    • "Usability Testing"
  • Timeline Conclusion 2 weeks
    • "Outcome" (FSR and Presentation)
    • "Exploring Implementation"
    • "Thinking Forward"

To begin, my team wanted to understand the specific issues that people have with the website.

Students Riot

User Research

Surveys

Picking the most effecient user reseach method given our limited resources.

We chose to use a survey to discover what the different user segments are. We deliberated on whether an online or an in-person survey was more appropriate.

Online Survey
Pros
  • Faster surveying
  • Broader audience
  • More easily converted into interpretable graphs
Cons
  • Limits audience to people active on social media
  • More potential for unusable responses
In-Person Survey
Pros
  • More control over responses
  • Potential for followup questions
Cons
  • Less efficient
  • Limits audience to whoever we can find
  • Hard to convert written responses into interpretable graphs

The online survey seemed to be the better choice given our 8-week timeline, so we posted the survey on various faculty and student groups on Facebook. In total, we got 77 responses and we randomly rewarded 3 lucky participants with Starbucks gift cards!

Through the survey we gained an understanding of who was using the site, and what they were using it for. Here is some meaningful data that we gathered:

Student to Employee Ratio
Student Status
Student Region of Origin
Type of Information Accessed on the UWP Website

Who Are Our Users?

Identifying 5 user types by narrowing down the survey data.

Since it would be impossible for our team to design for every type of user, from our survey, we singled out 5 user groups, each with a specific justification:

  1. General Students and Prospective Students

      Justification: General and Prospective Students have similar goals, and together they create the largest user volume. Therefore, they would be a logical group to design for.

  2. International Students

      Justification: Parsing through information can be challenging for this group, especially if English is their secondary language. Therefore helping this group find information quickly was a priority for us.

  3. UWP Minors and English Majors

      Justification: These are users that are specifically pursuing specialization in the English/Writing subject area. The UWP website is the only site where they can access information about their specialization, so it is important that they can find relevant information easily.

  4. UWP Administrative Staff

      Justification: These users work with the site daily and maintaining internal department information. Finding targetted information on the needs to be easy.

  5. English Professors and UWP Professors

      Justification: Similarly to Administrative Staff, Professors create and manage content on the site.

Interviews

Talking to users to investigate their goals and pain points.

To get more understand what these users’ goals and pain points on the site were, we conducted more in-depth interviews where we would walk through the website with 5 people from each user group.

The during the interviews we performed a contextual inquity (or walkthrough) of the website with our interviewees to observe how they used the site and what information they wanted to access. We also asked them both preestablished and followup questions about their goals and habits as users.

Based off of those interviews, we were able to create personas (who are fictional people with motivations and oppinions that average those of the people interviewed).

Personas

Ideation

Information Architecture

Organizing and grouping user flows for effecient navigation.

Since the organization of information on the website was an issue brought up in our personas, we wanted to take a look at the persona use cases and see:

  1. Where their final page destinations were on the sitemap
  2. What user navigation paths looked

The person icons indicate the ending page for each of the personas' navigation paths.

UWP IA Before Redesign
Our Revised Sitemap

We wanted to make sure that all of our personas, especially the international students, could access their information quickly without having to read a lot of text. So we restructured the site to facilitate the access of information from the use cases, (the information that they desired most).

Since students are the majority of the user population, we made sure that all of the information that they need is within the “Academics” section because that’s where they tend to look first (based off of our interview observations). To do this, we regrouped and added some relevant pages to the section. Previously, academic information was scattered outside of “Academics” in sections like “About” and “Programs & Services”. Now, more relevant information is in the section, and as seen in the revised sitemap, more students’ use cases fall in “Academics”.

We also wanted to include multiple paths for users to reach their desired page. This way, no matter what the user navigation decisions, users can reach their destinations more quickly.

UWP IA After Redesign

Sketching

Creating layouts based on user goals and UCD web patterns.

After inserting, removing, and rearranging pages on the sitemap the designers could start sketching new website layouts. As we sketched and wireframed, we explored layouts that followed existing UC Davis website patterns, but also entertained new ideas that could help the UWP website establish its own unique character.

During the wireframing process, we decided that using more modern UC Davis website’s design patterns would be the best layout choice for several reasons:

  • The website would be consistent with modern UC Davis branding and style guides.
  • The website experience would be consistent with other UC Davis sites; this would reduce users' effort to understand the redesigned site and would reduce their cognitive load.
  • Abiding by stylistic standards is important as the school continues to scale the number of websites that it has.

Examples of websites with modern UC Davis patterns would be the UC Davis home page and the Cross-Cultural Center website.

Validation

Prototype

After finalizing the ideas generated in the wireframes, we built our prototype. This prototype contains the pages relevant to each of the use cases since we would use it for subsequent usability tests.

You can access the raw Adobe XD prototype here.

Or you can click on the screen and interact with the prototype below.

Usability Tests

Measuring our redesign's success rate for each use case.

For each of the personas, we were able to find 5 people that were willing to help us test out the prototype. A success was measured if a user could get to their target page without pressing any wrong navigation links. Here were our results:

General Student/Prospective Student
Opt out of UWP requirements
Find course offerings
International Student
Find information on the ELPE
UWP Minor/English Major
Find information on submitting creative writing works
Find information on internship requirements

Went to “Academics” “Prerequisites” instead of “Internships”

UWP Administrator
Look at recent UWP news
English Professor/UWP Professor
Find resources to help students

Went to “Academics” instead of “Resources”

Although the usability tests were only a small sample of the user population, we found the results promising. There were 2 failed trials with one professor and one UWP minor, but both were able to find the information that they needed soon after.

Conclusion

Outcome

After the usability tests, the team used a Powerpoint and Functional Specification Report to present our process and results to key stakeholders in the UWP department. They liked our ideas, however, they also explained to us that the department was facing internal debate. The webmaster, (who was not present at our presentation), is the person in charge of making changes to the site. Even though most of the department demands change, the webmaster seems to have a lot of leverage in his insistence to keep the website the same. Their intent was to use our user research and redesigns to show the webmaster how problematic the website experience actually is.

There could be a number of reasonable explanations of the webmaster's attitude towards this ongoing discussion:

  • Changing the site is a lot of work on him (as he does not have a team of other web developers)
  • Changing the site will force people who are used to using the site to relearn the new site
  • He may be currently busy with other projects

Regardless, it’s a little bit disappointing to see progress hindered by matters that hadn't considered. Nevertheless, I am grateful for this complication, because there are lessons here that a lot of students don’t get to learn about in more ordinary projects.

Persuasion is as important as the design itself when considering implementation.

What I've learned: Beyond implementation limitations and the quality of your design deliverables, people still need to be persuaded to invest in your ideas. I need to work on my use metrics and verbal communications to enhance my ability sell ideas.

Exploring Implementation

In an effort to understand where the webmaster might be coming from, and to understand how UC Davis websites are implemented, I talked to one of my friends who works as an Web Design intern for the UC Davis School of Argiculture.

He informed me that the university uses a tool called Sitefarm to build it's websites, which houses templates and assets for creating sites, so a redesign that follows existing UC Davis patterns would be made easier through that resource.

Nevertheless, he estimates that with all of the information that would need to be migrated from the old website, the effort could easily take between 1 and 2 months.

Thinking Forward

  • Get user feedback while wireframing rather than making personal choices about the layout
  • Try to increase the number of participants in the interviews and usability tests to get more accurate results
  • Understand the hidden variables and obstacles between the project and its implementation by asking more questions to clients