CBC Radio-Canada is a Government agency website with the goal of informing, Enlightening and Entertaining Canadians.
1. Identify difficulties potential users experience navigating and interacting with the website on desktop and mobile.
2. Develop responsive redesign for desktop and mobile that provide solutions to navigation, and engagment issues.
In our University of Toronto UX/UI Bootcamp we were tasked with the challenge of developing a destop and mobile RWD redesign and update for a Government Agency website.
As a team of UX designers it was our role to research and define problems users were experiencing with the current CBC Radio-Canada website. Following this, it was my role as our teams solo UI designer to ideate, design, prototype, test and iterate user-centric solutions that would solve our defined problem and provide CBC Radio-Canada the ability to further engage users with their mandate.
Miro, Figma, Adobe Illustrator, Google Suites, UsabilityHub
4 weeks
People had difficulty understanding the site's main purpose to inform, enlighten and entertain because of confusing navigation, a cluttered header, disorganized secondary links and utilities, poor content layout, unclear media types and lack of appropriate calls to action.
Clearly layout and establish proper hierarchy of primary navigation and secondary toolbar quick links, redefine navigation tab headings to make clearer path for user to find what they are looking for, define media types, categorize available media content (primary media, behind the scenes), implement clear CTA’s (call to action).
Our Research Process began by surveying the current website. This included a general analysis of the purpose of CBC Radio-Canada website, potential users, a heuristic evaluation, colour accessibility testing and prospective user flow. Building from this we were able hypothesize potential problems users may have, and develop a proto persona.
After evaluating potential problems and establishing a point of view from our proto persona we were able to develop a detailed and focused research plan. Our Research Strategy followed as such, conduct User Test, Analyze the data gathered, Define our user problems, goals and priorities, DevelopStrategy to address defined problem , Ideate initial solution opportunities based on research findings. It was from this data that we would begin our redesign phase to develop solutions with a positive impact on CBC Radio-Canada’s usability.
Our team conducted 5 usability tests on desktop and 2 on mobile in order to identify any pain points or sources of confusion the user experienced navigating the current CBC Radio-Canada website. Participants varied in identifying gender and ranged from ages 30-45, within Canada.
Our method to obtain data was to provide users with a scenario and task designed to mimic the interest and interaction of our proto persona and target areas of desired impact for the current site. Users were asked to provide general comments and feedback as they attempted to complete tasks.
“I still need this website explained to me this site is not helping me find out about the radio”
“Tab had a bad heading for looking for podcast but I got lucky it being the first place I looked"
Following usability tests our team analyzed test/interview data we gathered to group and prioritize common pain points and areas of confusion our users experienced.
In doing this our team was able to focus on elements defining our user problem and strategize ways to target key issues to develop impactful design solutions.
Note: Users seemed to navigate towards the search bar for the initial task (perhaps because of task language). Subsequently users would quickly hovered dropdown menus of main navigation and seemed to familiarize themselves with the site and completed future tasks through recall.
People had difficulty understanding the site's main purpose to inform, enlighten and entertain because of confusing navigation, a cluttered header, disorganized secondary links and utilities, poor content layout, unclear media types and lack of appropriate calls to action.
After analyzing the research findings that defined our problem statement our team looked to visualize key areas of focus and establish the scope of the redesign project. We visualized these target areas by redlining and annotating the current CBC Radio-Canada site with a UI heuristic evaluation and user pain points.
CBC Radio-Canada users experienced difficulty with confusing navigation, unclear tab headings and poor organization. These highlighted issues within our problem statement led us to strategize ways of reestablishing and clearly defining the site's information architecture and organization hierarchy. This could then provide a skeleton of primary secondary and teriary pages for a new site map.
We conducted 3 open card sorting sessions with participants aged 30-36 to help better understand how information should be categorized and grouped. Our team used the current site map to define the cards to be sorted. Participants were then asked to sort and group cards into categories they defined. We then structured these groups and categories into a new information architecture and organization hierarchy.
After analyzing our card sorting sessions, our team developed a defined site map and began strategizing and ideating corresponding components of our redesign.
Our team evaluated our priority matrix (defined from user testing analysis) in order to compare business and user priorities to strategize redesign features with positive impact. Coupled with our new site map we then determined why and where to implement redesigns in our initial design solutions.
Our initial design ideation started by sketching out the components of our new navigation and information hierarchy. Still in our research phase we looked to cycle back to user testing to, at a first glance, see if we were on the right track towards addressing navigation layout concerns.
.svg)
Our Team conducted a 5 second test with five male/ female participants between the ages of 30-37. Participants were shown the initial design of our homepage wireframe and then asked to complete a survey. Questions focused on layout, atomic design, aesthetic and if there were any elements users found confusing or distraction. Feedback on Initial design led to iterations primarily addressing distracting elements and spacing.
In Iterating upon the feedback from 5 second user tests, our team moved from the primary UX research phase into our UI Redesign Phase.
Our Design Processinvolved several stages moving from Lo-fidelity to Hi-fidelity. In each stage of the design process, building from our research phase, our evolving design solutions were Tested, evaluated and Iterated upon to ensure they addressed priority/goal and impact indicators we had established. Our Wireframe,Prototype and design Solution stages only moved forward from lo-fi and mid-level to Hi-fi by Testing and Iteration. Testing in our design phase involved both in-team testing and remote usability testing with users. These steps were key to the development of our redesign.
After developing iterated versions of navigation and primary UI elements our team completed Lo-fi and Hi-Fi wireframes through analysis, iteration and testing for both desktop and mobile.
Our wireframes were focused on the key screens our User Persona would navigate and reflected the goals of CBC Radio-Canada.
In Figma we developed lo-fi clickable prototypes for both desktop and mobile devices. In shifting between desktop and mobile our designs sought to address usability issues and develop responsive design to determine how content and layout would stack and unpack at different pixel breakpoints and how we could keep features consistent at large and small screens.
Our team continued to analyze and iterate designs from lo-fi to mid level and hi-fi prototypes through in team testing. Our in team testing methodology focused on designing from desktop to mobile and then building from mobile backup to desktop. We hoped this would allow us to develop useful features we could keep impactful at all screen sizes for both CBC Radio-Canada and our users.
In working mobile back out to desktop we noticed our team could better exploit the “app” tabs feature we were ideating in lo-fi prototypes. This would help us solve some redundancy and result in tabs and navigation that had greater impact on usability and CBC Radio-Canada KPI’s. Implementing in desktop it established a defined secondary tool bar of quick links and addressed early issues of navigation.
As development continued into hi-fidelity prototypes our Hi-fi wireframes more closely reflected our style guide and content from CBC Radio-Canada / CBC brand websites. At this stage we were still continuing to ideate and evaluate UI elements moving towards usability and A/B testing. From testing our team would iterate solutions and prepare final deliverables.
A/B testing was conducted with 3 male and female users ages 30-37.
Users tested 4 prospective navigation header options to determine preferred search bar style and location. All users preferred option 4. (see below).
6 usability tests split across Hi-fi Desktop and Mobile prototypes were conducted. Tasks were designed to test navigation, content and aesthetic. Participants were mixed male and female and ranged from ages 31 to 37.
Users had previously participated in initial testing of original website navigation pre redesign, I found this particularly helpful in making sure users problems and confusion had been addressed. Testing was instrumental in addressing problematic elements that still existed after Lo-fi prototypes.
Based on desktop hi-fidelity prototype usability testing our team further developed our navigation header by moving utility links to footer and removing unnecessary “hamburger menu site map” feature which users felt was overwhelming and not useful. We also minimized and reorganized the content of our collapsible footer.
 1.svg)
Based on mobile hi-fidelity prototype usability testing our team implemented a few iterations. We added horizontal scroll indicators to our top scroll menu and adjusted font weights and indicators on accordion menus.
After the last stage of iterations our UI design team updated our responsive design guide for desktop, laptop, tablet and mobile breakpoints to reflect the final designs of our homepage.
Our iterations made us feel confident we had arrived at our final deliverables. Our team had addressed usability issues and implemented features that made navigation easier, distinctly displayed content of different media types and better organized the site for users to interact.
It is our belief that in adopting this redesign CBC Radio-Canada website will now be able to better engage Canadians and global users with the service of informing, enlightening, entertaining and providing transparency.
Continued A/B testing and iterations Continue to iterate site map Continue to iterate webcard layouts to find more appealing solution to highlighting content and different media types
