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.
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.
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 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
Usability testing, user interviews, card sorts, surveys
Initial UX Research
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?
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?
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:
Choice and application of visual elements on the page draw in user focus but should also be used to better represent the content.
The focus and intent of the page were lost on students as they believe it should be everything for all current students.
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.
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 istoo long and requires more scrolling and skimming than most students are willing to do:
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.
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.”
Recommendation: Reduce the length of the page by at least 50%. Reduce the density of the content.
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.
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:
Here are the audiences and audience goals decided in our design session:
Where we had one page before, we needed two: one for prospective students and one for current students
We wanted our prospective students to feel:
Welcomed and included
Confident about Dallas College
Excited and motivated
We wanted our prospective students to:
Share what they learned with peers and parents
Find services they know they’ll need
We wanted our current students to feel:
That they were not alone
Safe and confident
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.
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:
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
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
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:
Resources about admissions, registration, and enrollment
Resources about academic and learning services
Resources about student basic needs and wellbeing
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:
Resources for emotional wellness and physical safety
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
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:
Collaborating With Content and Graphic Teams
We had our six categories identified and we knew how to organize the list of 70+ resources. What we didn’t know was:
How to word and label these categories.
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:
Admissions & Registration
Wellness & Safety
The graphics and brand teams were essential in helping us determine specific colors for each category so they could be easier to distinguish.
The graphics and brand teams also provided initial badge graphics for our 70+ services and resources.
Development and Approval
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:
Broad search and filtering
Testing and Pre-Launch
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.
The updated Student Resources and Support page (designed for prospective students)
The new Student Resource Directory (designed for current students)
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.