TMU International Students Blog Redesign

Redesigned the TMU international students blog using Google Analytics scroll and click data to fix key usability barriers and get more students to the CTAs that mattered.

Client

Toronto Metropolitan University

Role

Designer

Team

2 Designers, 3 MarComms Stakeholders

Timeline

6 weeks — Shipped April, 2026

Skills

UX Research | Google Analytics | Information Architecture | Mobile-First Design | AEM

Outcome

27% increase in CTA click-through from the blog, within 6 months of launch

(001)

— What's International Students Blog?

The International Students Blog is TMU Recruitment's content hub for prospective international students, covering admissions, settlement, and campus life.

A core piece of TMU's global recruitment strategy, connecting with prospective students abroad.

Some numbers for context:

9,900+

Monthly Unique Users

11,700+

Monthy Pageviews

93+

Countries Reached

(001)

— What's International Students Blog?

The International Students Blog is TMU Recruitment's content hub for prospective international students, covering admissions, settlement, and campus life.

A core piece of TMU's global recruitment strategy, connecting with prospective students abroad.

Some numbers for context:

9,900+

Monthly Unique Users

11,700+

Monthy Pageviews

93+

Countries Reached

(002)

— The Problem.

(002)

— The Problem.

While reviewing the blog page, I noticed some design elements were violating a few UX heuristics. My team and I pulled the heatmap data for both mobile and desktop to see how users were actually behaving on the page. Analyzing the results surfaced the following findings:

Note: Heatmap click data only captures actual taps/clicks. Incidental touches while scrolling aren't counted here.

#1

Mobile-first traffic:

Nearly 90% of user came from mobile, meaning any usability issue there affected nearly all of the blog's traffic.

#2

Clicks landing on non-links:

Out of the top 10 most-clicked spots on the page, 8 weren't links. Users were clicking on headings and graphics that only looked interactive.

#3

Key CTAs lost to scroll depth:

The most important CTAs, including "How to Apply" sat near the bottom of a long page, so most users never scrolled far enough to reach it.

(003)

— Design Process.

(003)

— Design Process.

Multi-device Design:

Using TMU's existing AEM component library, I designed high-fidelity wireframes for both mobile and desktop, starting mobile-first since that's where 90% of the blog's traffic came from.

Multi-device Design:

Using TMU's existing AEM component library, I designed high-fidelity wireframes for both mobile and desktop, starting mobile-first since that's where 90% of the blog's traffic came from.

The original page used stylized graphic-style headings that visually resembled buttons or links. I replaced these with clean text headings structured by proper heading levels (H1, H2, H3), so the page's hierarchy reads clearly and nothing looks falsely interactive.

Key Fix: Removed Graphic Headings, Established Clear Heading Levels

Key Fix: Removed Graphic Headings, Established Clear Heading Levels

The original page used stylized graphic-style headings that visually resembled buttons or links. I replaced these with clean text headings structured by proper heading levels (H1, H2, H3), so the page's hierarchy reads clearly and nothing looks falsely interactive.

Before
After

(004)

— Testing & Iterations.

(004)

— Testing & Iterations.

Stakeholder review:

Unexpected finding:

Across 3 separate meetings, I presented the redesign to 3 stakeholders, all of whom aligned on the direction.

Stakeholder review also surfaced a second issue: the blog homepage was buried 2 menu levels deep on mobile. Since TMU runs significant ads on individual blog posts, students landing there had no clear way back to the blog homepage, or any sense it existed. After review with TMU Global department, we moved the blog homepage into the main menu bar for direct access on any device.

Unexpected finding:

Stakeholder review:

Stakeholder review also surfaced a second issue: the blog homepage was buried 2 menu levels deep on mobile. Since TMU runs significant ads on individual blog posts, students landing there had no clear way back to the blog homepage, or any sense it existed. After review with TMU Global department, we moved the blog homepage into the main menu bar for direct access on any device.

Across 3 separate meetings, I presented the redesign to 3 stakeholders, all of whom aligned on the direction.

(005)

— Final Design.

#1

Landing Section

Introduces the blog with its title, welcome message, and latest and trending post — the first thing students see when they land on the page.

Before
After

My design rationale:

I removed the graphic-style heading and top banner image, replacing them with a plain text heading using proper heading levels. This fixed the false-link cue while also cutting scroll depth to get students to key content faster.

#2

Browse by Category Section

This section lets students filter blog posts by topic — Academic, University Life, Health and Wellness, Student Finances, and Career and Extracurriculars.

Before
After

My design rationale:

I switched from tabs to accordions, since tabs required clicking "next" to cycle through all 5 categories on mobile.

Accordions let students see every category at once and expand only the ones they're interested in, without extra taps to discover what's available.

#3

CTA Section

The final "You belong at TMU" section, with CTAs to explore programs or start an application.

Before
After

My design rationale:

I redesigned the CTA buttons with higher-contrast colours, since the originals blended too closely into the background and didn't stand out.

I also cut down the block of text below "You belong at TMU," which reduced scroll depth and got students to the CTAs faster.

(005)

— Final Design.

#1

Landing Section

Introduces the blog with its title, welcome message, and latest and trending post — the first thing students see when they land on the page.

Before
After

My design rationale:

I removed the graphic-style heading and top banner image, replacing them with a plain text heading using proper heading levels. This fixed the false-link cue while also cutting scroll depth to get students to key content faster.

#2

Browse by Category Section

This section lets students filter blog posts by topic — Academic, University Life, Health and Wellness, Student Finances, and Career and Extracurriculars.

Before
After

My design rationale:

I switched from tabs to accordions, since tabs required clicking "next" to cycle through all 5 categories on mobile.

Accordions let students see every category at once and expand only the ones they're interested in, without extra taps to discover what's available.

#3

CTA Section

The final "You belong at TMU" section, with CTAs to explore programs or start an application.

Before
After

My design rationale:

I redesigned the CTA buttons with higher-contrast colours, since the originals blended too closely into the background and didn't stand out.

I also cut down the block of text below "You belong at TMU," which reduced scroll depth and got students to the CTAs faster.

(006)

— Outcome & Reflection.

(006)

— Outcome & Reflection.

27%

Increase in users landing on the Explore Programs page from the blog homepage

within 6 months after the redesign launched, indicating that users found the fixed CTAs easier to notice and act on.

What I learned:

This was my first time designing for a public TMU page reaching thousands of visitors, so I had to base changes on real data instead of just what looked right. The heatmap click numbers alone didn't explain why users were clicking there, so digging into that "why" (false affordances, not bad content) was what led me to the right fix.

Looking ahead:

Since the redesign is live, the next step would be pulling a fresh heatmap on the new design to see whether the fixes actually changed how students interact with the page, not just whether the numbers moved.

No heading elements found. Showing placeholder content.