Project Overview
Beecoming is a two-way educational technology platform that bridges the gap between U.S institutions and international students.
The filter feature is inside the recruitment platform. It helps the user to screen the target students, and it is one of the features of the Student Funnel. Beecoming contains many student databases, a filtering system is a must. Filtering helps users to find valuable information in the large chunks of data tables, to improve the UX, and increase conversions.
Phase 1
In the early development stage, I researched which filter values are the most popular and most commonly used and found out that most of the products followed Hick’s Law.
Too much of a good can be bad for UX. Hick’s Law illustrates this point. It’s a law of psychology that applies to the web and interface design. It states that the more choice options there are, the more time it takes for a person to select one. That is, to increase conversion, it’s necessary to reduce the number of options.
Our goal at this stage is to develop the product on time. So considering the timeline and the source limit, I decided to keep a simple and clean overlay page for filters to satisfy the user's primary need. I built the catalog based on Graduate Management Education (GME) Admissions Reporting Standards 2020ver. It contains information that schools use to frame program profiles and make the student recruiting plans for the following year.
We made the very first catalog after the document. The catalog includes Test Scores (GRE, GMAT, TOFEL, IELTS, DUOLINGOS), GPA, Prefer Scholarship, Intended Major, STEM, Planned Degree, Work Aboard Experience, Study Aboard Experience, Current Geographic Location, Current Industry, Post Degree Desired Industry, Preferred Location, the Highest level of Education, Country of the Highest Level of Education, Maximum Tuition Per Year, Maximum Living Expense per year, total twenty categories. It is also the same catalog that we collect data from students. Then, I break down the information to ensure our team, especially the developer, could understand what content should display in each layer.
After breaking down the information, I had a meeting with the PM. With the user research he delivers, I started to do the wireframe, and we decided the filter needed to meet the following priorities:
To understand the user’s priority, create a default list with the most potential data the user needs.
Each column can sort individually.
Use interactive filtering patterns to speed up the process and save more time for the user. (Interactive filtering is to fetch the result instantly, which means that as soon as the user makes a selection, the data is refreshed and shows filtered results.)
All Filter options at once include the subcategory.
Phase 2 - Defining Relevant Filtering Conditions
By now, the phase 1 filter is enough to use, but soon we realize an advanced filter is a must. First, the phase 1 filter does not allow the user to make multiple choices. As long as the amount of data gets big, the granularity the filter can afford gets higher. Each one of the categories could have different values, except for displaying the content the user should or a user should set up the range of the categories.
For instance, if a user chooses ‘intended major,’ a user could select multiple majors but be shown on the same screen simultaneously. In such a way, the screening condition focuses on specific details, and the user can get more accurate targets.
However, here comes the challenge. For the filter user interface, if we stick to the way we had before, like the wireframe, imagine if we expand all the categories, the filter form would be complicated and hard to track. So the logic behind the UI needs to be very clear. Let us start with the positioning.
Positioning (Combine with Phase1)
To understand the user’s priority, create a default list with the most potential data the user needs.
In Phase 2, we are dealing with multi-select filters and more complex inputs with the amount of data at hand, so it is necessary to have an advanced filter.
The batch filtering is better for our product than the interactive filtering I designed in Phase 1. It helps the user to find their desired filters. Once they have the input, they can click the apply Botton. It works best for very heavy datasets.
Pattern We Use
Advance filter
The filter allows users to generate a complex form by adding or excluding conditions. Results should match all/one/none of the conditions.
Multiple Inputs & Selection As Tags
For more than two values, the user can keep adding values into one filed or adjust the selection inside the field. Tags generally display a single category, dimension, or property related to adjacent content. The label UI is also help us to avoid the heavy load of screens. It is easy to add and remove.
Autofill
With the amount of data at hand, autofill is more helpful and increases more interaction for the user to use.
UI Design (ongoing, not the final version)
I use a horizontal section to display the advanced filter right up to the list. One of the advantages is that they keep the user’s attention in one place. About 80% of online screening platforms use the horizontal bar for filtering, so most users are used to seeing it there. It is a predictable location.
Next Step
01 Responsive Design
For website-app, responsive design is a must. To emphasize, during the pandemic, more and more people started to work remotely, size of their devices could be very different. How we design our product to adapt to multiple monitor screens is one of the primary goals of our development approach and one of the primary goals of our product approach.
02 Essential Features
Under the multiple values the users might add, can we still hold on to the heavy info on a simple table list? The next step is to think about how the result page should display.
03 Launch
We have developed and launched the primary functions during this first iteration. So we plan to launch this feature during the second iteration.
