UX CASE STUDY / FEB — APR 2026
CS Girls Website Redesign
CS Girls is a student organization at the University of Houston supporting women in tech. As Webmaster, I conducted a UX audit, identified five usability issues, and redesigned the Events page to solve the most critical problem: a broken page redirecting members to home.
ROLE: Webmaster & UX Designer
ORGANIZATION: CS Girls, University of Houston
TIMELINE: February–April 2026
TOOLS: Figma, React, Tailwind CSS, TypeScript, Git/GitHub, Notion, Vercel
01 / THE PROBLEM & UX AUDIT
The Events page - the most visited page according to member feedback - was broken. Clicking it redirected users to the home page, where an incomplete event preview and a large unexplained gap made information difficult to find. A separate Events tab existed, but it had no dedicated page.
02 / RESEARCH
I sent a Google Forms survey to CS Girls members to understand how they used the website. Responses indicated that members primarily visited to find event information. This confirmed the Events page as the highest-priority fix and shaped the direction of the redesign.
03 / DESIGN PROCESS
The incomplete home-page events preview and the broken Events page were the same root problem: members had no reliable way to find event information. Rather than fixing them separately, I solved both with a dedicated events calendar page. The calendar wireframes were designed in Figma.
01 / Layout foundation
My first wireframe established the basic calendar grid structure and confirmed the layout concept.
02 / Making it real
I added the real navbar, CS Girls branding, actual event names and times, and real date numbers to make it feel like a real page.
03 / Clarifying the details
The final version added purple event chips for visual clarity, month navigation arrows, a footer with social links, and consistent typography.
The redesigned Events page gives members a functional calendar with event details at a glance, and solves the broken-page problem.
04 / SOLUTION
The redesign was implemented in React and Tailwind CSS and deployed to production at csgirls.org. Each of the four affected pages was rebuilt to address the issues identified in the audit.
Events page
BEFORE / EVENTS
The Events tab redirected members to the bottom of the home page, where a broken preview with a large gap attempted to display upcoming events. There was no dedicated events page.
AFTER / EVENTS
A fully functional Google Calendar-integrated calendar lets members browse 250+ past and upcoming events by month. Purple chips show each event’s name and time.
Home page
BEFORE / HOME
The homepage opened with “Hello World!”, a developer joke that alienated non-CS students.
AFTER / HOME
A welcoming animated tagline, text on the left, and a horizontal officers group photo on the right. A direct “View Events” CTA leads to the new calendar.
About page
BEFORE / ABOUT
The hero image was vertically cropped and overflowing, while text competed with the photo for space.
AFTER / ABOUT
A restructured text-left, image-right layout allows the photograph to display fully without cropping.
Officers page
BEFORE / OFFICERS
Monospace “>Name” styling felt like code. With 11 officers and no search or filters, members had to read every card to find a contact.
AFTER / OFFICERS
Live search and role filters—Leadership, Professional Development, and Operations—help members find the right officer. Clean, readable cards replace the monospace styling.
05 / OUTCOME
200+
MEMBERS SERVED
5
ISSUES RESOLVED
4
PAGES REDESIGNED
The redesigned csgirls.org serves 200+ members with a Google Calendar-integrated calendar displaying 250+ past and upcoming events, a searchable and filterable officers directory, and a welcoming homepage that communicates the organization’s mission to prospective members. All changes were implemented in React and Tailwind CSS and deployed to production.
06 / NEXT STEPS
Each of these improvements will be informed by the same user-centered approach that guided the original redesign: starting with member needs, validating assumptions through research, and iterating based on feedback.
1 - Clickable event details
Make individual events clickable so members can view full details, including location and an overview of the event.
2 - Home page announcements
Add an announcements section so members can stay informed without navigating to a separate page or external channel.
3 - Follow-up survey
Conduct a follow-up member survey to measure the redesign’s impact on member satisfaction.
A lesson for the next research cycle
One challenge I encountered was low survey response rates when sending the Google Form independently. To address this in future research cycles, I’d recommend distributing short on-the-spot questionnaires during CS Girls events, where members are already present. This would likely yield higher response rates and feedback, leading to design decisions based on broader member input.