UofT Urbanscapes Drupal
Redesigning & migrating site from WordPress to Drupal
type
Website Design
TEAM
PSL Team & Sociology Department
TIMELINE
May 2024 - Aug 2024
Stage
Shipped
OVERVIEW
Peel Urbanscapes, part of the Peel Social Lab at UofT, is a platform focused on discussions around social inequality, urban politics, and community issues in the GTA. However, its existing WordPress website made it difficult for users to discover and navigate content.
I was brought in as the UX/UI designer to redesign and migrate the site to Drupal, with a focus on improving usability while aligning with institutional requirements.
Role
Led UX/UI design end-to-end
Conducted heuristic evaluation and content audit
Designed information architecture and navigation
Created wireframes and prototypes in Figma
Added final designs into Drupal
The Challenge
Important conversations existed, but the experience made them hard to access
The existing website contained a large volume of content, but its structure made it difficult for users to effectively navigate and engage with that content. Articles were often duplicated across multiple categories, and the navigation system lacked clarity, making it challenging for users to understand where to go or how content was organized.
The Problem
The issue wasn’t a lack of content, it was a lack of clarity
As a result, users were required to put in unnecessary effort to locate relevant information, leading to cognitive overload and reduced engagement. The issue was not with the content itself, but with how it was structured, labeled, and presented.
Limitations
Pivoting and changing approach
Due to the limited time and resources for this project, user interviews, surveys and user testing were not conducted for the re-design. Instead UofT's CMS (content management system), Drupal, guidelines were used to ensure consistency and usability. Additionally the focus was placed on applying evaluative and systems-based approach to identifying and addressing usability issues.
Process
Grounding every decision in structure and constraints
I began by identifying usability issues through heuristic evaluation, followed by a content audit to understand the scope and condition of existing material. From there, I restructured the information architecture and iteratively translated it into wireframes and prototypes. Throughout the process, I worked closely with the PSL team, the Sociology department, and the IT team to ensure the solution balanced user needs, academic expectations, and Drupal’s technical constraints.
Research - Heuristic evaluation
When user data isn’t available, usability principles lead the way
Through this evaluation, I identified issues related to inconsistent navigation patterns, unclear information hierarchy, and a lack of system feedback. Content groupings were not intuitive, and users were not given clear signals about where they were within the site or how to move forward.
Research - Content Audit
Clarity started with cleaning up what already existed
I found that many articles were repeated across different categories, contributing to confusion and clutter. I worked to consolidate content, remove duplicates, and identify areas where pages could be merged or simplified.
Research - Information Architecture
Tackling the overload of content within in a complex navigation structure
The original structure included over eight categories and contained over 60+ articles (including articles that were repeated under different categorizes, which overwhelmed users and made it difficult to form a mental model of the site.
Working closely with the PSL team, I reorganized the content into four main categories, each supported by a small number of subcategories. This restructuring reduced complexity while still preserving the depth of the content.
Wireframing / Prototyping
Designing within limits meant designing with intention
The redesign was shaped by a number of technical and institutional constraints. The site needed to be built within Drupal, which introduced limitations in terms of layout flexibility and component usage. In addition, the design had to align with University of Toronto guidelines and integrate within the broader Peel Social Lab ecosystem.
I worked closely with the IT team to understand what was technically feasible within Drupal, and with the Sociology department to ensure that the structure and presentation aligned with academic expectations.
I developed a series of wireframes and prototypes in Figma to explore and refine the new structure. These iterations focused on translating the updated information architecture into clear and usable layouts.
Final Design
A clearer structure made the content finally accessible
The final result was a redesigned Drupal-based website that significantly improved how users interact with and discover content. The new structure made it easier to navigate between topics, reduced redundancy, and created a more cohesive and intuitive experience.
The platform was also successfully integrated into the broader Peel Social Lab ecosystem, allowing content to be more visible and connected within the larger academic context.
Reflection
Next: Validate it
This project highlighted the importance of strong information architecture in shaping user experience, particularly in content-heavy systems. Working within constraints pushed me to think more critically about structure, prioritization, and scalability.
If expanded further, the next steps would involve conducting usability testing to validate the new structure, gathering user feedback on navigation and discoverability, and using analytics to continuously refine the experience.
