Website Production Design

For: the University of Toronto, The Edward S. Rogers Sr. Department of Electrical and Computer Engineering (ECE at U of T)

Work Highlights (June 2024 - March 2025)

I led production design and WordPress implementation, delivering a more accessible experience through standardized components and improved usability. I navigated the full redesign and management of pages on both the public website and a restricted intranet, covering site audits, Figma-based wireframing, and hands-on WordPress delivery.

Disclaimer: As this public website continues to evolve, the pages may differ from the versions shown in the case studies. I have since left the organization, and any updates made thereafter are at their discretion.

Projects

Migrated the Toronto Nanofabrication Centre from its standalone website to the department’s public website.

Mar 2025

Rebuilt ECE homepage information flow to improve student recruitment and departmental engagement.

Jan 2025

Designed the Industry Opportunities page to support sponsorship and industry engagement.

Dec 2024

I reviewed the website through UX research and stakeholder meetings to learn how students, faculty, and visitors navigate and make decisions online.

This insight helped streamline information paths, enabling users to find what they need more quickly and with greater ease.

The Events page best showcases this shift; previously, it relied on a default WordPress calendar widget that offered little support for helping users understand information.

My goal was to transform this into a more contextual experience that made upcoming events easier to find and understand.

Fig. 1: Events page that I presented

I conducted accessibility and content audits across departmental pages to assess alignment with WCAG standards and UofT Brand guidelines.

By utilizing tools like WAVE and Google Lighthouse, I personally verified the accessibility scores of every page I built.

This ensured that the CMS closely reflected the designs made in Figma.

These checks also served as self-validation of build quality; for eg, on Lighthouse, the Events page scored 95/100, and the TNFC site achieved a 99/100, confirming that the implementations met high accessibility standards.

I prioritized standardizing UI to reduce design-to-development gaps and speed up delivery timelines.

I created Figma mockups to visualize design updates before moving into WordPress implementation. These ranged from full page redesigns to targeted refinements, such as adjusting layouts and introducing new content blocks.

A key moment of reframing occurred during the Events page redesign. While I initially explored building a highly customized component from the ground up, stakeholder discussions helped me realize that enhancing the existing widget would solve the problem faster.

This approach reduced development effort and improved usability without over-engineering.

To keep the department agile, I also managed a weekly content workflow through Asana to prioritize ongoing staff and faculty requests.

Fig. 2: Layout Adjustment Mockups

Fig. 3: Events page Mockup - Changes during Implementation

Key Pages built

These are direct links to the pages.

ECE Events ↗

Toronto Nanofabrication Centre ↗

ECE Department’s Home Page ↗

Industry Opportunities ↗

Student Research Opportunities ↗