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.
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.
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 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
Card sorting, surveys, and interviews
For analytics audit
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)
Visits by Device
Desktop: 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
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:
Business and industry partners
The tertiary target audience is now:
Employees (prospective and current)
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:
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: Toshowcase and demonstrate information, offerings, and services in a manner that is accessible, usable, and findable.
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.
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).
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
Based on discussions with marketing leadership and college content experts, we developed additional goals for what the home page should accomplish:
Tell the story of Dallas College:
To introduce that our institution transforms lives and communities
To inspire, motivate and encourage students to learn more about us
To communicate hope and encouragement
Show what we offer:
To introduce what (classes, programs, degrees, training, enrichment, or services) we offer (and its relevance to them and their goals)
To provide key calls-to-action to move them toward enrollment/conversion
Express quality and relevance:
To communicate the caliber and quality of our education, initiatives, and institution
To introduce how we are relevant to the Dallas County community and workforce
To communicate plainly and not overwhelm:
Reduce, simplify, and streamline content
Update visuals using color, infographics, and real student photography
Leveraging UX Research
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)
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.
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
We could begin mocking up and designing the pages now that the following was in place:
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.
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:
On July 1, 2020, the new Dallas College website launched featuring:
The new home page
The new campus information pages for our seven campuses
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%