CANADA CHILD CARE BENEFIT
Part of Canada Revenue Agency (CRA)
THE PROBLEM: �To identify the problems in navigation and user path when applying for Canada Child care benefit. Understand the problems user face on this website and fix the navigation.
THE SOLUTION: �Redesign the website to incorporate the feedback received from the users and make the interaction faster and easier.
MY ROLE: UI designer (Group Project)
TOOLS: Figma, Miro, Adobe Color, Miro
1
USER INTERFACE ANALYSIS
MANALI ARORA
2
Homework 8
3
PROTO PERSONA
OBJECTIVE
The user Emma Heffron visits the CRA website to understand and apply for childcare benefits since she has recently become a single mother and needs financial assistance from the government.
She visits the CRA homepage>clicks Child and family benefits>Canada child benefit>Apply>How to apply>My Account page>Sign-in options
4
5
DEFINED USER PATH
The most ideal and common user path was defined and most users took the same path during guerrilla testing, too.
However, some users, especially the new users might spend some time reading through the content to better understand the process of applying for Child care benefit.
6
HEURISTIC EVALUATION
Flexibility and Efficiency of use
Clicking on logo, takes you to main homepage, makes interaction faster
Recognition rather than Recall
Search button|Menu|Breadcrumbs| clicked links have a different color
Consistency and Standards
The website and inside web pages have consistent design patterns
White space is good
Error prevention- Bold fonts highlight important information for users
Good documentation to differentiate between clicked and unclicked links
Visibility of System Status
Too many sub-links and sub-sections may confuse users
Too much text increases time to read
No Login on this page to jump to next step
No infographics/images to engage
7
COLOR ACCESSIBILITY TEST
Even though the design is AA compliant, the overall theme is not color blind safe.
8
GUERRILLA TESTING
Objective
To understand the difficulty level when navigating through and applying for Canada Child Care Benefit
Task: To apply for Canada Child Care Benefits through the CRA Website- https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview.html
Observe the User Path: What parts of the website/links user clicks on to successfully apply for Canada Child Benefit
Questions:
GUERRILLA TESTING RESULTS
9
PRIORITY MATRIX
10
11
HEURISTIC EVALUATION - Canada Child Care Benefit Homepage
12
HEURISTIC EVALUATION WEBPAGE 2
13
HEURISTIC EVALUATION WEBPAGE 3
14
HEURISTIC EVALUATION WEBPAGE 4
15
HEURISTIC EVALUATION WEBPAGE 5
INVISION MOODBOARD
16
UI Samples and Inspiration
UI Patterns
Government Agency Inspiration
INFORMATION ARCHITECTURE
17
Homework 10
18
Redlining and Annotation
The Canada Revenue Agency has no primary navigation, just links to services. Users reported that website is text heavy and too much information is overwhelming sometimes. Also, since some important services were going below the fold, so we added global navigation and moved some content there. Also, put important services in Primary Navigation.
19
CRA NAVIGATION USABILITY TEST
KEY FINDINGS
CARD SORTING - Step 1: All the Cards
20
CARD SORTING - Step 2: How Users Put in Categories
21
CARD SORTING: Step 3: Final Result
22
CRA SITEMAP REDESIGN
23
CRA SITEMAP REDESIGN NAVIGATION PROTOTYPE
24
25
Active
Button state
Active
Button state
Mobile, Desktop Homepage - Header and Footer Navigation + Button States
26
CRA DESKTOP and MOBILE HOMEPAGE
POST ITERATION
27
CRA DESKTOP WIREFRAMES POST ITERATION
28
CRA MOBILE WIREFRAMES POST ITERATION
Homepage
Footer- Contact us
Primary Nav - Child and Family Benefits
Canada.ca homepage
Sign-in page
29
CLICKABLE PROTOTYPE MOBILE and DESKTOP
30
FIVE SECOND USER TEST
The users were shown the
Desktop homepage for 5 seconds and asked question later.
The test was conducted through Maze.
31
RESULTS FOR DESKTOP 5-SECOND USER TEST
32
5 SECOND USER TEST - MOBILE
The users were shown the
Mobile homepage for 5 seconds and asked question later.
The test was conducted through Usability Hub. View Results
33
UI STYLE TILE FOR CRA
34
VISUAL DESIGN - MOBILE and DESKTOP
35
RESPONSIVE DESIGN
36
STYLE GUIDE
37
RESPONSIVE WEB DESIGN
38
USABILITY TEST PLAN DASHBOARD
39
USABILITY TEST RESULTS
Heatmap
Clicks on Homepage
40
KEY INSIGHTS FROM USABILITY TESTS
41
HOMEPAGE POST ITERATION - BASED ON USER TESTS
Red icons changed to blue
Footer colour changed to blue
Increased the spacing on the right side between elements
42
MOBILE HOMEPAGE POST ITERATION - BASED ON USER TESTS
Red icons changed to blue since users felt red is more like a warning sign
The footer was changed to blue to match the icon color and stretched from edge to edge
The spacing between different elements and content sections was increased to look more organized and less cluttered.
43
STYLE GUIDE POST ITERATION
The style guide was updated to reflect the color change from Red To Blue and different button states were also updated along with the checkboxes.
44
HIGH FIDELITY CLICKABLE PROTOTYPE
45
Thank you