Yixuan's Portfolio

IDP WEBSITE REVAMP

IDP
WEBSITE
REVAMP

This case study shares my experience contributing to a large-scale global website revamp project while working for IDP - a leader in international education.

Client

IDP Education helps international students study and relocate abroad through a global network of over 190 offices in 35 countries and 2,200 counsellors.

My Role

As the UX/UI Designer, I turned research insights into design solutions, crafted user flows and wireframes, refined UI elements, and built interactive prototypes, validated design decisions through testing. I collaborated closely with stakeholders and developers, supporting development sprints to deliver a successful website MVP launch.

Skills

User Flows, Wire-framing, A/B Testing, Interactive Prototyping, Responsive Layout (Desktop & Mobile), Design System, Visual Design, Agile Methodology, Cross-functional Team Collaboration

Timeline

Q4 2022 - Q4 2023

The challenge & Approach

Key experience & usability issues identified:

• Lack of clear information hierarchy and intuitive navigation

• Heavy enquiry form placed upfront on each page

• Excessive CTAs creating decision overload

• No compelling value proposition for signing in

• Outdated, inconsistent UI across 34 regional sites

• Not optimised for mobile, despite 80% of traffic

Approach to addressing these:

• Align navigation with the user journey to support a step-by-step experience

• Move enquiry forms to the page bottom with a visible cursor

• Redesign key pages with a clear info and action hierarchy

• Build a useful personal dashboard for user to view and manage their progress

• Update the design system and build modular, reusable components

• Adopted a mobile-first design strategy

• Align navigation with the user journey to support a step-by-step experience

• Move enquiry forms to the page bottom with a visible cursor

• Redesign key pages with a clear info and action hierarchy

• Build a useful personal dashboard for user to view and manage their progress

• Update the design system and build modular, reusable components

• Adopted a mobile-first design strategy

SITE navigation

Based on research insights and defined study abroad journey stages, I collaborated with the Content team on card sorting and regrouping nav items to create a new site navigation that better aligns with user goals. At the same time, I mapped a hero task flow to demonstrate how a new user can discover, shortlist, sign up, and ultimately reach out to apply for a course within the updated site structure.

Mid-fidelity

Wireframes for all MVP pages were created to validate development feasibility, ensure required functionality, and align with user journey. Selected examples shown:

New design system

Building on the UI uplift, I refined the design system for accessibility, responsive layouts, and modular components, working closely with developers to establish clear guidelines.

1) Homepage

• Restructured navigation menu

• Prominent search panel enabling quick and easy content discovery

• Added “Study abroad steps” to clarify the end-to-end journey

• Moved the enquiry form to the bottom with a persistent “Contact us” entry

• Restructured navigation menu

• Prominent search panel enabling quick and easy content discovery

• Added “Study abroad steps” to clarify the end-to-end journey

• Moved the enquiry form to the bottom with a persistent “Contact us” entry

↓ Click to view the legacy screen

2) Listing pages

• Consistent page layout across Courses, Universities, Scholarships, Subjects, and Events listing pages

• Filter panel with shortcut buttons for more efficient filtering

• Redesigned card components to present key info clearly

• Mid-point pagination optimised for mobile interaction

• Consistent page layout across Courses, Universities, Scholarships, Subjects, and Events listing pages

• Filter panel with shortcut buttons for more efficient filtering

• Redesigned card components to present key info clearly

• Mid-point pagination optimised for mobile interaction

↓ Click to view the legacy screen

3) Detail pages

• Consistent page layout across Courses, Universities, Scholarships, Subjects, and Events listing pages

• Structured content in a clear hierarchy for easy scanning

• Optimised button placement to reduce clutter and drive lead generation

• Integrated next-best actions to make personalised suggestions

• Consistent page layout across Courses, Universities, Scholarships, Subjects, and Events listing pages

• Structured content in a clear hierarchy for easy scanning

• Optimised button placement to reduce clutter and drive lead generation

• Integrated next-best actions to make personalised suggestions

↓ Click to view the legacy screen

4) Journey stages

• Added a collapsible journey stage bar linking to dedicated stage landing pages for better understanding of each step of the process

• The journey bar only displays on key content pages to reduce visual clutter

• New stage landing pages provide step-by-step guidance, relevant information, and support tools for each stage of the study abroad journey

• Added a collapsible journey stage bar linking to dedicated stage landing pages for better understanding of each step of the process

• The journey bar only displays on key content pages to reduce visual clutter

• New stage landing pages provide step-by-step guidance, relevant information, and support tools for each stage of the study abroad journey

4) User dashboard

• Introduced a gamified onboarding flow with five preference questions to signpost user journey stage and surface personalised content

• Launched a user dashboard to enhance the signed-in experience, enabling profile management, shortlists, events, and other linked services

• Introduced a gamified onboarding flow with five preference questions to signpost user journey stage and surface personalised content

• Launched a user dashboard to enhance the signed-in experience, enabling profile management, shortlists, events, and other linked services

learnings

This project gave me hands-on experience owning a large-scale design project from early wireframes through to final delivery. As a global platform supporting multiple products and use cases, it required close collaboration across regional and adjacent product teams, working with diverse stakeholders to balance competing priorities and make considered design decisions. I also strengthened my design system practice by defining reusable components, variants, and consistent rules to streamline collaboration with developers and support scalable design.

• More Work

View all