April Tan

CCE Website:

Full website redesign and revamp for a better user experience

 

UX Researcher · UX Designer · Front-End Developer

Overview

I led a user-centered redesign of a university-facing website serving 5500+ graduate students, directing a team of 3 researchers from discovery to delivery. We transformed a cluttered, content-heavy site into a responsive, accessible experience tailored to graduate student needs.

The Problem

The Center for Communication Excellence (CCE) website serves as the central hub for graduate academic support at Iowa State University. As services rapidly expanded, the site became overloaded with content and lacked a clear structure, making it difficult for users to find what they needed. How might we create a scalable, user-centered solution that supports future growth?

The Solution

We conducted a full redesign to revamp the CCE website, aligning the information architecture with users’ mental models to prioritize discoverability and usability. We also established a cohesive design system that integrated interface components with university branding for a consistent and accessible user experience.

Before After

Drag the slider to check out the before and after. We love a good makeover.

The Process

With no prior user research conducted, we initiated a usability study with 10 graduate students to understand how they navigate and experience the website:
  • Designed and conducted user interviews on motivations, needs, and navigation pain points
  • Facilitated usability sessions with 3 core tasks using think-aloud protocol, followed by SUS and satisfaction surveys
  • Analyzed data using affinity diagramming and statistical analyses
  • Led 3 researchers in experimental design, data collection, and interviews

📈 Key Output:
  • Low usability score: The site received an average SUS score of 53, indicating significant usability concerns
  • Core user insights: Confusion due to unclear service organization, repetitive content led to information overload, and indirect calls to action buried key services
  • Actionable outcome: These insights informed user personas and a set of prioritized features and redesign goals

“I’ve never been able to find the booking system on the first try. Why is there so much redundant information?”

User #4

Always Lost

“This looks like it was made in the 90s. Everything is cluttered and hard to read. Oh wow. Yeah, I’m not going to read all of that.”

User #2

90s Website, not in a good way

The goal was to understand how users structured information in their minds so that we can build the information structure according to how they think and how they use the website:

  • Developed the study protocol, recruited participants, and set up recording for in-person and remote sessions (OW)
  • Conducted an open card sort with 4 participants and 57 cards total representing current site pages
  • Observed card sorting behavior,  noting cards that caused hesitation, confusion, or re-sorting and avg. time taken
  • Conducted follow up interviews to gain further insights on process, reasoning, and grouping logic
 
📈 Key output: Users primarily grouped pages by services, secondarily by events. Confusion was caused by ambiguity of page content and overlap of services.
 

Based on the card sort results, we rapidly prototyped 10+ wireframe sketches and tested core layout concepts with 4 users.

We narrowed the designs to 2 sitemap versions to understand which layout best supported key user tasks:

  • Tested 2 sitemap versions (Prototype A and Prototype B) with 9 users in a within-subject A/B design
  • Evaluated performance across 5 key tasks, such as registering for events and scheduling consultations
  • Conducted post-task interviews and SUS surveys to evaluate usability and gather user preferences


📈 Key Output:

Prototype A was favored for its usability and clarity, receiving a SUS score of 79 compared to 59 for Prototype B.

  • Users preferred direct, flat navigation that made core services easy to access
  • Prototype B’s sidebar improved in-category navigation but its stakeholder-based structure created confusion

I led the end-to-end design and development of the final website experience, translating tested prototypes into a responsive, accessible front-end solution.

  • Built high-fidelity, interactive prototypes in Figma and iterated based on user feedback
  • Developed modular components using a scalable design system aligned with university branding
  • Executed front-end development across devices, adhering to WCAG AAA standards

📈 Key output: Finalized website development ahead of launch deadline. Continued testing showed improved content discoverability through user-centered IA. Established a modular design system for consistent branding and long-term scalability.

📈 Key output

Secured leadership approval after design reviews and cross-functional collaboration, ensuring the project met both institutional standards and user needs.

  • Collaborated with IT and marketing teams to finalize and align deliverables

  • Managed project timeline and milestones to ensure an on-time, high-quality launch

  • Facilitated clear communication between stakeholders and design team throughout the process

The Outcome

Delivered website launch on time; design resulted in 100% stakeholder satisfaction and expanded recognition of UX as a strategic asset:

  • Sparked cross-departmental interest, leading to expanded roles in shaping future project through UX lens

  • User personas and insights were extrapolated and adopted in executive decision-making for graduate programming

  • Demonstrated the value of user-centered design in institutional planning and resource allocation, scaling UX team from 1 to 3