Findprogram is a website that helps international students find their best-fit programs.
UX UI design
THE CHALLENGE - UNDERSTAND MY GOAL
Share of internationally mobile post-secondary students among leading study destinations, 2000 (left) and 2017 (right). Source: ICEF Monitor
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.
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
Quantitative data from my survey: What is happening
of international students spend a huge amount of money on agencies for applying for universities.
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.
· 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.
Lack of non-basic information
2. Then I wanted to see if they had any problems when finding basic information.
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.
After I've observed and interviewed my users, I used those data to create a user journey.
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.
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
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.
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
I can easily find basic information.
Task success rate
Task completion time
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.
Browse program basic information
Previous IA for search: Four levels of the site hierarchy
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.
Previous IA for search: Three levels of the site hierarchy
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.
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?
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.
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.
I can be well- informed about non-basic information
HMW help users feel more informed to do self-positioning?
DESIGN DECISION 5
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.
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.
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.
Explore other work
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.
Shipped the design of becoming a member, creating a new user flow and solution.