A Design Strategist, CX/UX Strategist
PROJECT TYPE:
Responsive website redesign
​
PROJECT DURATION: Seven Months
​
MY ROLE:
UX Strategist, Facilitator, Workshop designer, Usability Tester
THE CHALLENGE:
The challenge was proposing a new IA focusing on accessibility and ease of navigation and designing a responsive website with fresh design elements.
​
THE CLIENT: Toronto Community Housing Corporation
​
TOOLS:
Sketch, Adobe Illustrator , Optimal Workshop, LucidChart, Box, Wiki, Asana.
Research and Planning
Project Description
The Yellow Pencil and TCHC teams worked closely to develop a plan that supported the goals of the new responsive website to launch in July 2023.
Key Problems
Having thoroughly examined the client's UX research activities, including surveys and facilitating sessions with clients to review the findings, we pinpointed key problems with the existing website from the perspectives of Toronto tenants and TCHC staff.
​
Navigation:
-
Users are overwhelmed by the abundance of information.
-
Enhancements are needed to make site navigation more user-friendly and to facilitate easy access to necessary information.
Look and Feel:
-
The website is perceived as excessively bland, corporate, and text-heavy.
Usability:
-
Users lack a compelling reason to use the website, finding it useless.
-
Improvements in accessibility are required.
-
The website's functionality on mobile or tablet devices needs enhancement.
Content:
-
Users express having unanswered questions and not knowing where to find answers.
-
There is a demand for additional information and resources tailored for tenants.
-
Ensuring the availability of accurate and current information is essential for an improved user experience
Discovery Roadmap
Discovery activities to date have gained valuable insights into user needs and will continue in the new year to validate these early assumptions.
User Experience Research
User Testing Activties
Following a thorough collaboration with the client to understand the Information Architecture (IA), we initiated user testing activities on Optimal Workshop platform such as Card Sorting and Tree Testing.
Card Sorting
TCHC Card sorting involved a collaborative process where 160 participants organized content into categories, providing valuable insights into their mental models and preferences.
The card sorting result helped guide the discussions around the new sitemap and led to a tenant-focused tree test.
​
85 of 160 participants completed the study, creating a total of 582 categories, with a median of 6 categories each.
Tree Testing
Additionally, tree testing allowed us to assess the navigational effectiveness of IA. Through these methodologies, I ensured a user-centred design approach, employing empirical data to refine and optimize digital experiences based on user feedback and behaviour.
Usability Testing
In April 2023, I worked with the TCHC team to conduct a usability test that included testing a mockup of the website’s functionality and design, and first impression of participants, focusing specifically on the homepage. I've included different tasks designed to test the homepage mockup layout, navigation, and functionality to determine how easy it is for participants to find what they're looking for.
​
The test was comprised of two main parts:
-
Five-second test
-
Task completion and first-click test
​
Our participants for the usability (mockup) test were TCHC employees from different TCHC business units and residents of Toronto who use the TCHC website to find information regarding their tenancy
​
Participants were invited to complete tasks using a clickable prototype that represented the website.
Our Solution & New Design
Toronto Community Housing Website
The proposed solution was a website built on the latest stable version of Drupal, showcasing TCHC content through a refreshed and responsive design, various content types, and integrations.
Moodboard
I collaborated closely with the designer to brainstorm ideas and create the mood board for the TCHC's new website. We discussed various elements such as aesthetics, mood, and imagery, considering how the inspiration would align with the TCHC branding guidelines.
Mega Menu & CTA
Based on the user testing activity results, we updated a draft Information Architecture (IA). I worked closely with the content strategy and UI designer to ideate and develop the mega menu for the TCHC website.
​
-
Simplified menus and navigation through fewer layers of content.
-
A focus on simplifying the information and quantity of text with the end user in mind.
-
Logical user pathways for prospective renters and tenants and other key audience groups.
Landing Page & Event Listing
Building upon the insights gathered during the discovery phase and guided by the established mood board, our team meticulously designed and implemented the landing page and event listing page. These pages were crafted to effectively communicate the required elements while maintaining consistency with the project's vision and objectives.
