top of page
ISC1 (1)_edited.jpg

Indigenous Canada Service Redesign Project

Role: UI/UX designer 
Duration: 5 weeks (2022 March- April)
Tools: Xd, Figma, Miro, Trello, UXtweak, 

Overview

UX design

  • User research 

  • Redlining+Heuristic Evaluation 

  • Persona

  • Usability test

  • Open&Closed card sorting 

  • 5-second test

  • Feature prioritization 

UI design

  • Wireframing 

  • prototyping 

  • Moodboard

  • Story Tile + Story Guide

  • RWD Breakpoints Set Up

  • Iteration

Indigenous Canada Service was designed to Indigenous Services Canada (ISC) engages with allies to enhance First Nations, Inuit, and Métis access to the greatest resources. However, I observed that the current website does not deliver clear information. Users always struggle to find their destination due to the complicated navigation.

The Problem

Users become dissatisfied and waste a lot of time seeking for information due to the poorly organized navigation system and the lack of visual graphics.  😫⌚️

The solution

A solution is to redesign the website to make more accessible for users who need.  💡

Construct a logical and visually appealing method to assist ISC in developing a new website version and redesigning the navigation system using information architecture skills to improve user interaction with the organization.

  1. Reorganized the primary and secondary navigation, utilizing the mega drop-down menu to make the navigation bar more user-friendly. 
  2. Instead of using a solely text website layout, we used graphics to draw users' interest.
  3. Users can immediately find "Learn about" and explore social media through well-organized footer and header.
  4. The navigation bar was carefully chosen to make it easy for people to find what they're looking for.
  5. Emphasize our most recent news under the ISC explanation to present users with the most up-to-date information.

User Path - Understanding the problem

Proto Persona

Created the proto persona to understand better using the website experience. Her goals and pain points were made based on the experience of ISC.

User Persona.png

User Scenario

Emily is a history teacher who is always striving to learn more about the world around her and positively impact her community and environment. She has recently become more aware of Indigenous issues in Canada and is appalled by the persecution they face. Emily wants to discover the true history of Indigenous communities in Canada and find out what she can do to support Indigenous causes.

Frame 1 (2).png
Frame 2.png
Colour Accessaibility

Learning the colours that ISC website uses. Since the background is white colour the text and link colours are successfully approved.

ISC COLOUR ACCESSIBILITY ASSESSMENT.png
User Testing

I completed 5 tasks. 5 people took part in an open-ended usability test. Observing and recording each participant's actions and experiences. In addition, participants shared their thoughts on the ISC website. Transform the test notes into an affinity diagram and a feature prioritization matrix using the test notes. Assist in articulating the most important usability issues. To comprehend the challenges of navigating and applying for Indigenous Service Canada.To examine what portions of the website/links would users need to click on to join for Indigenous Service Canada.

Objective: 

To obtain the authentic information of Indigenous community in accessible/ inclusive approach for every users. 

Tasks: 

1.  Task 1: Apply for Indian Status using the search bar

2. Task 2: Find out how many water advisories exist today 

3. Task 3:  Discover what is about the Jordan's principle 

4. Task 4:  Find out HOW to apply for First Nations housing

5. Task 5: Identify how Canada is working towards reconciliation

Affinity Diagram 
W12.1.jpg
Feature Prioritization
ISC.jpg

How might we improve the user experience of the ISC website?

So that our users may find the website they're looking for with simplicity due to an effective navigation system.

How might we improve the website's typography and layout?

So that our users' success is dependent on information that is easily comprehended and has a high level of readability and simplicity.

Navigating the challenges around the skeleton's development.

Heuristic Evaluation

To articulate the present challenge of accessibility and UI patterns, use redlining and annotation. Most notably, as much as feasible, identify the ISC website's usability flaw so that engagement productivity may be enhanced by rebuilding properly.

heuristic annotations-1.png
heuristic annotations-4.png
heuristic annotations-3.png
heuristic annotations-5.png
heuristic annotations-2.png
Card sorting

To find the most effective navigation classifying approach for primary, secondary, and tertiary navigation, I conducted open card sorting on Maze and close card sorting on UXtweak. To overcome the problem of too many topics on the primary, open card sorting is used to recategorize present primary navigation. The current primary categories became secondary after open card sorting, while the original secondary categories became tertiary. Closed card sorting ensures that the present secondary navigation is fully understandable. Following my research, I may decide to transfer some secondary categories into different major navigation. There are ten people in each card sorting approach. As a result of evaluating the test data, a sitemap was created.

Sitemap
Site map.png

Define the aesthetic of the project, as well as the prototyping

Moodboard
ISC_moodboard.png
Lo-fi wireframe
Lofi.png
Mid-fi wireframe
Midfi.png

Iterating phase

Five second test

Take notes on the users' insights and challenges, then analyze them. Assess the homepage's functionality. To learn about the homepage and navigation of the ISC's redesigned website, as well as the visual focal points of users. When users search for a target destination on the internet, seek for their pain points.

Screen Shot 2022-03-18 at 11.10.03 AM.png
First improvement 

The font size of title on the left wireframe is slightly too small to read. As a tester mentioned during the usability test, some users are lazy to read if the words are too small to read. This will allow users to understand what this page is about. 

Desktop Environment.png
Desktop Environment (1).png
Usability test notes

Opinions: 

  • It can be hard 

  • Indigenous info should be under the menu bar

  • Menu bar defines irrelevant info to Indigenous service 

  • Search bar on the top not necessarily to be useful 

  • Indigenous info should be under the navigation bar 

  • Share the page shouldn’t be scroll down, should be the top 

  • Indigenous info should easily accessible

Iteration 

Home navigation page system
Desktop - header & top nav.png
Desktop Nav header
Desktop Nav footer
Desktop - footer.png
mobile - header& menue bar.png
Mobile Nav header
Desktop side menu bar
program sidemenu.png
Mobile Nav footer
Mobile- footer.png
Mobile side menu bar
mobie_side menu.png
UI style tile
ISC_UI style tile.png
Style Guide ISC.png
UI style guide

Final phase

Desktop and mobile home page
Final mobile.png
Final desktop.png
Final thoughts

Overall

In many ways, this government agency redesign project was onerous. When I first visited the ISC website, there were too many paragraphs and not enough visual representations. As a result, unless you looked closely at the website, it was difficult to get a sense of what it was about. However, even if you read carefully, some terminology were difficult to comprehend; as a result, I considered that graphic design and/or visual imagery could assist users in better understanding.

New Perspectives 

During the usability testing, I learned a lot of new things from the participants that I wouldn't have known otherwise. For example, broken links or alignments should be fixed, word spacing should be adjusted, and typography should be consistent, among other things.

Next Step

Throughout the project, I made it a point to pay close attention to other people's points of view. All users, especially those who require access, should be able to access the government agency's website. I learned new Figma and Adobe Xd abilities, as well as putting what I learned in class into practise such as smart animation. These procedures piqued my interest in learning new talents in more depth.

bottom of page