Website Production Design

I led production design and WordPress implementation, delivering a more accessible experience through standardized sections/components and improved usability in support of key business objectives.

I navigated the full redesign and ongoing management of pages on both the public website and a restricted intranet, covering site audits, Figma-based wireframing from low to high fidelity, stakeholder collaboration, and hands-on WordPress delivery. Alongside production work, I supported content strategy and information architecture, shaping page hierarchies and navigation patterns that kept information easy for teams to manage.

My phase reflected a shift in the department’s digital presence, highlighting their research and academic impact, showcasing events and learning opportunities intentionally, and tailoring content for both prospective students, faculty, and staff. Maintaining both platforms allowed the department to stay agile with updates while ensuring a forward-looking online experience.

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.

Related Case Studies

My Approach

My approach centered on grounding all production work in real user needs while aligning closely with departmental goals and priorities.

1. Understand

   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.

2. Examine

   I audited existing content and layouts to understand how design patterns affected engagement. By improving content, I reduced cognitive load and made more thoughtful design decisions.

3. Reframe

   I designed and iterated using continuous feedback, with a focus on interactions. This mindset guided both implementation and post-launch refinements to ensure the experience remained effective.

What I did

Building and QA for web

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, components, or introducing new content blocks.

I prioritized standardizing UI, which reduced design-to-development gaps and helped speed up delivery timelines. In parallel, I managed weekly content update workflow through an Asana form, allowing staff and faculty requests to be prioritized and implemented.

This approach gave stakeholders early visibility into proposed changes before development began. By iterating through mockups first, I minimized rework while remaining aligned with University of Toronto branding standards (available publicly here).

Fig. 1: Layout Adjustment Mockups

The Events page best showcases this shift in production thinking. Previously, it relied on the default WordPress calendar widget. While functional, it offered little support for helping users understand information. The redesign transformed the page into a more contextual experience that made upcoming events easier to find and understand.

Fig. 2: Events page Mockup I presented

Being told that the UI needed a refresh, in my earliest Figma mockup (pictured above), I focused on developing a highly customized component that would have required building a new widget from the ground up. Through further stakeholder and technical team discussions, I realized that enhancing the existing widget would solve our problem faster. This approach reduced development effort, improved discoverability and usability without over-engineering.

Fig. 3: Events page that I implemented

Guided by a focus on inclusive design, I conducted accessibility and content audits/reviews across departmental web pages to assess alignment with WCAG standards and UofT guidelines. Using WAVE and Google Lighthouse, I personally checked the accessibility scores of pages I had built to ensure the CMS reflected the clear hierarchy defined in Figma.

For instance, the Events page scored 95 out of 100, and the Toronto Nanofabrication Centre (TNFC) site scored 99 out of 100. These checks served as self-validation of build quality and confirmed that the implementations met high accessibility and web standards.

Key Pages built