Integrating Seven College Homepages Into One Unified Story

Overview

I led a project redesigning Dallas College’s homepage to showcase the transformation from multiple institutions to one unified college in 2020. The new homepage met business goals, user goals, and marketing goals, with research and content strategy guiding the process. The redesign also led to faster load times, increased conversion rates, and lower bounce rates.

My Roles and Responsibilities as Lead Contributor

Analytics Audit

• Empathize
• Define

Before anything else, we dug into the analytics of the legacy home pages, which included heat maps, page exit points, click data, bounce rates, devices, etc.

Insights:

• Current students still use the home page: Highest performing links were “Find a Class,” and “Current Students,” which showed more current students used the home page than realized.
• Highly-searched terms needed highlighting: Most searched pages included library, transcript, financial, and advising. How do we enhance access to these pages?
• Focus on relevant info: The lowest-performing content was related to workforce development (business-facing), and our guided pathways program, which signified that this information was largely irrelevant.

Leveraging UX Research

• Empathize

We had recently done UX research for the redesign of the website header and footer. Part of that research included students doing card sorts of web content by relevance and importance.

Most Relevant or Needed Info

Least Relevant or Needed Info

Insights:

• 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 highlight diversity and safety
• Contact information and physical location were important.
  • Therefore, we needed to include the contact info and map of our locations on the home page to give students that context
• The breadth of program and degree options is valuable to a prospective student.
  • Therefore, we needed to capitalize our seven pathways, on the home page and highlight a variety of program options

Establish Audiences

• Define

As a marketing department, we realigned on and defined exactly who we were targeting and what questions they would be asking:

Establish Content Goals and Crafting the Story

• Empathize
• Define
• Ideate

Based on discussions with marketing leadership and college content experts, we developed goals for what the home page should communicate. In our content workshop, we drilled into those goals and invited current students to our discussion to better understand their perspective. Here is what we articulated about our content strategy:

1. Tell the story of Dallas College:
   1. To demonstrate how our institution transforms lives and communities
   2. To inspire, motivate, and encourage students to learn more about us
   3. To declare that we serve every student, every place, and every time
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

Established Brand and Visual Identity

During the course of this project, the new visual identity assets for the Dallas College brand were approved and shared with all partners in Marketing. Based on insights from research and focus groups, the brand team developed a logo and visual style that honored the 50 years of DCCCD history. These assets would provide a foundational visual framework which the home page would be built upon.

UI Design

• Ideate
• Prototype

Through a workshop held with college visual and web designers, we brainstormed approaches on telling the story, using modern web techniques, and refining the look and feel.

We determined the page word count and height would need to be reduced, that the page needed to be cohesive, and real photos of our real college students should only be used.

All the pieces for the layout and UI design of the page were ready. To illustrate the process, the evolution of two of the modules are shown here:

From Lo-Fi to Hi-Fi

The Explore Your Path module would showcase the breadth of options. Here is how the UI evolved:

1. Lo-Fi Concepts

We started experimenting with a few different approaches to the module.

2. Experimentation

We evolved some approaches and abandoned others. However, there were some elements of unused concepts that made it into the final prototype.

3. Hi-Fi Prototypes

To ensure visual variety, we chose to continue with modules that complimented each other and created stronger cohesion throughout the page.

---

Development

I led the production of the HTML and CSS for the home page. Many of the modules and components needed to be written from scratch as they were not yet developed within the design system we were producing at the time.

A Design Breakdown

Each of our design decisions were based on insights, goals, or needs defined throughout the process. At the center of the Dallas College story is the student. To show that, the word “you” is included on all headings of the page.

A. Current student quick links: Subtly tucked in at the top, the most visited and searched pages by current students are quickly accessed here

B. How Can We Help You: Dallas College serves a wide range of audiences. While the page is primarily for students, this menu offers entry points for anyone.

C. Explore Your Path: Insights showed that displaying the array of learning and training options was crucial

D. We’re With You Every Step of the Way: A major tenet of the Dallas College story is that they are there to remove barriers and champion student success.

E. Success Can Be Yours Too: With students at the center of the story, a quote highlighting their success helped illustrate that story

F. Our Campuses Are Near You: One of the greatest values of the college is that no matter where you are in the county, there’s a campus or center close to you.

G. Compliance-related content that didn’t serve the story was still included, but was not emphasized.