App-le—the college application app


College is often one of the biggest shifts in a young person's life. Students from disadvantaged backgrounds—i.e., those without access to resources like tutoring or test prep—are automatically less prepared to meet the challenges associated with the college application process.


App-le is a free app connecting carefully-vetted mentors with high school students in need of guidance through the college application process. By providing this service, App-le hopes to:


1) even the playing field for students from low-income backgrounds


2) demystify the application process through low-pressure learning and fresh connections


School (team)


Apr 2020 (4 weeks)


Figma, Lucidchart


Concept mapping, systems thinking, storyboarding, brand design, prototyping

Frame 53.png


Our process fell into the following stages: A) research to understand the pain points for both college applicants, B) designing the app's system, and C) designing the app's UI.

The problem—an uneven playing field

Video presentation of problem space

Secondary research

First, we did some secondary research to establish the basis of our problem: a lack of resources or information (concerning the application process) for students of disadvantaged backgrounds.  

App-le research brief

Research, visualized

Next, I created two BOT (behavior over time) graphs and a feedback loop, while my teammate created a stock and flow diagram. These showed various facets of the problem space. 

Diagrams showing research

Problem Statement

How might we balance the resources received by students from marginalized communities to those from more privileged backgrounds so that they have an equal chance of applying to and attending college? 

User research, persona, journey map

Lastly, we interviewed two recent high school graduates to form our persona, Lucy. With her needs and goals in mind, we constructed a journey map that tracked her progress throughout the college application process WITHOUT our product's help. This allowed us to get a realistic birds-eye view of the experience and uncover opportunities that would allow us to smooth the process.


The solution—App-le

Concept model

Before designing the physical app, we defined App-le's system with a concept model, describing its users, services, funding, and competitors. This model was created by me with input from my teammate.

Journey map WITH App-le

My teammate created this journey map with input from me. Here, we make good on the opportunities found in the first journey map by introducing App-le as a solution to the various problems. 

UI sketches

Our next step was to sketch up the basic look of a few of the screens:


From there, we collaborated on some wireframes:

Home (3).png
Search Result.png
Account Profile.png
Mentor's Profile.png


Search results

Student profile

Mentor profile

Mentor reviews

Mockup progression, mentor profile

Our design underwent several rounds of iteration:

Mentor's Profile (1).png
Old Mentor's Profile.jpg
Mentor's Profile.jpg

Version 1

Version 2

Final version


During one of these earlier versions, we created a storyboard to tell the story of how our persona discovers App-le and uses it. 

Final mockups

Here are the final screens. You can also interact with the prototype here

Search Result-a.jpg
Mentor's Profile-a.jpg



Mentor profile

Search results

Account Profile-a.jpg

Mentor reviews

Mentor and mentee chat

Leaderboard, ACT Acers

Student profile 


Lessons learned 

This was my final project for Systems, a class focused on the bigger picture of problem spaces and the people within them. I think it's fitting that such a class produced a project focused on the betterment of an educational system.

With more time, I would explore the mentors' side of the UI. What would their sign-up process look like? What does the vetting process include? I would also expand this concept to web, as I feel it might be easier to meet with mentors over a computer touchpoint.