Q Center Website

Redesigning the Q Center website to connect students with events, resources, and community at a glance.

Role

Web Designer

Context

Project at On-Campus Job

Timeline

Summer 2025

laptop screen

Students couldn't quickly understand what events, programs, and content the Q Center offers.

The Problem

The Q Center's mission is to support the wellbeing of LGBTQ+ students at UW through events, programs, and educational content. However, the previous homepage design made it difficult for students to quickly answer the question: "What's going on at the Q Center this week?". Educational blog posts received very low engagement because of a lack of visibility. In addition, the previous design didn't effectively convey the spirit of belonging and joy that the Q Center embodies.

My Solution

  • Integrated the UW Trumba Calendar system to display upcoming events directly on the homepage

  • Added a carousel of photos from Q Center events to visually communicate belonging and joy

  • Featured recent blog posts on the homepage to increase visibility and engagement with educational content

This redesign transforms the homepage into an inviting and engaging snapshot of LGBTQ+ student life at the Q Center! These changes led to a 94% increase in overall users, 215% more blog traffic, and nearly 500% growth in event engagement.

Key Features

Carousel of Event Photos

Featured images from Q Center events to visually communicate queer belonging, joy, and celebration. This gives first-time visitors an immediate sense of the Q Center’s vibrant community.

Events and Education

With a single scroll, users can quickly see upcoming events, increasing event visibility and attendance. Featuring blog posts on the homepage also increases visibility of educational content on important LGBTQ+ policies and issues.

Programs and Services Carousel

Allows first-time users to quickly discover Q Center programs and services directly from the homepage. Displaying two items at a time maximizes space while maintaining clarity. Each image links to a program page for more information.

Contact and Donate

Key information such as location, email, Instagram, newsletter signup, and hours is displayed in a clear and concise way. The donation section uses the header “What you care about can change the world” to create an emotional appeal. This is supported by an image from Lavender Graduation to show the real students that a donation would support.

Redesign Significantly Boosted Engagement and Discovery

Using Google Analytics, I compared site performance from September–March before the redesign (2024–2025) and after (2025–2026). I focused on this timeframe to ensure a fair comparison, since data for April–June 2026 is not yet available at the time of this analysis.

+93.6% active users overall

  • Active Users: Increased from 5,048 to 9,775.

  • Sessions: Increased from 7,355 to 12,565.

The homepage redesign made content more visually engaging and easier to discover, encouraging users to explore more of the site.

+215% active users on blog posts

  • Active Users: Increased from 309 to 975.

  • Sessions: Increased from 404 to 1,397

Featuring blog posts on the homepage increased visibility of educational content, driving significantly more traffic to posts that were previously hard to find.

+498.4% active users on calendar events

  • Active Users: Increased dramatically from 127 to 760.

  • Sessions: Rose from 176 to 1,139.

Embedding the Trumba calendar on the homepage made upcoming events immediately accessible, dramatically improving event discoverability.

The Before

Let's examine what content was on the homepage before.

Section

Flaws

Hero section

  • Overly text-heavy

  • Didn’t visually convey a sense of belonging or joy.

Program slideshow

  • Only displayed one program at a time

  • Lacked context about what information was being featured.

Contact form

  • Frequent plugin issues prevented many submissions from reaching the Q Center email.

Constraints

  • Built on UW WordPress Sites, limiting customization and requiring use of supported plugins

  • Needed to be easily maintainable by future student staff

  • Strict privacy considerations as some users may not be publicly out. I made sure t not use identifiable photos without explicit consent

  • Content should be easy to navigate and engage with, including in mobile contexts.

Design decisions

Trumba calendar integration

The original site used an embedded Google Calendar, but it only had one display option (calendar grid) and was on a separate page. This made finding events difficult.

After researching UW-supported tools, I identified Trumba as a better solution. Unlike Google Calendar, Trumba offers flexible display options (e.g., list and upcoming views) and integrates directly with UW WordPress.

By embedding Trumba on the homepage, I made upcoming events immediately visible, easier to scan, and simpler for staff to maintain.

Before

After

Calendar on separate page. Upcoming events not visible on home page.

Upcoming events immediately featured with one scroll.

Photo carousel

The original homepage felt text-heavy and didn’t reflect the Q Center’s values or sense of community. To address this, I introduced event imagery to convey belonging and joy.

I prioritized privacy by not using identifiable photos without explicit consent. In addition, I strategically selected photos from large-scale events like Lavender Graduation, the QTBIPOC Winter Celebration, and Seattle Pride to highlight the Q Center’s vibrancy.

Because WordPress does not natively support carousels, I used the MetaSlider plugin to implement this feature within platform constraints. I also designed separate desktop and mobile versions, as the plugin does not automatically adapt across screen sizes. The carousel shows two images on desktop and one on mobile to maintain visual balance.

Feature recent blog posts

I used the UW WordPress blogroll shortcode to feature recent blog posts directly on the homepage. Blogrolls automatically update as new posts are added to the site, reducing manual maintenance time.

Shortcodes like this one are supported by the UW WordPress theme, making it easy for future staff to maintain.

By featuring blog posts on the homepage, I increased visibility of educational content that was previously difficult to find.

Before

After

Blog posts were on displayed on a separate page, leading to low visibility and traffic

Recent blog posts immediately featured with one scroll. Links to more posts for users to browse and explore.

Updated program carousel

Updated the carousel to display two programs at a time (instead of one) to improve scannability. This was implemented using the MetaSlider plugin.

Contact information

Removed the contact form due to frequent technical issues and replaced it with a direct email contact. I also included key information such as location, hours, and social links in an easy to understand format.

Donations

Introduced a donation section as the home page is a prime opportunity to request support. I used compelling language and an image of a graduating student to create an emotional connection and highlight the impact of giving.

Reflection

This project pushed me to design creatively within technical constraints. WordPress is quite limited in layout options, so I got crafty and resourceful. I researched other UW department websites for inspiration and to understand what was possible with the UW theme. In addition, I did research on shortcodes and CampusPress plugins to expand what design options were possible.

The Q Center is an incredible resource that supports LGBTQ+ students on campus, and I'm proud to have been a part of that legacy. I designed with sustainability in mind so that future student designers can continue to build on this work.

Other projects

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Interested in connecting?

Let’s talk projects, collaborations, or anything design!

Copyright 2026 by Nhu Tat

Copyright 2026 by Nhu Tat

Copyright 2026 by Nhu Tat