Despite being located inside the ECE department, the Toronto Nanofabrication centre (TNFC) – one of U of T's numerous research labs – had its own CMS infrastructure, and no connection to ECE's brand or navigation.

In November 2025, I was tasked by the ECE comms team with auditing the standalone site and proposing a design-focused solution to integrate TNFC into ECE's digital environment. How far the redesign should go, what the final architecture should look like, and how the work should be sequenced were all left for me to figure out. I decided the right move was to consolidate TNFC's multi-page site into a two-page content hub inside ECE's environment, rather than porting the existing structure over as-is. I set out to build a digital experience, grounded in two principles: Clarity — help people understand what TNFC is about. Simplicity — remove unnecessary friction from key tasks such as downloading and accessing forms.

I set and ran my own timeline: audit and research first, then design, then build. I got the CMS/web development phase for the TNFC homepage and its sub-page done in under two weeks — because I wanted working drafts in front of stakeholders early. In this project, the design approvals process took much longer, since it depended on sign-off from stakeholders. Luckily most conflicts were scheduling related and not design/development related. There were a couple of design decisions that non-design stakeholders couldn't envision at first. My working drafts and prototype were instrumental in ensuring they weren't approving something they misunderstood or required major rework late in the process.

The TNFC homepage when the project was greenlit.

Pages Built

This two-audience approach led to two distinct pages.

TNFC Content Hub Home

The Main "Home Page"

TNFC Content Hub Home: Explained what the lab was, what it offered, and positioned it clearly as a research facility. All original top-level page content consolidated into scannable sections.

Live Link

TNFC User Access page

The Page for Regular Users

TNFC User Access page: All forms, processes, policies, and compliance requirements in one place instead of five sub-pages.

Live Link

01    I Proposed a Solution that addressed Content Needs.

The obvious answer was to do a visual overhaul of the existing website using the university's branding and design guidelines. But the website lived elsewhere, and there was no direct IA-level connection to the department it was a part of.

The original website's pages did not exist because the information required that space. Therefore, stripping away the auto-generated architecture revealed two genuine content needs: a home page that explained what TNFC was and what it offered, and an access page that gave users everything they needed to book and use the facility.

I was also asked what the solution to the news feed might be: We have a blogs and news feed on the ECE website, which could easily take the TNFC load.

Therefore, I sought to address these points through my redesign:

02    A new home experience.

TNFC's original home page reads like an institutional bulletin board. The biggest disconnect was the visual consistency. U of T’s brand materials emphasize a coherent visual identity and brand voice across websites, while the original page uses a very plain layout, weak hierarchy, and a dated left-content/right-sidebar blog structure that doesn’t feel like a modern institutional service site. The page hierarchy is also weak because the News & Events column competes with the core explanation of what TNFC is and why a user should care.

My design focused on making it be perceived as open, active, and easy to engage with, instead of users having to hunt through disconnected sections.

03    Using space, layout, and focus to guide the user.

TNFC had 2 lab facilities, information about which instead of being easy to access, was originally hidden in a subpage under About Us. I integrated it into a structured card-based grid on the TNFC home page, reducing click depth.

A benefit of this approach is that the components could be extended by simply duplicating an existing block to add more facilities or services as and when required. This "modularity" was planned from the start. ECE's website had no shared component library at the time, so every page was rebuilding similar UI patterns from scratch. Designing TNFC's components to be duplicated rather than rebuilt was a deliberate step toward fixing that gap, not just solving TNFC's own layout problem.

04    Reducing Click-through Depth by removing redundancy.

Most of the top-level pages were auto-generated link aggregators, not real content pages. The actual information was buried in sub-pages that users had to navigate to independently.

Take User Access, an important page on the site. The five subpages had content that could be consolidated into a single page without having to erase or deprioritize any critical information.

One of its subpages, Access Fees, consisted primarily of long pricing tables. I suggested converting it into a downloadable PDF, accessible via a single CTA on the User Access page, rather than porting the tables into the new site's design system.

05    Improving Recognition with Visual Displays.

TNFC had information about partner organizations, which instead of being easy to recall, was originally a text-based list of hyperlinks on a Partners subpage under About Us.

I integrated it as a three-column section with an auto-scrolling logo gallery on the TNFC home page, improving partner recognition.

My original design included "Equipment Capabilities" (a subpage on the existing website) as a similar section on the home page. The decision to add it as a second core sub-page was made after I left. Due to my planned modularity, the organization was able to reuse my existing structure and other reusable components from the website to add a second page for Equipment Capabilities.

06    Designed for every screen, built for every student.

No one interacts with a website from a single device. TNFC was designed responsively from the first frame, delivering a consistent experience across mobile, tablet, laptop, and desktop.

Every layout, component, and content section was built to adapt fluidly across screen sizes, ensuring navigation remained intuitive and information remained readable regardless of how students accessed the site.