Dallas College Home Page

A UX Design Case Study



Introduction

  • Organization: Dallas College
  • Product: Dallas College website
  • Timeline: 2020

Background

In 2019, Dallas County Community College District (DCCCD) announced that they would be moving from seven independently accredited colleges to one, unified college in 2020. While this new college would be under a different name and updated brand, the services we offered and the value we provided to the community would remain the same. The new home page would need to tell this story in a cohesive, impactful way.

Problem

Business Problem

We had eight similarly structured (but differently branded) home pages– one for the district and one for each of the seven colleges. This added to an already multi-faceted business problem:

  • A new, unified college brand was forthcoming, therefore we needed a home page that reflected and highlighted that.
  • Eight different home pages would need to be integrated.
  • While there would only be one home page, each campus (formerly known as a college) would still need a home page-like presence on the website. What would that look like and how would that integrate with the home page and site navigation?
  • There were different college home pages and a district page. Each home page type had a different audience and message. We would need to integrate that messaging.
DCCCD home page in 2019.

User Problem

The old design had lost focus gradually over the years. It had become a mess of buttons, blocks, and bloated messaging after repeated, and non-aligned requests. Users deserved to have a website that is clear, useful, and tells a story.

Because we are a community college and the audiences are broad, this home page needed to be a welcoming front door where they could learn what Dallas College is about and find services relevant to their needs, regardless of audience.

My Role

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

  • Managing the process of this project by implementing Design Thinking.
  • Leading and organizing the analytics audit
  • Facilitating two (virtual) workshops
  • Delegating to and collaborating with other functional teams for support with content and graphics
  • Leading and delegating on UI and visual design
  • Developing and delegating code build with HTML and CSS
  • Managing expectations for and communicating progress to leadership

Tools and Methods

Sketching

UX Research

Card sorting, surveys, and interviews

Design Workshops

Performed virtually

SiteImprove

For analytics audit

Adobe XD

Process

Analytics Audit

Empathize Define

Before anything else, we needed to understand how efficiently and inefficiently the legacy home pages had been performing. We dug into the analytics, which included heat maps, scroll maps, page exit points, click data, bounce rates, devices, etc.

Analytics Overview (April 2019 to April 2020)

DCCCD.eduEastfieldCollege.edu
Visitors1.6M1.5M
Page Views2.2M1.7M
Unique Visitors723K1.1M
Bounce Rate26.14%83.2%
Clicks2.3M757K
Visits by DeviceDesktop: 75%;
Tablet: 2%;
Mobile: 23%
Desktop: 92%;
Tablet: 0.5%;
Mobile: 7.5%

Here are just a few of the insights we drew from this data:

  • The module that featured audience buttons (transfer students, current students, first-time students, etc) performed the highest
  • Highest performing individual links were “Find a Class,” and “Current Students,” which showed us more current students used the home page than we realized
  • The highest searched pages on the website included library, transcript, financial, and advising. 
  • The lowest-performing content was related to workforce development (which was business-facing), staying safe, and our guided pathways program.

Establish Audiences and Marketing Goals

Define

Audiences

As a marketing department, we aligned and became clear on exactly who our website and home page were targeted and written for.

The primary target audience for the home page is now:

  • Prospective students (both credit and noncredit)
  • Current students (both credit and noncredit)

The secondary target audience is now:

  • Community members
  • Business and industry partners

The tertiary target audience is now:

  • Former students
  • Employees (prospective and current)

Marketing Goals

Because the website was first and foremost a marketing tool, we used departmental goals to help define the purpose and constraints for the home page. Our marketing goals were to:

Attract Users
  • User need: “I need to easily find what I’m looking for and view the available options and opportunities that Dallas College/DCCCD offers me.”
  • Associated Overarching Goal: To showcase and demonstrate information, offerings, and services in a manner that is accessible, usable, and findable.
Engage Users
  • User need: “I need to learn more about these options, pursue them, and how they can help me.”
  • Associated Overarching Goal: To inform and educate how and why the information, offerings, and services are relevant and can help.
Convert Users
  • User need: “I need to take the next step and feel it’s the right decision for me.”
  • Associated Overarching Goal: To equip with enough information and motivation to confidently and comfortably take a specific action (apply).
Support Users
  • User need: “Now that I am a student, I need to know exactly what services or resources are available to me and how I can access them.”
  • Associated Overarching Goal: To continue providing useful, important information and resources that are necessary for converted users and support them throughout their journey with Dallas College/DCCCD.

We homed in and further defined our audiences and their needs for the home page. Some of their key questions were:

  • Prospective students: Do they offer what (classes, programs, training) I need? How much does it cost? Can I get financial aid? How do I enroll? Can I succeed?
  • Current students: What upcoming dates or deadlines should I be aware of? I need to access a student service and need to know where to find them or who to call.
  • Community members: What class can I take for fun? What resources are here for my child? How are my tax dollars being spent?
  • Former students: How do I order my transcript? How can I give back?
  • Employers and business leaders: I need to train my employees. What services can they provide for my small business? I need to hire new talent for my business.

Establish Content Goals

Define

Based on discussions with marketing leadership and college content experts, we developed additional goals for what the home page should accomplish:

  1. Tell the story of Dallas College:
    1. To introduce that our institution transforms lives and communities
    2. To inspire, motivate and encourage students to learn more about us
    3. To communicate hope and encouragement
  2. Show what we offer:
    1. To introduce what (classes, programs, degrees, training, enrichment, or services) we offer (and its relevance to them and their goals)
    2. To provide key calls-to-action to move them toward enrollment/conversion
  3. Express quality and relevance:
    1. To communicate the caliber and quality of our education, initiatives, and institution
    2. To introduce how we are relevant to the Dallas County community and workforce
  4. To communicate plainly and not overwhelm:
    1. Reduce, simplify, and streamline content
    2. Update visuals using color, infographics, and real student photography

Leveraging UX Research

Empathize

We had recently done some research for the redesign of the website header and footer where we asked students to sort cards of college information by how important or relevant it was to them when they were looking at where to attend college.

The following cards are what students deemed the most important:

  • “I don’t feel comfortable if I go into a place that’s not diverse.” (Title IX)
  • “I ranked code of conduct and Title IX high because I want to know that this college is a safe place for me as a woman.”
  • “I take classes at many campuses, so having a map handy would have been really helpful for me.”
  • “Maps are a big deal. My legs were hurting when my brother showed me around campus.”

The following cards are what students deemed the least important:

  • “I shouldn’t be worried about social media while I’m in college.”
  • “Before starting college, I didn’t know what eCampus or eConnect was. So, these shouldn’t even be mentioned.”
  • “Social media would just link me back to the main website. So, it’s repetitive.”

Here are some insights we leveraged from this bit of research:

  • Safety, in forms of diversity, physical safety, and emotional safety, ranked highly for students.
    • Therefore, we needed our design (colors and photography) and content (focus on student support and wellness) to help students feel those different dimensions of safety.
  • Contact information and physical location were important.
    • Therefore, we needed to include that contact info and a map of our locations on the home page to give students that context and understanding
  • Having program and degree options laid out on the home page would be beneficial for a prospective student
    • Therefore, we needed to expand on our seven pathways on the home page and highlight the variety of options.

Design Workshops (Virtual)

Empathize Ideate

Content Strategy

In our content workshop, we drilled into those big content goals. We invited current students to our discussion so we could take in their perspectives.

Here is what we articulated about our content strategy:

  • What is the story of Dallas College? 
    • We improve lives and teach life lessons.
    • No matter who you are, we have something for you.
    • We serve every student, every place, every time.
  • What do we offer?
    • Show a wide array of learning options and paths.
    • Show actual people doing the thing they learned.
    • We offer opportunity and accessibility.
    • We offer options.
    • We offer experiences.
  • How to express quality and relevance? 
    • We show impressive graphics and imagery.
    • We display features and news showcasing how we impact the community.

Visual Design

We held a separate workshop for our visual and web designers. It was important to me and for the process that our group of designers take a level of ownership in the project.

I asked for their input and ideas about what we should do and what we should avoid with the visuals. That feedback included:

  • Old page was too long and overwhelming
    • “There’s too much non-student information. Put students first.”
    • “It’s kind of… chaos.”
  • Old page looked dated
    • “There are too many squares. It’s too blocky.”
    • “It needs a more cohesive look from top to bottom.”
  • New page should be simple and streamlined
    • “We should organize the page better.”
  • More visuals and authenticity
    • “We shouldn’t be using stock photography.”
    • “Let’s have more color and interactive components.”

We next discussed design pieces that were working well from other college websites. We discussed what they were, why they worked, what part of them worked, etc.

Some designers volunteered to put their ideas into low-fidelity mockups for a follow-up session. 

When we met again, we virtually dot-voted on some of these design pieces. Because of these discussions, we had everything we needed to begin mocking up the home page (which I handled designing) and individual campus page designs (which I delegated to designers from the campuses to pitch on).

UI/Visual Design and Development

Ideate Prototype

We could begin mocking up and designing the pages now that the following was in place:

  • Audiences established
  • Marketing strategy and goals set
  • Content strategy and copy written
  • Colors, typography, and logos were determined by our brand team

This process still required reviews and approvals by adjoining cross-functional teams and marketing leadership.

Development

Because much of the home page design was so new, we needed to code new components beyond the web style guide we were establishing. Some of these new patterns included:

Final Product

On July 1, 2020, the new Dallas College website launched featuring:

  1. The new home page
  2. The new campus information pages for our seven campuses

New Dallas College Home Page

Conclusion

Insights & Lessons Learned

This home page redesign project occurred in April-June of 2020, while our team was 100% remote. One of the biggest takeaways here was that collaboration and quality work was achievable in a completely remote/virtual modality. Note: This home page project was just one of dozens underneath the “Dallas College/One College” web initiative.

Results & Outcomes

From 2020 to 2021, the following metrics for the home page improved:

  • Load time improved: 4.3 seconds to 3.0 seconds
  • Click rate directly to Apply page: From 0.1% to 1.0%
  • Bounce rate improved on mobile devices: From 56% to 46%