Overview

Context

Impact

Kickoff

context

Navigating dream to Canada.

Navigating dream to Canada.

Navigating dream to Canada.

Countless Canadian Institutions

Countless Canadian Institutions

By 2023, Canadian institutions hosted nearly as many international students as the US, despite a far smaller population. I was one of those dreamers and landed at Cornerstone College, a vibrant institution with students from over 86 countries.

Current Cornerstone College website

Fail to convey its value.

Fail to convey its value.

But soon, I realized that, "Cornerstone College's website, a crucial touchpoint for prospective students, was failing to convey its true value."

problem space

From surface to the core.

From surface to the core.

From surface to the core.

Initial usability issues from students.

Initial usability issues from students.

We gathered 21 international students' responses via a questionnaire in Vancouver to understand students' experiences with the official website. We also conducted competitor analysis and heuristic evaluation to gather more usability issues.

Poorinformation architecture

Disorganized hierarchy and unclear content structure make it difficult for users to navigate and distinguish between program options.

Unclear navigation

Critical information, like tuition fees, is buried in the footer, making it inaccessible and frustrating for users.

Weak content visibility

Excessive text overloads the website, hindering users from quickly scanning and finding key information.

Deeper motivations beyond usability​.

Deeper motivations beyond usability​.

Despite 40% of survey responses emphasizing the usability issues, students still chose to study here instead of dropping off the website.

This prompted the question:

What motivates them to apply to the school despite difficulties in finding important information?

Getting to the bottom of facts​​.

Getting to the bottom of facts​​.

To gather quick insights, I conducted guerrilla research with 5 students, uncovering why they applied and what they sought in their study experience.

Students' expectations of their study experience vary based on their reasons for coming to Canada.

research summary

Students' expectations of their study experience vary based on their reasons for coming to Canada.

Students' expectations of their study experience vary based on their reasons for coming to Canada.

Students' expectations of their study experience vary based on their reasons for coming to Canada.

Persona 1

Goal

Study aboard

pain point

Can't find class materials on the website.

Persona 2

Goal

Work in Canada

pain point

Can't find information about the school's career support on the website.

Persona 3

Goal

Experience life in Canada​

pain point

Wants to know more about the school's activities.

reframe the problem

How might we balance students' expectations with the college's business goals?

How might we balance students' expectations with the college's business goals?

How might we balance students' expectations with the college's business goals?

​​This deeper insight led to the question,​ "How might we balance students' expectations with the college's business goals?"

Students' expectations

  • Study & work aboard

  • Enjoy life & make friends in Canada

College business goals

  • Build reputation

  • Maintain operation

focused path

How do students discover and apply to their desired program?

How do students discover and apply to their desired program?

How do students discover and apply to their desired program?

With the how might we question in mind, we then started to define scope & MVP.

Define scope and MVP.

Given the limited timeframe, we aimed to maximize impact by focusing on the user flow: "how students discover and apply to their desired program."

Therefore, our MVP consists of redesigning navigation and 5 pages that represent the main user flow: Home page, Program page, UI/UX Design program page, Apply page, and About Us page.

north star principles

What it all guides to — the North Star principles.

Transparent

Transparent

Ensure clarity and completeness of critical information.

Ensure clarity and completeness of critical information.

Glanceable

Glanceable

Present key details for quick recognition.

Present key details for quick recognition.

Visible

Visible

Make content and actions easily discoverable.

Make content and actions easily discoverable.

information architecture problem

Start from clearing the clutter​

❌ Messy navigation structure.

Based on the insights learned from the questionnaire and heuristic evaluation, we found the navigation making users difficult to find information.

Collaborating with Chayanin Kosol and Miguel Valdes, we mapped out the sitemap and carefully audited the navigation structure and content organization.

Confusing hierarchy & order.

  • The dropdown items lack a clear categorization. Non-diplomas, diplomas, and advanced levels are mixed together without logical grouping.

  • The order of labels is neither alphabetical nor logically structured (e.g., based on type or level of the program).

  • The lack of separation between categories increases cognitive load, making it harder for users to scan and select a program.

Programs

Programs dropdown

Non-diploma

Diploma

Non-diploma

Non-diploma

Diploma

UI/UX Design
Specialist/Advanced

Digital Marketing
Specialist/Advanced

information architecture redesign

After — Clearer information architecture

After we mapped out the structural and visual navigation issues, we redesigned it to decrease users' cognitive load and make the information architecture clearer.

  • Decreased texts

  • Clear labels

  • Added new categories

my design focus

Design One, Apply to All

Each team member was responsible for designing a specific page. I focused on the UI/UX Design program page, to create a template that could be applied to other program pages as well.​

To begin, I conducted a thorough audit of each section of the existing page. Based on the insights gathered from our questionnaire, I made several iterations to enhance the design and usability. This iterative process ensured that the final design addressed the key issues identified by users and provided a cohesive, user-friendly experience.

Principle 1: transparent

Principle 1: transparent

Make crucial information transparent and accessible

Make crucial information transparent and accessible

Problem

Problem

A form at the top of each page promises a brochure via email, but users found it lacked new or detailed information, falling short of expectations.

A form at the top of each page promises a brochure via email, but users found it lacked new or detailed information, falling short of expectations.

solution

solution

Transparency is the key to building trust, so removed the form for getting the brochure.

Transparency is the key to building trust, so removed the form for getting the brochure.

Principle 2: glanceable

Principle 2: glanceable

Made information clear & glanceable

Made information clear & glanceable

Problem

Problem

There's no clear hierarchy for information, making users hard to understand and glance.

There's no clear hierarchy for information, making users hard to understand and glance.

solution

solution

The visualized information breaks up text, making the content appear less daunting and more glanceable.

The visualized information breaks up text, making the content appear less daunting and more glanceable.

solution 1

Tables break up text, making content less daunting and more glanceable.

Before

After

solution 2

Combine the two similar programs(pages) into a single page to reduce confusion and offer a clearer comparison.

Confusing page labels.

  1. Users struggle to differentiate between the two programs, requiring them to click into each page for details.

  2. Upon review, they notice only two differences and are unable to locate tuition information on the program pages.

Before

After

Principle 3: visible

Principle 3: visible

Highlight unique content:
Monthly activities, learning outcomes & career support

Highlight unique content:
Monthly activities, learning outcomes & career support

Problem

Problem

Students identified features that would attract them to apply, such as the college's monthly school activities, diverse program portfolios, and career support services. However, these valuable offerings are not effectively showcased on the website.

Students identified features that would attract them to apply, such as the college's monthly school activities, diverse program portfolios, and career support services. However, these valuable offerings are not effectively showcased on the website.

solution

solution

Highlight these key services on the website to better engage prospective students and demonstrate the college's unique value.

Highlight these key services on the website to better engage prospective students and demonstrate the college's unique value.

prototype

Interact with prototype

Interact with prototype

Interact with prototype

  • Design Process

We weren't simply redesigning; our ambition was to deliver the full value of the college within a tight timeframe of two weeks. Therefore, we employed a hybrid approach that combined the Double Diamond model and design thinking to address the redesign.

We weren't simply redesigning; our ambition was to deliver the full value of the college within a tight timeframe of two weeks. Therefore, we employed a hybrid approach that combined the Double Diamond model and design thinking to address the redesign.

Discover

Discover

Survey
Competitor analysis
Interviews

Define

Define

Problem statement
Personas
User journey map

Design

Design

Sitemap analysis
IA redesign
Wireframing
Design system

Hi-Fi Prototype

Test

Test

Usability test
Tree test

design system

thank you ♡

Thank you for scrolling down here.
If you enjoy what you have read, I'd love to share more details about the project during interview :)

Let's chat ☺︎

Reach out

Email

✴︎

© 2024 YiHsiu Shen. All rights reserved.✴︎

Let's chat ☺︎

Reach out

✴︎

© 2024 YiHsiu Shen. All rights reserved.✴︎

Let's chat ☺︎

Reach out

✴︎

© 2024 YiHsiu Shen. All rights reserved.✴︎