landing_page_half4x.jpg
review.jpg
My role

 

Findprogram is a website that helps international students find their best-fit programs.
Duration

UX UI design

Design strategy

User research

One month 

Scope

Design Thinking

Problem framing 

Concept Ideation

Prototyping

Interaction Design

User testing

 

THE CHALLENGE - UNDERSTAND MY GOAL

Picture1.png
Share of internationally mobile post-secondary students among leading study destinations, 2000 (left) and 2017 (right). Source: ICEF Monitor

CURRENT SITUATION

The market of international students has grown dramatically through this decade. This astounding growth has occurred in the context of an increasingly globalized world in which economies are closely tied to others within their region and beyond. Students dream about being accepted by their dream school, but they don't always apply for schools effortlessly. My assumption is simple: a large number of international students apply to the school every year, but not all of them can succeed.

GOAL

My goal for this project was to build a product that minimizes the effort to apply to schools. It would also help students spend more time on other works like English test preparation to become more competitive for their university application.

UNDERSTAND THE USER

Up-front Research

Quantitative data from my survey: What is happening

80%

of international students spend a huge amount of money on agencies for applying for universities.

90%

of international students find it difficult to choose universities and programs.

Qualitative data from interviews and observations: Why it is happening 

In the beginning, I didn't have specific goals so I decided to use the basic research method, user interviews, to fulfill my research needs. Because it allows me to ask specific questions, while remaining open to exploring the participants' points of view. 

Key takeaways

· Users' priorities when applying for universities
· Users' needs when choosing universities
· Why users use agencies

1. When understanding their priorities, I found one of the challenges they faced, which made them really frustrated and self-doubt.

Finding:

  • Lack of non-basic information

Web 1920 – 3.png

2. Then I wanted to see if they had any problems when finding basic information.

Takeaways:

  • Observed them performing some tasks on university websites.

  • Found that this process is super time-consuming and overwhelming.

  • Sometimes they had to use google search to complete the tasks.

Web 1920 – 4.png

User Journey

After I've observed and interviewed my users, I used those data to create a user journey.

Goals: 

  • See where the problems are and extract the users' pain points. 

  • Find if there is a trigger event that causes their needs

  • Find what emotions they experienced

  • Leverage these data to help me dig deeper into "how users could achieve their needs" later on.

Web 1920 – 2k.png
KEY FINDINGS 
PAIN POINTS​
USER GOALS
  • Lack of non-basic information for self-position 
Challenging to get non-basic information
I can be well-informed about non-basic information
  • Time-consuming to collect basic information
Get lost and spend much time on university websites
I can easily find basic information 

Define

Deeper insight from the interviews- About "Emotional Value"
"Having agencies at my back, I feel secure, certain, and free from anxiety."
Applying to schools is risky and fraught with uncertainty, which will make users choose agencies that look more professional. Because the agency provides psychological comfort and "emotional value" to users.
"Although I can find some information I wanted, I always felt that the agency could give me more. But it turned out it doesn't."
I found that many students were not satisfied with agencies. At the end of the day, they found that the agency provided some misguided information and didn't help a lot, and charged a large amount of money. 
What my solution does not address
I didn't expect to find that students use agencies because they can provide “emotional value" for students. Then I started to think about the scope of this project. I decided that my solution should not focus on "emotional value." Because this emotional value both includes positive feelings and negative ones. I want my solution to be the least risky although it may not that attractive from a business perspective.
Reframing problem
After defining the constraint, I started to reframe the problem by asking myself "what does my solution can address?"
International students find it difficult to get basic and non-basic information. It may lead to an undesirable application result and more cost of money and time.

How I got there

USER GOAL#1
I can easily find basic information.
METRICS
  • Task success rate
  • Task completion time
DESIGN CHALLENGE#1
HMW make this activity easy, fast and effortless?

DESIGN DECISION 1

Keep distances short

  • Keep the fewest clicks to get from the home page to the information page. So I decided to make the site structure as flat as possible and minimize the levels of the site hierarchy.

  • After two iterations, there are just two levels of the site hierarchy: search and information page.
  • Decided to present this information page with a Two-panel selector design pattern. Because it shows the item details right next to the list. 
  • This pattern can browse information efficiently and everything is visible at once. It reduces click effort and the user's eyes don't need to travel a long distance between the windows.
detail6x_.jpg
Browse program basic information 
Choose disciplines
Previous Iterations#1
44.jpg
Previous IA for search: Four levels of the site hierarchy 
Business – 2.png
Homepage – 2.png
Programpage.png
Search or explore programs
Choose different disciplines
Browse program detail page
Browse  program overview page
Card pattern for browsing information: 80% of users think this design is still time-consuming. Because they have to open lots of tabs to find basic information, which is the same with university websites.
Homepage1.png
Previous Iterations#2
55.jpg
Previous IA for search: Three levels of the site hierarchy 
Homepage #2.png
Business – 2.png
Commerce – 2.png
Choose different disciplines
Browse program information page with details
Search or explore programs

DESIGN DECISION 2: DETAILED DESIGN

Filter: Horizontal bars vs Sidebars

The filter is a must to get what users want effectively based on their needs. I tried two design patterns for the filter: left-hand vertical sidebar and horizontal bar. After studying the findings of the Baymard Institute that measures UX performance for e-commerce sites, I decided to go for the horizontal toolbar at the top. Because

  • horizontal bars can be available as the user scrolls.
  • when scrolling the sidebar panel, the center panel will scroll down as well when the filter list gets taller than the page.
detail3x___1.jpg

DESIGN DECISION 3

Home page pattern: Search and browse

When designing the home page, two design challenges emerged:

  • HMW design for both novice and experienced users?

  • HMW make this activity MORE effortless?

landing_page3x.jpg
Search
search.jpg
Search and browse patterns can provide two ways for both novice and experienced users to find items of interest effectively. Some frequent users will know what they want to look for and then use the search box, whereas other students might want to do more open-ended browsing.

So the search box needs to be easy to see and access. And browse cards needs to be equal weight to search. 
Browse
browse.jpg

DESIGN DECISION 4: INSTANT GRATIFICATION

Trade-off Decision: no registration in the first place

I decided to remove any unnecessary content on the home page to allow users to better focus and complete the task quickly. There is no registration process to distract them before they find program information, and they can have a successful experience within the first few seconds.

USER GOAL#2
I can be well- informed about non-basic information
METRICS
  • NPS
  • Engagement
DESIGN CHALLENGE#1
HMW help users feel more informed to do self-positioning?

DESIGN DECISION 5

Review&Data driven

I tried to generate a wide range of different ideas about helping users feel more informed to choose the best fit program and evaluate the probability of being accepted to college. Finally, I decided to use the "Review" feature. Users can see other former students' comments on programs and schools, and see their education and work background. If those former students' background is similar to you, you are more likely to be accepted that program as well. 

Safari 1920x1080.jpg
There is no such section to show the average admission information in the previous version. The admission requirements are usually different from the actual ones for people who are accepted to college. So this data can help users do positioning.
Previous version
review.jpg

Key takeaways

Trade-off decision making 

I found that there is always a trade-off when making decisions and there is no right solution. What I have to do is to prioritize every objective I want to achieve. For example, I believe the user goal is more important than the business goal when it comes to the registration process, so they don't need to register upfront. With that being said, users need to sign up when they need to use other services. But they will be more likely to do that because they just got instant gratification.

Rationale! Rationale! Rationale!

I found that there is always a rationale behind the decision, even a very detailed design. When I designed the filter, I learned the UX performance of filtering of 20+ E-commerce websites trying to find out why it works and why it doesn't.

UI design patterns

I learned a lot of patterns for different functions. In the beginning, I used cards because that is what I found on nearly every website; I used the search box at the top, the featured item below, but I don't know why. Now I know when to use them, how to use them, and why to use them. This really helps me come up with a better and secure solution.

Not end yet! Let's Connect!

Explore other work

Unauthenticated.png
5cb0633d80f2cf201a4c3253.png
RefreshedFailed.png
5cb0633d80f2cf201a4c3253.png

#UXUI #IA

Vaxicode: Vaccination Passport

MVP - Created an authenticated state of Vaxicode - The user can create an account, declare their rapid test results, and edit their account info.

design system_cover.png

#DESIGN SYSTEM

Design System for Health Portal

Created color theme, typography, reusable components, UI Patterns, and design documentation for our Quebec government projects.

#USER EXPERIENCE 

Coquo

Shipped the design of becoming a member, creating a new user flow and solution.

property_info___3.jpg
5cb0633d80f2cf201a4c3253.png
search_result.jpg
5cb0633d80f2cf201a4c3253.png

#MOTION DESIGN

Propamap

Shipped a contract project to help renters easily find the best places to rent and help landlords post ads effortlessly.