In the summer of 2019, I worked with a friend to create an edu-tech tool for college applicants in Pakistan (and other underprivileged countries) that uses historical data to aid applicant choices and decisions.
International students, especially from 3rd world countries like Pakistan, often face additional challenges in the already difficult CommonApp application process for US universities/colleges.
First, many applicants in these countries aren't always aware of the variety of colleges they can apply to. So while they might have heard of big-league colleges like the Ivies, they are either not aware of smaller liberal arts places or have an uninformed negative impression of them. This leads to most candidates applying to only upper-tier colleges, which significantly reduces their chances of getting in.
Second, most of the applicant data available online for a college (e.g. Average SAT Score of Accepted Candidates) is often a US or at most global average. This often doesn't tailor to the needs of international students, who usually require higher than average SAT scores. Another case where this data is non-applicable to international students is financial aid. While most major colleges/universities are need-blind for domestic US students, they don't offer the same resources for international students. This means that stats like 'Average Financial Aid Given' are often misleading for internationals.
Kya Scope Hai aims to provide these international students with a more informed and tailored data-driven approach to college applications. The tool takes in a candidate's profile and shows them how they compare to past international applicants for different colleges. This college list also contains quick facts about each college to increase candidate awareness (e.g. financial aid given to past international students, rankings, specialties). By only using data from past students who were citizens of these specific countries (currently Pakistan), the tool specifically caters to the needs and requirements of international students.
To get an idea of what direction to go with for the web app's design, I conducted a small scale study of current applicants from 3 different high schools applying to colleges in the US.
After briefing them on the idea, I asked them what came to their mind in design terms when they thought of KyaScopeHai. The common consensus to this question seemed to be collegevine, a college guidance website with a playful and vibrant interface.
Another question I asked was what element they did not what the tool to have. To this, there seemed to be an overwhelming majority that reasoned that it did not want to associate Kya Scope Hai with the CommonApp website i.e. the portal used for college applications. When I asked why, they replied that they associated the CommonApp website (pre-2019 version) with college stress and anxiety. Since KyaScopeHai's purpose was to ease applicant anxiety through its data, they didn't want to look at KyaScopeHai's website and be reminded of the CommonApp website.
Based on my research, I set forward two main goals for KyaScopeHai's design: First, using collegevine and other similar designs as a reference, I surmised that KyaScopeHai should have a colorful, vibrant and intuitive design that speaks to its highschool student audience. In other words, since KyaScopeHai aims to market itself as 'for the students', I didn't want to make it look too corporate and official. Second, drawing from the impression I got in my research, I decided that KyaScopeHai's design should be as far away from the CommonApp website's design (pre-2019) as possible. I didn't want KyaScopeHai to be visually associated with a website that gave people college stress and anxiety.
Home Page
Since the home page is the landing space for most visitors to the site, I wanted to ensure that it accomplished two things: firstly, it should immediately let the visitor know what KyaScopeHai is. Secondly, it should make the visitor's navigation through the web app intuitive. At this stage, KyaScopeHai is doing two things: collecting data from past applicants (i.e. submitting data) and providing this data in an organized helpful form to new applicants (i.e. searching data). I wanted to emphasise these two directions on the Home Page.
Chart
KyaScopeHai's main attraction is its charting tool that visualizes data of past applicants by college and allows the applicant to see where they stand based on relevant historical trends. For this charting tool, I had a couple of things to keep in mind: firstly, I wanted to keep things as clean and clutterfree as possible. I tried to do this through a simple one line search bar for colleges and expandable menus on the right. Secondly, I also wanted to showcase the power of the charting tool by allowing the user to utilize its various filtering options as intuitively as possible. I decided to implement this using a neat scrolling sidebar with individual well-defined filters that would generate dynamically based on the given data.
Matte Black
#1B191B
Coral Pink
#DF4362
Pale Green
#55BB8D
Casino Purple
#2D16A1
Since I wanted to make KyaScopeHai seem colorful, vibrant and student-friendly, I went for a tri-color scheme of casino purple, coral pink and pale green as my secondary colors. All of these would place under a solid matte black in terms of hierarhcy, which I hoped would bind these vibrant colors into a cohesive package without making the web app look too out of place.
Questrial
As with most modern web apps that prioritize a clean interface, I ended up choosing a Sans-Serif font type. The font in question, Questrial, was an open source font on GoogleFonts. With full-circle curves and a seamless Swiss design similar to Helvetica, I felt Questrial achieved the perfect balance between readability and aesthetic appeal. Not requiring a license for the open-source font allowed me to pursue my design strategy without worrying too much about copyright permissions. Additionally, GoogleFonts are typically very easy to integrate into CSS code, which was another plus.
In addition to designing KyaScopeHai, I also coded the website from scratch. To find out more about my coding process, click here. To access the final website, click here.
I had a lot of fun working on KyaScopeHai's UI+UX Design. While I do think that the final project reasonably accomplished the goals I set forward at the beginning, I do have a few concerns:
a) In my attempt to make the tool look vibrant and student-friendly, I'm a bit concerned that I may have taken the concept a little too far. In other words, I'm worried that the project's colorful design may prevent it from being taken seriously and may detract from its utility as a data-driven solution to college applications. In retrospect, I think I should have gone for a slightly more subtle and nuanced color palette.
b) Given that our tool caters to current high school students, I think designing a mobile app could've been a more usable product for our target market. Right now, due to limited time and an inability of the Charting API to work on mobile operating systems, we had to settle for a web app. However, if I had to redo the project, I would push for a mobile-oriented focus.
This was my first time designing a project's User Interface and Experience. Learning about the different stages of product design and then working up the courage to implement them took some doing. Nevertheless, I really enjoyed the process and look forward to many more projects in this domain in the future.
In terms of tools, I designed KyaScopeHai's wireframes and prototypes on AdobeXD, since I already had access to the Adobe Creative Suite from past ventures in graphic designing. For my purposes, XD was fairly serviceable. It also helped to have an Adobe tool with many features that followed intuitively from Adobe's other products (Illustrator, Photoshop).
However, working on this project and digging into industry standards for UI/UX design has made me realize that there is a lot of potential for more advanced design using tools like Figma and Sketch. I plan on familizaring myself with these tools in the hopes of using one of them in a future UI/UX project.