UI/UX Design

Graphic Design

Immigrant Youth Centre Website Redesign

Immigrant Youth Centre Website Redesign

UX/UI Design

Timeline: 3 weeks

Immigration and acceptance of new people is part of Canada’s identity. Canada is a mosaic country that encourages ethnic groups of all kinds to maintain their distinct cultural roots and values. Our team is looking to redesign the Immigrant Youth Centre website for easier use and understanding for both immigrant youths and immigrant parents, allowing them to enrol in programs built to connect foreigners of similar backgrounds to help their adjustment into Canada. These programs also offer many activities that could help build friendships, build their confidence, and be successful in a new environment.

Directory

Problem Statement | Objectives & Goals | User Interviews | Website Heuristic Evaluation

Empathy Map | Pain Points | User Insight | User Story

  • Task Flow Chart

  • User Flow Chart

  • Site Map

  • Website Redesign Process - Mobile (Mid-Fidelity Wireframes, User Testing Feedback, High-Fidelity Prototype)

  • Website Redesign - Desktop (High-Fidelity Prototype)

  • Website Redesign Process (Mobile) (Mid-Fidelity Wireframes

Tools Used

Group Members + Roles

Adam Lee


Project Manager

UI Designer

Karine

Zahabi


UX Designer

Javad Hakimpanah


UX Designer

Kathy (Ke)

Yan


UX Researcher

Hua Tong


UX Researcher

Part 1: Discover

Part 1: Discover

Problem Statement

Immigrant youths and parents in Canada struggle to find and trust the educational and social support programs on the Immigrant Youth Centre website. We need to improve the communication of program information, build organization credibility, and increase enrolment.

Objectives & Goals

To increase program enrolment and user return, and for users to have more trust in the organization.

User Interviews

Aside from interviewing the staff, we conducted 25 online surveys and 5 in-person interviews. Through interviewing both immigrant youths and their parents on their pain points with the current website, they said that it was: confusing, unorganized, and cluttered.

Kevin

Program Manager

“We get calls from users inquiring about information that is on the website so we know they are not successfully getting to the details they need”

Yifei

Youth Worker

“Often times, users need to view the content in their native language and shy away from registration because of that blocker.”

Website Heuristic Evaluation
(Desktop)

View IYC Website

Current IYC Website

Part 2: Define

Part 2: Define

Empathy Map

Says

"I want to find information in my first language."

"I want to have the ability change website language."

"I want to find programs that best work with my schedule (or kids’ schedules)"



Says

"I want to find information in my first language."

"I want to have the ability change website language."

"I want to find programs that best work with my schedule (or kids’ schedules)"

Thinks

"The layout is so primitive and old"

"Why are the pages sliding in when I press the navigation menu?"

"Why the Nav buttons are italic and the font so small?"

"Where am I in the site again? I’m lost. How do I get back?"

"There is too much text on display."

Thinks

"The layout is so primitive and old"

"Why are the pages sliding in when I press the navigation menu?"

"Why the Nav buttons are italic and the font so small?"

"Where am I in the site again? I’m lost. How do I get back?"

"There is too much text on display."

Does

Finds which location works best for her.

Starts following them on Twitter, YouTube and Instagram.

Compares programs to see what suits her needs best (or her kids’ needs if she is looking to book for them)


Does

Finds which location works best for her.

Starts following them on Twitter, YouTube and Instagram.

Compares programs to see what suits her needs best (or her kids’ needs if she is looking to book for them)

Feels

Confused when navigating through the website.

Frustrated by the slow speed of the response of the navigation and other inconsistencies, the small text on the images of the programs, and when trying to reach the website using mobile phone.



Feels

Confused when navigating through the website.

Frustrated by the slow speed of the response of the navigation and other inconsistencies, the small text on the images of the programs, and when trying to reach the website using mobile phone.


Feels

Confused when navigating through the website.

Frustrated by the slow speed of the response of the navigation and other inconsistencies, the small text on the images of the programs, and when trying to reach the website using mobile phone.

Pain Points

  • Websites has little info and I often enrol in programs I dislike

  • Challenging to find open spots in some programs

  • Finding organizations that could assist and support newcomers was not easy

  • Online Community was great, but needed more in-person program

Pain Points

  • Websites has little info and I often enrol in programs I dislike

  • Challenging to find open spots in some programs

  • Finding organizations that could assist and support newcomers was not easy

  • Online Community was great, but needed more in-person program

77%

Short-term goals in
seeking out immigrant youth services Improving Language Skill

77%

Short-term goals in
seeking out immigrant youth services Improving Language Skill

72%

Motivation  to seek out services for their children to Achieve Social and Education Goal

72%

Motivation  to seek out services for their children to Achieve Social and Education Goal

86%

of the surveyed are 
Caregivers and Parents

86%

of the surveyed are 
Caregivers and Parents

User Insight

Immigrant youths and parents, having limited knowledge of the local language and customs, need to feel confident that the programs and resources they seek are credible and beneficial to their success in adapting to Canadian life. They need reassurance that these services will be effective in helping them with their specific needs and that they will be supported throughout the process.

Immigrant youths and parents, having limited knowledge of the local language and customs, need to feel confident that the programs and resources they seek are credible and beneficial to their success in adapting to Canadian life. They need reassurance that these services will be effective in helping them with their specific needs and that they will be supported throughout the process.

User Story

Story


Terri and her family (two children and a husband) immigrated to Canada several months ago. She feels her two young children (ages 9 and 13) are having difficulties adjusting to Canadian life. She hopes her children can meet friends, be taught English, and be in an environment where they can practice their English without judgement. She seeks to enroll her children into programs geared towards immigrant youths, but she’s facing problem on choosing organizations that are both credible and beneficial.

Story

Terri and her family (two children and a husband) immigrated to Canada several months ago. She feels her two young children (ages 9 and 13) are having difficulties adjusting to Canadian life. She hopes her children can meet friends, be taught English, and be in an environment where they can practice their English without judgement. She seeks to enroll her children into programs geared towards immigrant youths, but she’s facing problem on choosing organizations that are both credible and beneficial.

Age: 40


Gender: Female


Occupation: Accountant


Interests: Golf, Reality TV, Road Trips, Gardening

Age: 40

Gender: Female

Occupation: Accountant

Interests: Golf, Reality TV, Road Trips, Gardening

Goals & Motivation


  • Having her and her family be part of a community

  • Her children making new friends

  • Her children practicing English without judgement

  • Explore extracurricular activities

Goals & Motivation


  • Having her and her family be part of a community

  • Her children making new friends

  • Her children practicing English without judgement

  • Explore extracurricular activities

Pain Points


  • Challenge is the quality of the programs sometimes varies

  • Goal is to adapt the culture better

  • Challenging to find open spots in some programs

Pain Points

  • Challenge is the quality of the programs sometimes varies

  • Goal is to adapt the culture better

  • Challenging to find open spots in some programs

Part 3: Develop

Part 3: Develop

With the data collect, we brainstormed ideas and after some iterations we created a Task Flow and User Flow. Because there currently isn't a mobile version, we placed more focus on mobile, and then desktop.

With the data collect, we brainstormed ideas and after some iterations we created a Task Flow and User Flow. Because there currently isn't a mobile version, we placed more focus on mobile, and then desktop.

Task Flow Chart

Task Flow Chart

User Flow Chart

User Flow Chart

Site Map

Site Map

Part 4: Design

Part 4: Design

Website Redesign Process
(Mobile)

Website Redesign Process
(Mobile)

Mid-Fidelity Wireframes

Home Screen

Home Screen

Programs

Programs

Filters

Filters

Confirmation

Confirmation

User Testing Feedback

User Testing Feedback

More detailed filters such as: age range, locations, and dates

Adjusted button sizes and other input fields for better usability

A more logical user flow and input fields

High-Fidelity Prototype

Homepage, Menu & Settings

Program Search, Filters & Enrolment (Mobile)

Confirmation, Calendar, Text & Email Follow-up (Mobile)

View Figma Prototype (Mobile)

Website Redesign
(Desktop)

Website Redesign
(Desktop)

View Figma Prototype (Desktop)

View Figma Prototype (Desktop)

The Team

© 2024 ADAM LEE