Featured Case Study

Rebuilding the Digital First Impression for One of Canada's Top Engineering Departments

Rebuilding University of Toronto's Department of Electrical and Computer Engineering's (ECE) public-facing website, (specifically the homepage), that had lost significance with its users, faculty, and marketing team, so it could: recruit the next generation of engineers.

Role: Front-End Design & Development Timeline: Nov 2024 – Mar 2025 Tools: Figma · WordPress · Asana · SharePoint

The Problem

The site wasn't failing because of design.

When I joined the department, ECE was losing prospective students before they ever considered applying. The department's website wasn't giving students a clear reason to stay, explore, or believe the program was right for them.

Faculty said the site wasn't good enough to use for their professional outreach. Marketing couldn't use it effetively during their campaigns. And underneath all of it: the site had been maintained by multiple people over time with no consistent brand standards, and no shared sense of who it was actually for.

Everyone had a complaint. Nobody had a framework.

The ECE homepage before the rebuild — cluttered layout, no clear audience priority, competing content with no hierarchy

The ECE homepage when the project was greenlit.

Method 01

Stakeholder Interviews

Method 02

Competitor Analysis

Method 03

Informal Conversations

The Research

I wasn't looking for consensus.

I interviewed stakeholders to understand priorities, to find the one audience priority that could make every subsequent decision defensible. I studied competitor department websites across North America to understand what the bar looked like and where ECE had room to differentiate. I had informal conversations with students and faculty to understand what they were actually looking for versus what the site was currently giving them.

What came back was clear: prospective students had to be the primary focus. Not because other audiences didn't matter, but because designing for the person with the least context meant the site would work harder for everyone else too.

That single finding cut through competing agendas and gave every content decision a defensible answer.

Audience A

The 17-year-old choosing an undergrad major

Is this place serious enough to matter, and human enough to enjoy? Will I get access to real opportunities and and will I actually have a life while I'm here?

Audience B

The 22-year-olds and above weighing a master's or PhD

Credibility and Institutional weight. Access to research funding that justify the years they're about to commit.

Same page. Same content. Two completely different requirements. I had to make decisions that served both without the site feeling split or generic.

The Industry Opportunities page was built for industry partners. But I designed it knowing a prospective student would read it and ask: does this department get me access to the kinds of organizations I actually want?

The Process

Three workflow decisions that shaped the output.

Prototype in the Real Environment

I wireframed in Figma but built the working draft directly in WordPress. Stakeholders saw the real thing and when the Chair reviewed it for her final approval, there was no translation loss.

Color and Contrast as Wayfinding

I adjusted specific color elements within sections, not to deviate from U of T brand guidelines, but to redirect users. I used negative space and contrast to pull attention toward what mattered.

Built to Survive Handoff

The homepage was rebuilt in independent modular sections. A site that only a developer can touch will eventually break the moment that developer leaves.

What I Built

A strong homepage pointing to underdeveloped pages doesn't solve the problem — it moves it one click deeper. So I built both.

The rebuilt ECE homepage — modular sections, clear hierarchy, designed for prospective students

Homepage Rebuild

Restructured from the ground up into independent modular sections, each optimized for a first-time visitor. The goal was a page that pointed clearly inward, to internal pages that were actually of value to the visitors.

Industry Opportunities

A page that didn't exist before. Two-column card layout separating "Work with us" from "Sponsor us," with departmental metrics that let prospective students and industry partners answer their own questions.

Events at ECE

Transformed from a bare WordPress calendar widget into a contextual page. Rebuilt as a standalone page and integrated into the homepage, repositioning it as proof that ECE has a culture, not just a curriculum.

Before

Pictured Above: Original Events page versus the Mockup that I presented

Pictured Above: Events page Mockup — Changes made to design during Implementation

After

The rebuilt ECE events section — contextual layout integrated into the homepage as a recruitment asset

A recruitment asset. Shows prospective students ECE has a life outside the classroom.

Student Research Opportunities

A student-focused sub-page built under the Research page. Research access is a deciding factor for graduate applicants, and students needed to know they had these opportunities.

ECE Latest: News & Insights

A news and blog repository, giving the department a content channel it could use as ongoing proof of departmental activity.

Also integrated with the Homepage

Toronto NanoFabrication Centre

A standalone five-page site consolidated into a streamlined two-page section within ECE.

Migrated Toronto Nanofabrication Centre's (TNFC) standalone website with ECE at U of T's web environment.

The Outcome

The site went from a liability to a tool.

Bounce rates dropped. Session times increased. Internal traffic flow improved meaningfully. Marketing launched campaigns using pages that didn't exist before the project. Specific figures are available on request.

Equally important: The modular build ensured non-technical staff could maintain it without breaking it.

“[Department Chair] signed off on the [new] design [for the Homepage]. She's a fan!”

-- Message sent by Admin (after Mockups were approved).

↓ Bounce Rate

Measurable reduction — figures on request

↑ Session Time

Measurable increase — figures on request

↑ Internal Traffic

Stronger flow to core recruitment pages

What I Learned

A strong homepage pointing to underdeveloped internal pages doesn't solve the problem, it moves it one click deeper. A homepage that goes live before the pages it links to are ready hands the first impression over to whatever is on the other end of the click, and that click might be the only one you get.

Sites that look right at launch but are too fragile for non-technical staff to update will eventually break down. Modularity wasn't a nice-to-have, it was to ensure the work would last beyond my involvement. I'd push for it more explicitly next time instead of springing it on the stakeholders as a simple design decision.

Academic Institutions often design primarily for maintainability, resulting in sites not optimised for the people who need them. What's easy to maintain and what actually works for users is massive and questioning it early would have made some conversations easier.

Designing with prospective students as the primary audience solved two problems at once. It gave us a design direction and a political one. Every content request could be evaluated against a single question: does this serve prospective students? When the answer was no, that was a reason, not a preference. It turned subjective pushback into a conversation with stakes.