Scroll

Product Designer – Francesca Wilder

slide alt

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

I was tasked 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 goals.

My Role

End to End Design Process

UI/UX

Prototyping

Team

Solo Designer

Stage 1: Understanding the user’s issue

The problem

With the influx of using technology instead of textbooks and paper products, many students are more likely to utilize digital resources to help them attain their academic goals. The problem lies in their 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. 

Stage 2: User Research

Speaking to real people & early insights

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

In order to further validate the idea, I conducted a few quick surveys with the primary base I was targeting. I learned that 14/20 respondents felt that they wanted more preparation for their major and the college application process.

More focus on college or vocational school preparation

Many students felt there was not enough preparation for after high school and wanted a more comprehensive focus on how to put their best foot forward for the application process.

Major Exposure and mentorship

More career field exposure was also a topic that was mentioned. Students wanted to actually participate in mentorship opportunities or have more learning events readily available.  

Existing User Login

Student Profile

Tutorial Videos

Review Sources Below:

Paper One

Paper Two

“Transitioning to digital curriculums, textbooks, and educational aids has been a more convenient and up to date alternative for students to thrive in their academic goals.”

Stage 3 : Analyzing the research

Making sense of it all

After some preliminary research and analysis of 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 most ideal for students to succeed.

Understanding the user’s needs

Before starting 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.

Drag on below image for further information.

Stage 4 : Ideation

Generating & developing ideas

Based on my conclusions from research and having a clearly defined problem to solve, I proceeded to the ideation phase by organizing my observations to help generate as many ideas and solutions as possible. This phase was also a catalyst for forming options outside of the obvious ones and make room for innovation. The left image is a complete mind map of all the solutions and right image are marked with an indicator that the solution may involve hybrid learning or virtual and in person learning. 

 I found that the majority of the above solutions could be displayed online or via a mobile application, however many of the options would benefit from a hybrid solution where students can gain hands on experience as some students learn better in an actual environment. For instance, tasks like job shadowing can take place in  a virtual sense, but certain majors may be better experienced in an in person setting such as biology or physical therapy. 


Click on each image for a larger view.

Major Exposure

College Preparation Tasks

Current Coursework Assistance

 Structuring the experience

 In order to visualize the journey the target user would take, a streamlined user flow was created to help make sense of what actions would make the most sense for the user. 

 1.0 Onboarding (Desktop version)

 2.0 Sign in and exploring the student profile (mobile version)

Stage 4 : Design

Preliminary design approach

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 important 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.

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.

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.

BRAINSTORM

PROTOTYPE

(left) A shot from a brainstorming session and (right) sketches from the project.

Visualizing the user’s path

I created a wireframe to further develop the design and functionality on each page. This 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 application’s wireframes.

Design considerations

I created a wireframe to further develop the design and functionality on each page. This could be used for quick usability tests to determine the strengths and issues of the application determined by the target audience. The following considerations were formulated:

1.) Utilize user information about the prospective majors to personalize the “Get Involved” page.

2.) Outside of tutoring sessions with teachers, provide personalized tutoring videos based on the problematic areas for the user.

3.) Allow users, with the assistance of their guidance counselors, to schedule potential mentorship with professionals in their field.

Design system

The Design System was built with scalability in mind so that all users can utilize the application on all devices. Below is a condensed version of the design system for the application.

Color Scheme 

For the color scheme, I chose to use a variation of blue, purple 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. 

Typeface and Iconography

Raleway and DM Sans, two san serif fonts were used for the typography. They are both legible and come with different weight options for header and paragraph usage. For the icons, I wanted to use a minimalist feel so they wouldn’t distract from the main content of the applications.

Design exploration through prototyping

For the design exploration and application flow, I chose to use Figma to communicate the apps transitions and interactions. Prototyping is important to analyzing the flow, test the design, and gain actual user feedback before the development phase.

01.

 Login to the student profile

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

02.

 Menu transitions

The prototype shows the side and bottom menu transitions.

Micro interactions

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

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

 

 

Stage 5 : Usability & user testing

Analyze important elements

Before proceeding to the final design handoff, I wanted to continue to validate the ideas and hypotheses, identify any usability issues, and test accessibility. 

Drag on below image for further information.

 

Usability Test Plan

An evaluation of the application was performed with a 1:1 session with seven participants. 2 participants were high students, 2 were middle school students, 2 teachers, and 1 guidance counselor. The teachers and guidance counselor who participated in the study felt that the application was well rounded, and focused on the main points for preparing students for higher education. 

The high schoolers displayed more eagerness towards the application’s college and major preparation features as they were closer to H.S. graduation. The middle school students focused more on the application’s career exploration feature as they were not as sure of what career path they wanted to take yet. A cognitive walkthrough and a brief structured interview was conducted. Below are the findings from the user study:

I found that the middle schoolers were more focused on finding a career path that they would like to prepare for. 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. They mainly wanted to focus on gaining the needed experience before continuing their college prep process.

 

Stage 6 : Design handoff

Final design

The updated design focused on providing more important details and features for the students, 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. 

Drag on below image for further information

Internship notifications

Students are able to receive notifications for internships that pertain to their major at any time. They can also look at the instructors and mentors for each internship. 

Stage 7 : Analyze (again)

Final results & takeaways

There were two big takeaways from the entire process:

1.) Paper & digital planning: From the 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 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. 

 

SecureSay allows college students to communicate securely when participating in group projects.