WorldGates
A responsive web design
Background
WorldGates (WG) is an online immigration and education service provider that helps people learn about different immigration processes and apply for themselves. WorldGates provides legal consultations, comprehensive online training, and video guides on various categories, including study and work permits, visas, and permanent resident applications.
Currently, the developing team is working to apply the design to the website.
Role
As a UX designer, I was responsible for:
-
Designing a new website from start to finish for Word Gates, a platform for international students seeking college admissions, visas, or study permits.
-
Applying a user-centred design approach in creating low and high-fidelity, interactive and responsive prototypes
-
Incorporating research into fully functional prototypes
-
Developing design systems and original UI mockups
-
Delivering effective visual annotations and functional specifications for development handoff
-
Collaborating with the team members, preparing and presenting rough drafts
Responsibilities
-
UX / UI (interaction) design
-
Creating a UX strategy
-
Visual design
-
Creating user journeys, personas and storyboards
-
Creating user flows
-
Creating wireframes
-
Creating lo-if to high-fi prototype
-
Developing design systems
Links
Duration
Feb - May 2022
4 months
Team
-
1 Project Manager
-
1 Designer (me)
-
4 Developers
Design Challenge
The main goal of WG is to successfully guide individuals through their immigration application process by giving them autonomy and confidence to understand their process and submit their applications at their own pace. Application processes are often complicated and confusing. The challenge was to design a one-stop-shop platform for individuals who are applying for colleges and study permits in Canada and support them every step of the way by providing them with online training material, a step-by-step process, and consultation with a legal team at WorldGates.
Problem Statement: How might we design an online solution to guide international students through the academic application process in Canada?
Process
Product highlights
Progress bar and step-by-step instructions
To streamline the time-consuming and demanding immigration application process, I divided it into smaller and manageable milestones. This approach helps users stay motivated and track their progress using a progress bar, making the goal more achievable.
Chat with legal consultants
Filling out applications can be challenging due to complex instructions, leading to confusion. To address this, in this design, we provide an intuitive chat feature that connects users with legal consultants, offering guidance and support throughout the process. This ensures that users receive help at every step and feel supported.
Badges
Incentivizing key parts of the experience encourages users to stay committed to their goals. Therefore, I gamified the process to motivate users to complete their applications and refer others through the concept of badges. Receiving 4 badges will ultimately add up to a reward (provided by the business team.)
FAQs and additional resources
Users can access a large set of FAQs and common scenarios that they may face throughout their application process. For easy navigation, questions and answers are categorized into different topics. Users can further search and filter to find relevant topics.
Ideation
For two weeks, I partnered with the product manager to ideate concepts that address the key use cases.
01
To address confusion about eligibility and requirements in applications, I designed the system to provide personalized recommendations and feedback based on user information. This feedback is enhanced with visual cues like color and icons for better clarity and visibility.
Personalization
02
Immigration applications significantly impact individuals, so they seek reassurance from a trusted company. To build trust, I created a testimonial page for users to share their experiences with WorldGate through both audio messages and written reviews. This dual option enhances user control and provides a more personal touch.
User Reviews
User Flow
Before prototyping, I structured the user journey into a flow chart starting from the signup page. Focusing on three main actions, a study guide for a Study Permit, College application submission and immigration consultation.
Lo-fi Prototype
The dashboard consists of a welcome message as well as a welcome video. Users can see what they have in process and they can continue their journey. More options are offered at the bottom of the page.
The video is presented at the centre of the page. Users can see how many videos there are for their training from the horizontal row on the bottom of the page.
Users can view their meetings from a calendar. The list of their meetings with WorldGate's consultants is presented on the bottom of the page.
The dashboard consists of a welcome message as well as a welcome video. Users can see what they have in process and they can continue their journey. More options are offered at the bottom of the page.
Design Iteration
In the initial dashboard design, I included a vertical menu that could be minimized to icons, aimed at maximizing space for page content. However, future iterations revealed that this feature complicated the interface and caused distractions. Consequently, I removed the minimization option and opted for a static vertical menu to simplify the design.
Visual Identity
Moodboard
I opted for a clean, simple, and goal-oriented design for the website, drawing inspiration from the organized layout of a library for the FAQ page. Recognizing that college applications can be stressful, I chose blue as the primary color to evoke a sense of calm and serenity. Complementing blue with orange, which creates a striking contrast, helps highlight important messages and notifications. This color scheme is often used in educational settings, aligning with the project's focus.
Design System
Accessability
To test that the colours are well distinguishable for people with colour blindness, I ran a test with the "Color Blind" plugin and reviewed 8 frames of the dashboard page from a view point of people with 8 different types of colour blindness.
Reflection
The product owners of WorldGates were thoroughly satisfied with the results. They tested the platform and told me that the new platform will give their users a sense of trust and guidance at every step of the application process.
In this project, I was able to leverage my background in cognitive systems and psychology to create an easy-to-use platform with a straightforward process. I learned a lot from being in close contact with the developers, getting to know about their technical limitations and finding the best solution to overcome them.
.png)