Turning a functional calendar into a mobile-first student touchpoint

ECE Events Page Redesign

Read Case Study ↓
Domain
Education
Role
UX/UI and Front End
Duration
March 2025
Deliverables
Mockups + WordPress Site
Tools
Figma, WordPress
ECE Events

ECE EVENTS PAGE

Project Goals

The Electrical & Computer Engineering (ECE) department hosts a wide range of events that support prospective and current students, from research showcases to industry events.

While the existing events calendar widget through WordPress made the event listings functional, there was an opportunity to make the experience more engaging and mobile-accessible as especially as many students interact with event links via social media or messaging apps. There was also the opportunity to do something that most designers dread
Make the events page pop!
Design Opportunities
Clarify and Categorize
Introduce sectioning and brief descriptions to highlight types of events.
Optimize for Mobile Sharing
Design for responsive viewing across devices, anticipating high mobile traffic.
Support University Systems
Embed existing calendar tools while improving frontend presentation.
This redesign involved creating a standalone Events page that presents ECE's offerings with clear structure and supporting context while maintaining access to the events calendar widget that using the CMS afforded us with.

Here's what it originally looked like:
ECE Events
Step 1: Research & Mockups
I began with a short content audit of the existing events page and explored how other U of T departments presented similar information. Based on this and my own design knowledge, I designed a mockup that proposed room for broad event descriptions, and a calendar widget.

My focus was on layout and visual cues.
ECE Events
Step 2: WordPress Development
Once development began, I realized the calendar design was visually polished but too advanced for the widget available.

Creating a custom-coded calendar or sourcing a new plugin was possible. However, that was not the goal of this project. It was to

Deliver an improved layout.

I revised the approach to keep the existing widget and instead focused on improving the surrounding layout to make the events easier to understand and share.
ECE Events
Step 3: Mobile Layout and Responsiveness
Many students would open event links from social media apps. I needed to ensure the page worked well on mobile and was easy to scan.

I structured the layout into two modular content blocks. One block held the broader event descriptions. The other held the calendar widget. Fortunately, this was accounted for in my original mockup.

On desktop, these appear side by side. On mobile, they stack vertically for ease of navigation.
ECE Events ECE Events ECE Events
Project Results

The final layout reflects a balance between design goals and platform constraints.

It is now easier to understand what types of events ECE offers.
What did we Achieve?
✓ Introduced an informative section with clearer messaging for students.
✓ Structured the layout into modular sections that are readable on mobile and desktop.
✓ Retained the existing calendar system while using real event visuals.

Takeaways

The goal of this project was to redesign the ECE Events page to highlight departmental offerings in a clear and accessible format for both current and prospective students. The new layout added structure and context around the existing calendar, making it easier for users to understand what kinds of events were available and how they connected to the department’s broader academic and professional initiatives. Care was taken to ensure the page remained easy to use on mobile, as many students access event information through shared links. The redesign was completed within the university’s approved web framework, respecting all guidelines and maintaining consistency with other sites across the Faculty.

Key Takeaway: Design for the Platform, not for Visuals

This project helped me understand how important it is to design with the output system in mind. While early concepts explored more advanced options, it became clear that working within WordPress and university standards was the right approach for long-term sustainability.

Mockup of the redesigned ECE homepage