Student Resource Directory

A UX Design Case Study



Introduction

  • Organization: Dallas College
  • Product: Dallas College website
  • Timeline: 2021-2022

Background

When Dallas College, then DCCCD, pivoted to virtual learning at the start of the COVID-19 pandemic, the Student Resources web page was hastily re-edited and re-packaged as the “Virtual Student Resources.” Although there were visual improvements to the page, it began to lose a clear focus and purpose, which previously was: Being the doorway and directory to all student services and resources at Dallas College.

As the months continued, Dallas College underwent a massive reorganization which resulted in new services and differently named departments that all wanted to be highlighted at the top of this resources page. The page continued to fragment, lose focus and grow in length.

Problem

Our team was beginning to receive feedback that “students can’t find any resources on our website,” “this page is too long,” and “I want my new departments to be displayed and organized like this on that page.”

We already knew that the page had long lost focus, grown into a Frankenstein of an interface, and would probably not serve students if it turned into a directory of the internal structure of our college.

“Students can’t find any resources on our website.”

Administration

So, we set out to ask these questions:

  • Regardless of this one page, what journey are students taking to find services and resources online?
  • How does the design and content of this page impact that journey?
  • What can we do to change the design and content to improve that journey?
  • What can we do in other areas of the website to improve that journey?

My Role

My primary role in this project was as Lead. My duties included:

  • Designing and championing the process and progress of this project by implementing Design Thinking
  • Leading, contributing, and delegating on UX research
  • Leading and facilitating design workshop sessions
  • Contributing, delegating, and consulting on UI and visual design
  • Delegating to, and collaborating with, other functional teams for support with content and graphics
  • Managing expectations for, and communicating progress to many stakeholders at all levels of the college

Tools and Methods

UX Research

Usability testing, user interviews, card sorts, surveys

Adobe Xd

Qualtrics

Design Workshops

Design Thinking


Process

Initial UX Research

Empathize Test Define

Usability Testing

The very first step in our process was to gain an understanding of how students are finding resources and services online. Some of our tasks included:

  • (Starting from Google) Your friend has served in the military. How would you go about finding services available specifically to them?
  • (Starting from the Dallas College home page) Your instructor mentioned that there is a fitness center on your campus. You are interested in becoming more active and would like to know if it fits your schedule. Find out what the hours are for the fitness center at your campus.
  • (Starting from the Student Resources page) A tornado has passed through your neighborhood and destroyed your car. You heard DC offers financial assistance to students in emergency situations. How would you find out more information about that service?
A sample clip from our initial usability testing sessions.

User Interviews

After the usability tests were complete, we acknowledged that we needed additional feedback and context about the design of the Student Resources page itself, so we did a couple of rounds of user interviews with students. Some of our interview questions included:

  • What student services are you familiar with? How did you hear about them?
  • What is your initial reaction to this page?
  • After scrolling this page and learning more about it, what would you like to do?
Anna and Preston show a student the resources page and ask her questions about her observations.
Anna and Preston show a student the resources page and ask her questions about her observations.

Research Insights

The team and I spent time synthesizing both the usability testing sessions and the user interviews. After we distilled individual observations and quotes, we grouped them into themes. The stronger themes became our key insights.

Here are some of the insights we found:

  1. Choice and application of visual elements on the page draw in user focus but should also be used to better represent the content.
  2. The focus and intent of the page were lost on students as they believe it should be everything for all current students.
  3. Using clear language to reference our services improves the experience for our students.
    • This was crucial because as some of our resources were renamed, we wanted students to be able to find the service without needing to know the current name. 
  4. Many students still prefer to talk to real people when seeking help with services or resources, whether it’s by phone or in person. So, easy-to-find contact information or calls to action are important. 

We then determined specific recommendations for each insight. Here is an example of one of our insights, its observations, quotes, and recommendations:

  • Insight: The Student Resources page is too long and requires more scrolling and skimming than most students are willing to do:
    1. Observation: Almost all students paid attention to the “tile” area, then slowly scrolled over the next section, followed by quickly scrolling to the bottom and back up. They ended up scrolling past more than 50% of the page.
    2. Direct quote: “This is too much information for me. I’m too lazy to read through it. The bottom of the page is giving me Rolodex vibes.”
    3. Recommendation: Reduce the length of the page by at least 50%. Reduce the density of the content.

“This is too much information for me. I’m too lazy to read through it.”

Student

“The bottom of the page is giving me Rolodex vibes.”

Student

We then documented this entire report, along with an executive summary, on our college’s intranet. Not only could we easily refer to it among the team, but we could share it with leaders in our department and the student services department.

Design Workshop

Define Ideate

Our insights and recommendations document provided the first big pieces for the foundation of this project. We still needed to clearly establish our audiences, goals, and overall approach. I knew an in-person design workshop would be the perfect way to distill these ideas and brainstorm our way to some solid solutions. I made sure to invite my whole team, my boss and our partner in marketing who primarily works with these student service areas. 

Here are some of the activities we included in our workshop:

  • Empathy mapping
  • Brainstorming
  • Dot voting
  • Time-boxed sketching

Here are the audiences and audience goals decided in our design session:

  1. Where we had one page before, we needed two: one for prospective students and one for current students
  2. We wanted our prospective students to feel:
    • Welcomed and included
    • Confident about Dallas College
    • Excited and motivated
  3. We wanted our prospective students to:
    • Share what they learned with peers and parents
    • Find services they know they’ll need
    • Apply
  4. We wanted our current students to feel:
    • That they were not alone
    • Safe and confident
  5. We wanted our current students to:
    • Be aware of everything we offer them
    • Easily connect with services they need
    • Overcome difficulties and make their lives easier

After sketching, presenting, and dissecting a dozen different approaches, we identified key elements that we knew needed to be included in the final implementation.

Diagram of the flow that was discussed at the design workshop and how the new pages (in blue) would fit into the students' journeys.
Diagram of the flow that was discussed at the design workshop and how the new pages (in blue) would fit into the students’ journeys.

The Proposed Solution

To most effectively communicate both to prospective and currents students, there would need to be two pages.

Here is what we would build:

  1. A redesigned Student Resource page that would be:
    • Written for prospective students
    • An overview of our most used services
    • Shorter and less dense
    • Colorful, warm, and welcoming
    • Motivating to a prospective student
  1. A new Student Resource Directory tool that would:
    • Focused on current students
    • List of all student services and resources
    • Be searchable, browsable, and filterable
    • Provide easy-to-reference points of contact for each service
    • Feature an information architecture and organizational scheme for all 70+ resources. Framework should:
      • Be easy to understand
      • Provide the underlying foundation for the Student Resource Directory

Information Architecture

Empathize Define

The original Student Resources page had over 100 links and more than half of those were specific resources and services. We knew we had to develop a way to organize all of those services in a way that was intuitive to the students. 

To better understand the student lens, we used online card sorting. First, we ran a round of card sorts with various staff around the college to ascertain which services were clearly named, and to establish a preliminary category scheme to make card sorting with students less of a burden and more effective. 

In our initial card sort, it was clear that services and resources should be grouped into roughly these categories:

  1. Resources about admissions, registration, and enrollment
  2. Resources about academic and learning services
  3. Resources about student basic needs and wellbeing
  4. Resources about student life and campus activities

When it came time to have students organize cards, we used these four categories in addition to a pile that said, “Does not fit any other categories,” and “I don’t know what this is.”

When looking at the students’ results, we knew two of the categories needed to be split. So, in addition to the four categories above, we created specific ones for:

  1. Resources for emotional wellness and physical safety
  2. Resources for specialized audiences (like veterans, differently abled people, or minorities)

But now the big question was, what do we label these categories so they are concise and plainly written?

Visual and UI Design

Ideate

Meanwhile, the visual designers on the team turned to Adobe XD to continue ideating on the sketches we created in our design workshop. Because we had our list of research-based recommendations, and knew who we were designing for, and what we were wanting them to feel and accomplish, the visual design phase progressed quite easily.

Dozens of ideas were experimented with and discussed.

For the design of the “resource card,” we arrived at:

Final "resource card" design that would be used to show results in the directory tool.
Final “resource card” design that would be used to show results in the directory tool.
Mobile version of final "resource card" design that would be used to show results in the directory tool.

Collaborating With Content and Graphic Teams

Define Ideate

We had our six categories identified and we knew how to organize the list of 70+ resources. What we didn’t know was:

  1. How to word and label these categories.
  2. How we were clearly and easily going to represent each resource visually (because one of our recommendations was to “Use imagery that provides quick visual cues for the content they represent”).

So, we turned to the content experts in the department to really help determine wording that was brief yet descriptive.

Our content strategy team really dug into this and recommended the following category names:

  1. Admissions & Registration
  2. Academic Support
  3. Essential Needs
  4. Wellness & Safety
  5. Specialized Services
  6. Campus Life

The graphics and brand teams were essential in helping us determine specific colors for each category so they could be easier to distinguish.

Screenshot of six colors used to symbolize each of the six categories: pale blue, pale purple, forest green, burnt orange, deep red, and DC Blue.
It was important for these colors not to overlap or be confused with the seven colors used for each of our academic schools.

The graphics and brand teams also provided initial badge graphics for our 70+ services and resources.

70+ badge designs were created by the graphics team.
Per our initial guidelines for this project, these badges needed to be easily identifiable and also fit under overall brand guidelines.

Development and Approval

Define Prototype

The prototypes and high-fidelity mockups our visual designers handed over to the lead developer made it so easy for him to build and implement the dynamic pieces.

Even though we had kept senior leadership in student services abreast of our project, it was during this time where they became more involved and had more questions. Every two weeks I would prepare an update, and if needed, a video explaining our progress and how this tool would work. 

Topics that needed to be talked through and explained to leadership included:

  • Category choices
  • Wording choices
  • Broad search and filtering

Testing and Pre-Launch

Empathize Test

  • Our problem was identified
  • Initial research and recommendations were complete
  • Audiences and goals were defined
  • UI was designed
  • Information Architecture and wording was finished
  • Leadership was on-board
  • Product was nearly developed

Testing Our Designs

It was time for another round of usability testing to determine how close we were to the mark. We reused mostly the same tasks and questions that were in our initial sessions. Here were some of our choices that were quickly validated:

  • Designing a shorter, more colorful layout for the prospective-facing page
  • Students would heavily use the searchable feature of the directory tool
  • Choosing a small handful of resources to showcase under each category made it very easy for students to browse
  • Clear language for headings and resource titles helped students quickly understand what resources they could find in each category

And here were some of the additional insights we gained and actions we took to improve the experience:

  • Observation: The button we had initially included under each category to see the full listing was not getting noticed. Students believed there were only four services under each category.
    • Action: We redesigned the card component to include a larger link and arrow with the same visual prominence as the listings. This helped students know that these four services were just the beginning of a bigger list.
  • Observation: When using the search bar in the prospective students’ page on mobile, students would land at the very top of the directory page and could not easily see their results.
    • Action: We created a script that would land students directly on the section of the page where their results would be found. This would help students doing directory searches on mobile devices.

We made about a dozen changes to all pages in the weeks before we launched. But before we could do that, we needed to communicate these changes and the usefulness of these new pages to all employees, especially those who regularly used the old resources page when helping students.

Pre-Launch: Getting the Word Out

We wrote, designed, and launched a new page in our intranet that explained the background of the project, provided a video tour of the new pages, described the six categories, mapped out all the pieces of the new interface, and showed the various ways to access these pages. We distributed this page via several employee and departmental newsletters. 

The Final Product

The following week, we seamlessly launched both pages.

  1. The updated Student Resources and Support page (designed for prospective students)
  2. The new Student Resource Directory (designed for current students)
A diagram showing how the old student resources page has now become two new pages.
This diagram was shown to college staff before the launch of the pages to illustrate how the old resources page became two new pages.

Updated Student Resources and Support Page

New Student Resource Directory Tool

Conclusion

Insights and Lessons Learned

Launch date: March 25, 2022

This project taught me valuable lessons about our students, research, the process, leadership, and teamwork:

  • Know and play to your team members’ strengths.
  • Design Workshops are incredibly effective ways to find solutions and align on objectives.
  • Trust is vital within a team.

Results and Outcomes

As of this post, the new pages have only been live for about six weeks. Not enough time has passed to generate meaningful metrics. However, we did measure these six weeks in 2022 against the same six weeks in 2021.

  • In 2021, 31.6% of all page visits did not proceed past this page. In 2022, this number dropped to 22.5%. We wanted students to not hit this page, become overwhelmed and leave. We wanted them to engage, learn more, and access services.
  • Clicks to individual resources pages jumped 12% from 2021.
  • Clicks to the apply page and key enrollment pages from the new support page have jumped 3% since 2021.