Dallas College had a long and confusing student resources page that needed improvement. Through research, testing, and ideation, we created a new, concise introduction to commonly used services for prospective students, and a complete listing and filtering tool for current students. The new design grouped resources into categories and used clear language and visual cues to make it easier for students to find what they need.
My Role and Contributions as Lead
UX Research & Synthesis
Led & Contributed
Led & Contributed
- Pre-COVID, the Dallas County Community College District’s website had a primary page listing all student resources and services
- The pandemic caused quick changes, including hastily reconfiguring this resources page
- College-wide restructuring followed, leading to some services being renamed and new departments competing for space on the resources page
- User problem: Because the page had “frankensteined” out of control in length, density, and focus, students could not easily learn about or find resources and services
- Business problem: New departments and renamed services required an easy and scalable way to list and market them that did not contribute to worsening layout design
Research & Discovery
Given the above context, I led the team to set out to discover, regardless of this one page, what journey are students taking to find student services online?
- How does this page impact that journey?
- How can we improve this page to help that journey?
- How else can we improve that journey?
Goal: Understand how students are finding resources and services online from the following start points: Google, Dallas College home page, and old student resources page
View example of a task
- (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.
Goal: Understand how and when students learn about resources and how they access them, including feedback on the resources page itself
View examples of interview questions
- What student services are you already familiar with? How did you hear about them?
- What is your initial reaction to this page?
Visual layouts and elements
When used properly, help students easily scan
- Students were drawn to the “tiles” layout at the top
- “That’s just a smiling person. How do I know it’s supposed to mean veterans.”
Clear language for services and headings
Makes students feel more confident about seeking and getting help
- There were several phrases and jargon students did not understand
- When skimming pages, students heavily relied on headings
Was used heavily by students when trying to find a service
- Internal and external search were heavily used
- Students use known, familiar terms instead of proper service or department names
I led a design workshop to clearly distill our audiences, user goals, anticipated challenges, and solution ideation. The workshop activities included:
- Empathy mapping
- Dot voting
- Time-boxed sketching
Outcomes for Solution Strategy
Outcomes of initial UX research and design workshop led us to the following strategy for a two-part solution:
Solution Part #1
Redesign student resources/intro page that is:
- A concise introduction to must-used services
- Colorful and encouraging
- Intuitively includes links to all resources in part #2
Targeting prospective students so they:
- Feel: welcomed, included, excited, motivated, and confident about Dallas College
- Do: find relevant and needed services, share findings with others, and apply
Goal Metrics: An increase of overall users and visits on all resources pages; an increase of traffic from this page to key enrollment pages
Solution Part #2
Create new student resource directory tool that:
- Uses a clear information architecture of all 70+ resources
- Is searchable, browsable, and filterable
- Provides clear service contact points
Targeting current students so they:
- Feel: safe, confident, and they were not alone
- Do: be aware of all we offer them, easily connect with needed services, and overcome difficulties to make their lives better
Goal Metrics: A decrease in visits that stall and end directly on the resources page; An increase of overall users and visits on all resources pages
Ideation & Design
- Method: Open and closed card sorting (online)
- Audiences: Students, student services staff and marketing staff
- Make sense of the 100+ links featured on the page
- Understand which services and naming were understandable and which were confusing
- Distill an organizational scheme for student resources
Examples of terms that both students and staff found to be the most unclear:
- “learning commons”
- “connections team”
- “inclusive excellence”
- “student care network”
UI Design: Resource Card
The Resource Card component would be how each service is displayed in the directory tool. Here is how the UI evolved:
I started from sketches ideated from the design workshop.
2. Adapting Unused Concepts
Unused sketches and prototypes inspired what became the concept for the mobile version.
3. Hi-Fi Prototypes
I landed on high fidelity prototypes after several rounds of critique and tests with potential users.
View the UI design evolution for the updated support page layout
We started from sketches ideated from the design workshop.
2. Choosing an Approach
Writing and Visual Design
The six categories were identified. We needed to find ways to describe, label, and display these categories through copy, colors, and visual.
We collaborated with writers to thoughtfully approach all the copy. They wrote descriptions of all categories and services in plain language and recommended the following names:
Brand and Visual Design
The brand and graphics team was essential in determining brand-friendly colors for each category and unique “badge” graphics for the 70+ services.
The Pieces Come Together
Resource Card Explained
I designed the resource card component so that no matter what name a student may know a service by, that it can be quickly identified. Cards also provide quick phone or email contact points.
1 – Badge graphic unique for each service
2 – Official name of service
3 – Alternative or previous name(s)
4 – Brief and concise description
5 – Category label with color
6 – Primary contact info/link
7 – Link with additional contact info (hours, contacts by campus, etc.)
Development & Testing
Hand off to
The XD-built prototypes and high-fidelity mockups that the other UI designers and I handed over to the lead developer made it easy for building and development.
Testing and Iterating
Nearing completion, we did another round of usability testing to gauge effectiveness. These insights were validated:
- Shorter, colorful design for prospective student page
- Search feature was heavily used
- Featuring small number of resources made it easier to browse
- Clear language and headings were effective
Here is just one example of a n issue that testing uncovered:
View More Button
- The “view more” button under each category on intro page was not noticed. Students believed there were only four services under each category.
Updated Resources/Intro Page
New Resource Directory Tool
Outcomes and Metrics
Did We Hit Our Goals?
* Visits compared between old resource page (2021-2022) and updated intro page (2022-2023)
** Clicks compared between old resource page (2021-2022) and combined updated intro page and new directory tool (2022-2023)
*** Compared between all resource pages (2021-2022) and all resource pages (2022-2023)
Lessons and Personal Insights
What Did I Learn?
Human-centered UX projects are possible in higher education web teams with relatively zero resources
Understand and play to your team’s strengths
Workshops are effective ways to align on objectives and ideate approaches
Documenting and sharing research is valuable for internal team reference and stakeholder buy-in