Your Next Station is a website that provides useful information to newcomers who are settling down their home in Canada
Project duration:
June 2022 to July 2022
The problem:
Newcomers have a difficult time finding information to learn more about the city.
The goal:
Design a responsive website that provides useful information and insights for a new immigrant to learn more about the city.
My role:
UX Designer designing the responsive website for new immigrants who want to learn more about the city.
Responsibilities:
Conducting interviews, paper, and digital wireframes, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User Research Summary
I had a conversation with many newcomer families on WhatsApp. They shared their immigration journey with me. I realize it would be useful to conduct interviews and create empathy maps to understand their needs. A primary user group identified through research was users who came to the city and would like to adapt to the local culture as soon as possible. They would like to have a “one-stop” resource to help them learn more about the city and local culture.
Users also confirmed they have difficulties finding information about the city, as the city is not a major city like Toronto and Vancouver. Time spent looking for information about services, education housing, and all other topics becomes longer and longer.
Pain Points
Most newcomers are busy looking for jobs, housing, and schools. They have limited time to find information.
There is no easy way to find services around.
Not everyone has reliable resources. Most newcomers got information through friends who are also new to the city, their information might not reliable.
Persona & Problem Statement
Vivian is a newcomer who holds a work permit and needs to find information to help her quickly settle down in the city because she would like to adapt to the local culture as soon as she can.
James is a new immigrant who wants to find reliable information to help him and his family settle down in the city because he has no idea where to seek help as he has no friends and family in the city.
Competitive Audit
I went through the internet to find my direct and indirect competitors. And conduct a competitive audit to get a better understanding of what my competitors do well. Also finding market gaps to improve my product development to meet the users’ needs and expectations.
Ideation
I did an ideation exercise to generate ideas for how to address the gaps identified in the audit. My focus is on how to organize the information to provide a streamlined process to help users complete their tasks easier.
Digital Wireframes
After the ideation session, and drafting a couple of paper wireframes, I created the initial digital wireframe for the web app. The overall design focused on the streamlined user experience that helps users find information easier.
Low-fidelity prototype
In order to prepare for usability testing, I created a low-fidelity prototype that connects the main user flow of looking for housing and entertainment information.
Usability Study: Parameters
Study type:
Unmoderated usability study
Participants:
5 Participants
Location:
Calgary, remote
Length:
30-60 minutes
Usability Study: Findings
There were the main findings uncovered by the usability study:
1. Go back to the previous page: Users want to have an option to go back to the previous page
2. Hint to switch: Users need a clear hint on how to switch from page to page
3. Way to access the blog: Users want to have multiple ways to access blog posts
Mockups
Based on the insights from the usability studies, I added a button to provide an additional way to access the blog. And a button that allows users to go back to the home page.
Another design change I made is to allow users to have enough hints to play and stop/exit the video
Key Mockups (Mobile site)
High-fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including changes that were made on the mock-up after the usability study.
View the Mobile High-fidelity Prototype
Accessibility Considerations
1. Font sizes should be large to be readable. Foreground and background colors have sufficient contrast that meets the
WCAG 2.2 color ratio
WCAG 2.2 color ratio
2. Alt text of the infographic might need to be the focus when making the web app accessible for the audio reader
Sitemap
Now the web app design is completed, my next phase is the responsive desktop website. Information architecture is one of the important elements to help guide users to complete their tasks
Responsive Design
The designs for screen size variation included mobile, tablet, and desktop. I optimized the design to fit the spec of the screen while following the guideline of WCAG 2.2.
Takeaways
Impact
The web app helps many newcomers to learn more about the city. Provide information for them to adapt to local culture and settle down in the city.
What I Learned
Usability studies and user feedbacks have huge impacts on moving the project in an unexpected direction. Especially, when taking accessibility compliance into account.
Next Steps
1. Conduct 1 round of usability studies to see if the pain points users experienced have been resolved
2. Conduct another two rounds of usability studies to see if there are opportunities to introduce the website in a different language