TMG Website Redesign: From Static Brochure to Task-Oriented Experience.

The Marketing Group (TMG) at the University of Toronto Scarborough had a Wix-hosted website that communicated brand identity but generated significant engagement friction: a 62% bounce rate, weak mobile usability, shallow navigation, and conversion paths that required users to search for next actions. The 90-day redesign treated the website as a product with measurable user journeys rather than a digital brochure with pages. The outcome was a mobile-first, task-oriented experience structured around five distinct audience jobs: students discovering TMG, event attendees finding what to attend, applicants evaluating whether to join, sponsors evaluating partnership, and social visitors looking for the Linktree. Each page was rebuilt with a clear information hierarchy, specific CTAs, and a design system — brand pink, navigation navy, Raleway headings, Wix Madefor Text body, 1180px desktop content width — that creates consistency across every surface. Analytics confirmed the shift: sessions up 67%, unique visitors up 45%, bounce rate dropped to 23%, and average session duration up 30% to 3m 36s.

The redesign was not driven by aesthetic preference. Google Analytics data pointed to specific engagement problems that traced to identifiable UX failures in the original Wix site. Mobile usability: the old layout did not reliably adapt to a phone viewport — navigation compressed, section spacing broke, and interaction targets were too small for mobile students. Mobile traffic was the largest segment, so every user on a phone was hitting a degraded experience. Information architecture: the old four-item navigation did not expose the user tasks that mattered most — events, joining, sponsorship, organizational structure. Visitors with a clear goal (apply, sponsor, find a specific event) had no efficient entry point. Cognitive load: large photo compositions with overlapping content regions, mission copy over a busy team photograph, and sparse whitespace forced users to infer page purpose and next steps. The visual hierarchy competing with decorative imagery meant important content did not read as important. Weak conversion paths: the joining path, event discovery, and sponsor engagement all required users to locate the relevant action. CTAs were present but buried beneath content that did not orient them. Inconsistent hierarchy: important content competed with decorative imagery, blank space, and a Wix platform banner. The brand was visible; the actions were not. Limited orientation: the site gave users little sense of where they were in the experience. Navigation did not reflect active states, footer was sparse, and section structure did not sequence the experience from awareness to action.

The strategic calls behind the prototype and the reasoning each one rests on.

Seven surface-level comparisons from the same viewport dimensions. The old site had personality and brand energy — the challenge was not to replace that, but to give students, applicants, and sponsors a clearer path through it.

Homepage.

The old homepage led with a pink photo overlay, centered logo stack, and overlapping About copy — strong brand energy, but the first screen made users infer what to do next. The new homepage sequences the experience: navigation → brand identity → value proposition → two primary CTAs → event cards. Each zone does one job before passing to the next.

Navigation.

The old nav compressed brand logo, menu items, event links, and social icons into one compact strip. The new navigation groups destinations by user intent — About, Events, Sponsors, Join Our Team — with dropdown depth available for committed users, an active state, and the Linktree as a top-level destination. Hick's Law at the nav level: same number of decisions, organized so each one maps to a real job.

Events page.

The old events page read as a promotional banner — strong pink composition, event name, broad summary. The new page opens with a full-width audience photo, a direct "Our Events" headline, and a short participation prompt that explains why students should attend. Event entries below follow a repeatable card pattern: title, date, description, image proof, outcomes, CTA. The shift is from announcement to persuasion.

About page.

The old About page placed the mission copy as a white card over a large team photo — readable, but the background competed with the message. The new layout separates them: mission in its own two-column content zone, team members grouped by department below. Gestalt proximity does the organizational work — no explicit labels needed to see where leadership ends and marketing begins.

CBA Applications.

The old CBA page was informational — a centered white card explaining what a Campus Brand Ambassador is. The new page is a conversion surface: community photography, the value line "Represent. Connect. Grow.", and a "Why Become a CBA?" section with concrete benefit framing before the application path. Students were not asking what a CBA is — they were asking why they should become one.

Sponsor path vs. archive.

The old site mixed sponsor information into general student content; what remains is an archive-style page. The new Sponsors page is a dedicated partner experience: audience-specific hero, a "Why Sponsor TMG" section with four explicit benefit categories (talent pipeline, brand exposure, industry insights, past-partner credibility), and a direct contact CTA. Audience segmentation as an IA decision, not just a visual one.

Mobile homepage.

The old site did not adapt reliably to a 390px viewport — navigation compressed, section spacing broke, and tap targets were undersized for mobile students. The new mobile layout is the canonical starting point: single-column flow, oversized headline and CTAs, stacked event cards, and a footer with grouped navigation links. Because it was designed mobile-first, the hierarchy holds cleanly at every breakpoint rather than stretching a desktop layout.

The redesign uses a documented visual language so future maintainers can work from consistent tokens rather than guessing. Pink remains the primary brand signal; navy grounds actions and navigation.

The signature product moments. Each one is a complete scenario the prototype demonstrates end to end.

feature 01 —

01.

Homepage redesign.

The new homepage gives users a clear first scan: navigation, organization identity statement, supporting copy, Pink Sheep mascot, and two primary CTAs above the fold. Upcoming events surface as scannable cards immediately below the hero. The section ends with social follow and Linktree actions. On mobile, the same content collapses into a single-column flow that preserves reading order and keeps the primary CTA reachable without scrolling.

The hero composition does one job at a time: navigation, then identity, then value proposition, then actions. The old homepage put all of these in competition. The redesign sequences them so each element reads after the previous one rather than competing for the same attention.

feature 02 —

02.

Events page.

The events page opens with a full-width audience photo, a direct "Our Events" headline, and a short participation prompt that explains why students should attend, not just that events exist. Below, event entries follow a repeatable pattern: title, date, description, image proof, outcomes, and CTA. A supporting "Other Events" module shows the breadth of TMG programming. The page ends with a social follow action that keeps the community connection visible after event content is consumed.

Event content that shows community proof (audience photos, outcome statements) outperforms content that only describes what the event is. Students evaluating whether to attend need to see that other students attended and found value — that is the job the imagery and outcome language do.

feature 03 —

03.

About page and team structure.

The About page separates mission copy from the team photo into a two-column desktop layout, resolving the figure-ground clarity issue of the old design (white mission card over a busy team image). Team members are organized by department — leadership, business development, events, marketing, operations — using Gestalt proximity to make organizational structure immediately recognizable. Each card shows portrait, name, role, and a LinkedIn link. The mobile view gives each department section a clear vertical order.

Potential members and sponsors evaluate the About page to assess organizational credibility. Seeing departments with named leads — not just an alphabetical grid of portraits — communicates that TMG is structured and accountable. That credibility is the conversion driver on the About page, not the mission copy.

feature 04 —

04.

Sponsors page.

The sponsors page is a dedicated audience experience for external partners, separate from student-facing content. It opens with a partner-specific hero, then presents an explicit "Why Sponsor TMG" section with four benefit categories: talent pipeline access, brand exposure at student events, industry insights, and past partner credibility (with partner logos). The page ends with a direct "Become a Sponsor" CTA. Sponsors arrive with a specific evaluation question — is this a credible, valuable partnership? — and the page answers that question before asking for contact.

Mixing sponsor content into student-facing pages makes the site harder for both audiences. Corporate partners evaluating a student sponsorship need a professional, partner-specific experience — not a page designed to recruit members. Separation by audience is an information architecture decision that also serves brand credibility.

feature 05 —

05.

CBA Applications page.

The Campus Brand Ambassador recruitment page uses community imagery, a role-specific "Campus Brand Ambassador" headline, and the value line "Represent. Connect. Grow." to communicate the opportunity before explaining it. The supporting "Why Become a CBA?" section converts the application page from a passive information destination into a conversion surface with concrete benefit framing: leadership development, networking opportunities, and marketing experience. The application path feels current, visible, and connected to student identity.

Application pages that front-load benefit framing outperform pages that front-load process information. Students are not asking "what is a CBA?" — they are asking "why should I become one?" The new page answers the second question first, then supports it with process details for committed applicants.

feature 06 —

06.

Mobile layout.

The full redesigned experience on a 390px phone viewport: compact header with navigation controls, single-column hero with primary CTAs, stacked event cards with readable type, and a bottom-anchored footer with grouped navigation links and social destinations. Tap targets throughout are sized for thumb interaction. The mobile layout is not a stripped-down variant — it is the canonical layout from which the desktop was derived, which is why the hierarchy choices hold at every breakpoint.

Designing mobile-first forced every content decision to be justified by user value, not by the visual affordance of a wide canvas. Two sections present on the desktop homepage were removed during the mobile-first pass because they did not earn their space at 390px — those cuts also improved the desktop layout.

the honest caveats —

• Wix's editor constraints limit what is achievable in custom animation, advanced data binding, and performance optimization. A Next.js or SvelteKit build would offer more control over Core Web Vitals and interaction patterns, at the cost of a deployment pipeline the organization may not be able to maintain.
• Analytics coverage does not yet include CTA-level event tracking. Session and duration metrics confirm engagement improved, but conversion rates for specific actions (join form submissions, sponsor contact clicks, CBA applications) are not yet measured separately.
• A formal accessibility audit has not been completed. The redesign improves contrast, readability, and responsive layout, but keyboard navigation, screen reader heading order, focus states, and ARIA labels require a Lighthouse or axe audit to validate.
• The 90-day measurement window may include confounding variables: increased event activity, social media campaigns, and seasonal student engagement patterns can all shift session volume independently of the redesign. A longer measurement period would increase confidence in the attribution.
• Content lifecycle management — archiving past events, updating application deadlines, refreshing sponsor lists — is not systematized. Without a content governance plan, the site will accumulate stale content that reduces credibility with returning visitors.