UWATERLOO WEBSITE

In Novemeber of 2024, I undertook an ambitious redesign of the University of Waterloo website as part of a course project; prompted by consistent frustration I heard from students, parents, and faculty.

This project reimagines the site with a focus on clarity of content, strengthened brand reputation, and ease of navigation. My process spans user research, user testing, information architecture, UI design, and HTML/CSS development.

Background & Challenge:

The University of Waterloo is home to over 40,000 students and a leader in innovation and research, but lacks a website that reflects its prestige. While containing effective content and consistent branding, information is fragmented, difficult to navigate, and lacks innovative design practices—increasing inaccessibility and reducing trust. A website design is needed to provide a clearer structure, improved usability and design system, and a stronger reflection of the university’s identity.

My Goal:

Redesign and code 4 key web pages to create a user-focused experience. The new design should enhances navigation, legibility, and structure while retaining familiar brand elements and emphasizing Waterloo’s innovative culture.

Initial Pain Points:

•  Large amounts of unstructured content
•  Lack of clarity around programs and access
•  Missing typographic hierarchy and contrast
•  Lack of persistent and intuitive navigation

To ensure the most impactful and intuitive user experience, I implemented a comprehensive user-centered design process:

1. Current Site Analysis
2. User Interviews
3. User/Functional Requirements Definition
4. Card Sorting
5. Moodboarding
6. Design System Development
7. Sitemap Redesign
8. High-Fidelity Prototyping

I conducted a comprehensive review of the website, focusing on design principles, content, navigation, and overall user experience. After conducting a usability test with myself on the site, I documented the key pain points, summarized in this video presentation:

I conducted three short interviews on the primary users of institution websites—students, prospective students, and guardiens—to understand the 4 W's of user engagement.

Interview Participants:

•  A parent
•  Current University of Waterloo student
•  Student from another university

Why do they visit university websites?

•  To learn about the school, programs, profs, co-op, safety, and campus life
•  For resources like advisor info, graduation details, and academic support

What are they trying to achieve?

•  Find program prerequisites, application details, course info, involvement opportunities, and campus life (prospective applicants)
•  Learn about statistics, involvement opportunities, and employment rates (guardiens of current and prospective students)
•  Current Students: Find course information, professors, staff, and wellness resources.

Where do they try to achieve this?

•  At home; on mobile or desktop devices (all)
•  At school; to find more information and resources (current students)

How often is the website used?

•  Frequently, throughout the year— meaning content should be regularly updated

Key Takeaway: Each user group (students, applicants, parents) shares overlapping information needs: quick, digestible academic, campus, and service-related information.

User Needs:

•  Simple navigation
•  Balanced visuals and text
•  Up-to-date events, programs, and services information
•  Emotional assurance
•  Parent-facing metrics and value propositions

Completed a card sorting exercise to uncover users’ mental models and drive an intuitive website navigation. Started by listing keywords from user interviews, then grouped the most relevant ones.

Outlined key priorities to guide a purpose-driven moodboard, drawing inspiration from design platforms and top-performing university websites.

I studied and referenced the University of Waterloo's official brand guidelines. I then made necessary replacements to develop a design system more accurate to the University of Waterloo student culture. I used the wider sans-serif typeface "Raleway" to create a more welcoming user experience (wider fonts create mental associations within users of approachability and oppenness) and improve accessibility through this more readable font.

I designed sitemap visuals (before and after) and evaluated whether the revised information architecture met user requirements and key considerations.

The sections highlighted in yellow in Figure 9 were chosen for redesign.

My redesign of the University of Waterloo website, completed on December 10, 2024, delivers a more engaging visual identity, improved UX, and content tailored to address real user needs.

What To Improve:

•   Time Allocation: To speed up the coding process, I could alot more time to planning the HTML structure before diving into coding
•   Design System: With more time, adding more elements to the design system could futher improve cohesion accross web pages

Future Refinement:

•  Conducting usability testing on the mobile prototype to validate design choices through heuristics and user feedback
•  Interviewing prospective students to understand evolving expectations and content gaps
•  Presenting the final concept to the University of Waterloo for potential collaboration or feedback
•  Designing a mobile website — many institutions lack strong mobile UX, despite studies showing that students increasingly access sites exclusely through mobile devices