At sit eleifend efficiendi, utroque forensibus vel eu. Eros mandamus ad nam. Ad natum virtute pro, dicit scripserit nec cu et qui dicat.

Follow me:
Tw        Be        Fb        Pin

My College Prep’s goal is to prepare middle and high school students for higher education while thriving in their existing coursework.

Team: Solo Project

Role: Creator, User research, prototyping, UI design,

brand design, Build and maintain a design system,

and Art direction

Date: Jan 2014 – March 2014 (UPD 2018)

Having experience in education, many students may want additional resources for college preparation to supplement information from their guidance counselors and teachers.

My professor tasked me to create this project to help students get a better grasp on the college application process, and succeed in their current academic career. Field research was conducted to develop the design process, and to help understand the target user’s main goals.

The problem

With the influx of using technology rather than textbooks and paper products, many students are more likely to utilize digital resources to help them attain their academic goals. The problem lies in there being a limited amount of tools to accomplish this objective. Many, if not the majority of middle and high school students of the information age, would respond quickly to notifications of internships geared towards their prospective focus; whether that be a college major or pursuing an education at a vocational institute.

Target Audience & User Research

The target audience would be middle through high school students, teachers, counselors, and professionals who are open to mentoring prospective students in their career field. Since the influx of web and mobile applications, many schools have forgone the use of textbooks and other paper materials for more convenient technology alternatives.

A proto-user persona was created based on intuition and anecdotal evidence. As the project progresses, more will be learned about the target audience which will help create a more accurate reflection in future personas and research. Although there are a few applications in the market to help with college preparation, only a small number of them were a comprehensive choice for students.

Paper One

Paper Two

Making sense of it all

After researching the different college preparation applications, the majority of them focused on one topic instead of a comprehensive list. For instance, College Interactive is a great tool to help match students with colleges depending on their career interests but mainly focuses on this point.

Naviance was the application I found to be the most well-rounded as it focuses on course direction and academic success while students are still in primary and secondary education, which courses to choose that would align with the students chosen college major, help with choosing a major, along with many other pertinent topics to the college admission process.

After this analysis, I found that an application that focused on both the student’s current courses and their post-secondary preparation would be the most ideal for students to succeed.


To start the ideation phase, user personas were created that summarized the research data collected. This helped to keep the user’s frustrations, motivations, and goals in mind when evaluating possible design solutions.

Design process

For the design process, the most important feature was that the application was all inclusive and simple to use for students, counselors, teachers, parents, and volunteers. Some features include AP class tutoring, course videos, and study tips for passing important exams.

Students can also receive feedback from professionals in their chosen field and have a convenient place to keep up with all their homework, project assignments, and class syllabi among other documents. Another objective of the application is to stress the importance of face to face communication and interaction between students, mentors, and teachers which include:

1.) Building strong relationships and communication skills.
2.) Gaining actual hands-on experience.
3.) Helping with time management skills.

The UX Hierarchy of Needs by Stephen Anderson was used as a foundation for the design process.

Starting the design

Before starting any prototypes or development, I wanted to first communicate the idea through concept sketches and condensed application flow to show the main functionalities. A paper prototype and Axure wireframe user flow were created to further develop the design and functionality on each page. This prototype could be used for quick usability tests to determine the strengths and issues of the application determined by the target audience.

For the UI, I opted for a simple and clean design, legible typography, and uncluttered with unnecessary elements. The emphasis was placed on the application being as broad as possible for all users.

To aid in the implementation of the concept, three main goals were kept in mind during the design process.


For students to gain exposure or learn about different majors and career paths.


For college-bound, vocational-school, etc. students to receive advice on the application process.


For students to excel in their existing courses.

Setting the Design Direction: Paper Prototyping

During sketching and storyboarding, a stepwise perspective was taken to design the structure of the application’s experience. After generating the UI’s arrangement, functional elements, and interaction, the vision began to take more shape.


Visualizing the user’s path

An Axure wire-frame flow was created to further develop the design and functionality on each page. This prototype could be used for quick usability tests to determine the strengths and issues of the application determined by the target audience. Below is a condensed version of the user journey.

Design considerations

The main focus was creating an all inclusive operation, that meant developing a native web application where students could access their information through the web. The following considerations were formulated:

  • Utilize user information about the prospective majors to personalize the “Get Involved” page.
  • Outside of tutoring sessions with teachers, provide personalized tutoring videos based on the problematic areas for the user.
  • Allow users, with the assistance of their guidance counselors, to schedule potential mentorships with professionals in their field.

Branding & style guide

I chose to use a variation of blues and pure white as the base for the user interface. Blue hues, in color psychology, are used to aid in concentration and lowering the heart rate.

For the typography, I chose to use Nunito Regular, SemiBold, and Bold. Montserrat SemiBold for smaller other titles such as for the tutorial video screen titles. Both fonts are easily legible with a simple rounded form.

Design exploration through prototyping

For the design exploration and application flow, I chose to use Protopie to survey the student profile screen and menu transition. Prototyping is important to analyze the flow, test the design, and gain actual user feedback before the development phase.


Login to Student Profile

The prototype shows the transition from the login screen to the student’s profile. Here, students can access their course and other pertinent info.


Side Navigation Menu

The prototype shows the transition from the course videos screen to the side menu. Here, students can access their course help videos for specific classwork problems they are having, and view more options from the side menu.


While designing the UI, I wanted to showcase some of the application’s features including:

  • Signing up for events that are specified to the student’s major/career field.
  • Viewing important documents for each student’s courses.
  • Accessing the student email.

Evaluations & Findings

An evaluation of the application was performed with a 1:1 session with four participants. Two participants were high schoolers and the remaining two were middle schooler. The high schoolers displayed more eagerness towards the application’s features as they were closer to H.S. graduation. The middle school students focused on the application’s career exploration feature, as they were not quite sure what career path they wanted to take. A cognitive walkthrough and a brief structured interview were conducted. Below are the findings from the user study:

I found that middle school students were much more focused on finding a career path as they were not quite sure which way to go quite yet. They craved more exposure to different professions before choosing one.

The high schoolers were more deliberate in their choices and had more of a structured path on what they wanted to pursue. So they focused more on gaining the needed experience before continuing their college prep process.

Final Design

The updated design focused on providing more important details and features for the student, but also being straightforward in how student’s can accomplish each of their intended goals through the application. The user interface was kept very simple with more of a focus on what the application offers.

Student Syllabus

Student Courses

Student Email

Final results & take aways

There are 2 big Takeaways from the entire process:

1.) Paper and digital planning: From findings and research, many students liked to incorporate paper planners along with keeping up with their assignments, labs, etc. via applications. One big difference was the applications ability to alert or send notifications of possible internships, which was especially pertinent to graduating juniors and graduating seniors who wanted to gain last minute experience in their field.

2.) Focusing on problematic areas: Tutorial videos work great for helping students with trouble areas in their classes, however, many wanted tutorials and videos that focused specifically on what they are having a problem with, instead of viewing a long-winded video on topics they already understand. Suggestions were made to list the problem areas in the course section and have tutorials tailored to these areas.