How we built a platform that scales educational opportunities in the Philippines
Applica.me: A Product Design Case Study
Understanding the Problem
Majority of all universities in the Philippines require their prospective students to apply to their chosen schools by physically submitting paper applications.
How might we enable high school students to break away from the traditional paper application system and easily and conveniently apply to college online?
Pre-release
To learn more about the problem, we based our very first design off of the Common Application– the industry standard of online college applications in the US– and built that. (See: commonapp.org)
Initial Release
After creating our very first version, we opened applica.me to bug finding and usability testing with friends and family, and later on to the public.
82% of our testers found it difficult to navigate through different tabs because there was no sequential order. Consequently, they couldn’t successfully apply.
The problem with the CommonApp-style UX
The whole application was a multi-step process wherein students needed to constantly switch tabs to add their school, fill out their form, and then apply online.
Throughout the next couple of weeks, I visited our very first partner university almost every day to observe students apply using our platform.
Two major problems
After conducting numerous interviews and user tests, we found ourselves asking two interesting questions:
1. How might we be able to build a product catered to the local market?
It turns out that local students were confused by the three-step process because:
- Though locals were active users of the internet (Facebook and Twitter mostly), they weren’t familiar with other common design patterns and trends that the other parts of the world had.
- The UX we emulated was not built in a way that encourages a straightforward and sequential application process.
2. How might we be able to make this product a norm for the Philippine college application process?
We had to design this product be usable enough that it actually helps make applying to college less confusing and more convenient for students.
The CommonApp’s execution may work for people who push themselves to use it because they need it, but for a new market like the Philippines that has the option of submitting hard copy applications, we had to make this product extremely usable for it to work.
The Redesign Process
After weeks of testing, and 2 rounds of major overhauls, we came up with what is known today as applica.me:
1. On Boarding
How can we make our on boarding process as intuitive and smooth as possible, thereby decreasing the learning curve and the amount of errors are made?
Should students fill out their general forms before picking out a school? Should students fill out just one form to get started? Should students first pick a school and then go from there?
We wanted to select the best way to get students to stick around and apply to a school after signing up, so we conducted user tests using InVision and Proto.io prototypes.
User testing showed that:
76% of students stuck around more when they selected schools before filling out their application vs when they had to fill out any kind of form.
Why: The number of fields needed to be filled out intimidated students and posed as a barrier to entry.
The new on boarding process:
- After signing up, students select their degree type and add as many schools as they want before filling out any forms:
- After closing the modal, the student sees that the schools they added are present in the sidebar. The first accordion opens automatically:
- Having the first accordion open was extremely useful in creating a smooth flow from when a student adds a school to when they actually start filling out the form.
- We also chose to keep the forms accordion-style because it was the easiest to digest and understand, regardless of who we tested it on.
2. Forms (Main Interface)
How might we design the main interface of the app in a way that is intuitive and sequential?
Designing the information architecture of the main interface was by far one of the most challenging tasks we’ve encountered while building this product.
We had the choice of:
- A - Segmenting the application by form type (CommonApp), wherein the general application form (basic information, etc.) and school-specific forms (School A’s essay questions, School B’s essay questions, etc.) were in separate tabs
- B - Combining both application forms (general and all school-specific) into one big form for clarity (no sidebar or tabs)
- C - Segmenting the application form by school, wherein a school’s form contained both the general application form and that specific school’s essay questions
All of these solutions could have potentially been explored, but we wanted to stick true to the goal of this product, which was to have a straightforward and sequential application process.
User testing showed that:
18% of those who tried choice A (CommonApp - segmented by form) found it straightforward and easy to navigate, while it was 5% for choice B (one big form) and a huge 81% for choice C (segmented by schools).
Why: Students thought it was most natural to have one application form per school, rather than having to fill out a general form first and then multiple individual school-specific forms later.
Therefore, we decided to use the last solution, which segmented the forms by school:
- Whenever someone clicked on a school, it would display both the general forms (basic information, family information, etc.) and the school-specific question form.
- This means that every school has its own general forms. However, we’ve designed it so that the student only needed them fill out once (i.e. Fill out ‘Basic Information’ in School A, and the same information will appear in School B’s ‘Basic Information’ form).
- This worked out well because it turned out that schools didn’t want every part of the general form in their application anyway (i.e. Some colleges didn’t care about the family information of the applicant, but other colleges did). Therefore, it was easy to take out segments of each general application and customize it to the college’s liking.
- Though effective, this was somewhat a risk because we didn’t know whether students would be confused by how there was a separate general application in every school form, but adding a check mark beside a completed section of the general app did the job of signifying that the form had been filled out before and that they didn’t need to do it twice.
After all forms have been marked with a check, students were finally ready to submit their application.
3. Sidebar
How might we be able to navigate through different schools’ forms while still keeping the interface relatively simple to view?
Added schools are all viewable in the sidebar. Therefore, it is an extremely important component of the app. However, it is usually not needed when students are actually in the process of filling out their application.
With this in mind, we designed a prototype that allowed the sidebar to be collapsible but still usable.
User testing showed that:
Around 70% of the students we tested the prototype with thought that the sidebar consumed a good amount of space. However, when we introduced the collapsible sidebar to them, 97% remarked that they would appreciate having a collapsible sidebar.
Why: According to the interviews we conducted, having a collapsible sidebar decreased students’ cognitive load while filling out forms.
The new sidebar:
- Even when collapsed, students can click on the school’s icon and still be brought to that school’s application form:
- Through this design, students have ample space on the screen to work on filling out their forms.
- Not only does this reduce the cognitive load of the interface, but it also helps students understand applica.me’s mobile interface wherein the sidebar is perpetually collapsed when they fill out their forms.
4. Retention
How might we be able to keep students coming back to apply to more schools after their first application has been submitted?
Post-submission, there is usually a long waiting time before students get to know their admission results.
User interviews showed that:
100% of the students we interviewed wanted to know if their application was received post-submission. All of them also appreciated hearing something back from the school that they applied to.
Why: Knowing that a school has received their application increases their trust in the product because it shows them that their application was successfully sent to the school.
How we kept retention going post-submission was by adding a seen feature to the application:
- Students could now know if colleges have received their application, and when those colleges have downloaded or opened it.
- Interestingly, colleges didn’t mind having this as long as students wouldn’t be able to know in advance if they had gotten in or not.
- Checking if their application was seen requires the student to log in to the site. After logging in, students are more likely to browse our catalog of schools again and add more applications.
Learnings
Designing a new platform from scratch and continuously iterating over it was a stamina-requiring journey, but it was also one of the best design challenges anyone entering the industry could ask for.
Here are some things I learned:
- To create a product that is usable, teams need to run numerous tests with real potential customers before building the product. Always design and build for the person using it.
- Don’t explain the desired path to anyone using your product. If they don’t understand it, the best thing would be to change it into something they can go through intuitively.
- Know the problem before trying to solve it. There are many good and elegant solutions for your product out there, but you’ll only be able to design it with intentionality if you stay true to the goal of the product.
- Speaking of intentionality, all aspects of the product could make or break something, so it’s good to make sure every detail is well thought of and has a good reason to be on the screen.
- The person using your product should be the number one priority when you are designing. Every design decision should come from thinking about how the target market would use it.
- Note 1: A couple of details may or may not have been implemented correctly on the actual website. Please take these high fidelity mockups as a representation of my design decisions based on data/numbers collected from previous iterations.
- Note 2: This case study is solely for Applica.me’s student-side user experience. We designed separate interfaces for universities and recommenders to use.
- Update: the actual Applica.me website is currently having server problems; please refer to this case study to understand the product
Thanks for reading!
Feel free to contact me at jilltiutan@ucla.edu for any questions, opportunities, or requests!
