CP24 Accessibility

Accessibility and Mobile Optimization
Project GOAL
Performed a Heuristic Analysis on the CP24 web and mobile sites in order to modernize the website and make them more accessible to a wider audience
Project Type
Accessibility and Mobile Optimization
Project Year
2022

Project Overview

Client Presentation and Demo of our redesign

Research

Our team performed a heuristic analysis in order to assess which areas of the website could be improved. We decided to focus on modernization, mobile responsiveness, accessibility and the information architecture of the website. Our research suggested that modernization was important, as most users spend only a few seconds on a website before continuing to a new site, so leaving a meaningful first impression is critical. Mobile responsiveness was also critical to improve, as mobile usage has increased dramatically over the last decade and our research suggested that mobile users are even more likely to abandon a website that is not optimized for mobile devices. Ensuring that the website is accessible for as many people as possible is extremely valuable, which is why we also wanted to focus on Accessibility.

Low Fidelity Wireframes

Our wireframes aimed to maintain the original theme of the CP24 website, but organize the information in order to make it more uniform and easy to read. Much of the excess information on the original page is more compact and easy to read.

User Tests

We conducted user tests with 8 different participants for both the desktop and mobile version of the website and received insights on further improvements we could make. Here are some key findings:

DESKTOP

1) Some users found it difficult to locate certain sections when they were lower on the screen, with no clear indication of where on the screen they were

2) Consider having a clear navigation bar that follows the user as they go through the website. This can be done through sub-headings.

3) Signing up for breaking news emails wasn't easily accessible for many users

4) Add sign up to footer of the website.

5) Users thought the 'More' section was a list of more categories of top navigation and didn't expect for it to be a contact form →

6) Added a "Contact Us" button to the bottom of the page that will lead users to the "More" page.

MOBILE

1) Backtracking while the navigation menu was open was not functional

2) Ensure the hamburger menu and navigation menus can be clicked out of.

3) User scrolls up to find the hamburger menu again →

4) Have the header menu stay at the top when the user scrolls down a page to ensure backtracking and navigation is always accessible.

5) Users attempted to use the search bar when looking for 'CP24 Breakfast', while another did not find it intuitive to look for a Sports article under the "News" section

6) Consider IA - final build must have search bar that is always present at the top right of every page.

Final Mockups

With the insights collected from the user tests, we implemented the changes into our wireframes and created the high fidelity mockups.

Other Projects

Let's Chat!

Reach out to me by filling out the following form. I would love to chat about anything. I usually will get back to you within 2 business days!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.