College Confident

This project was conducted as an introduction to user centered design with an emphasis on storyboarding and sketching.

The Problem

High school students applying to university have an overwhelming amount of tools to research prospective schools, learn about available financial aid, and keep track of deadlines. A cumulative design for guiding these students might equip them to get into a school that is a good fit and maximizes their potential.

We set out to design something to actively guide high school students through the college application process. Instead of providing pamphlets or online guides to read through, we wanted to create a simulated mentor to assist prospective college students in understanding their own education goals and help them keep track of testing dates and impending deadlines.

Our primary objectives were to:

organize a set of steps to pursue higher education
help students keep track of their progress
provide students a sense of direction and confidence

Personas and use scenarios

We identified high school junior and seniors as our primary users for this product, and we conducted brief online research to determine what the primary needs of our users were. Online forums, FAQ pages, and college counseling pages provided us with information about the most common concerns of high school students entering the college application process. These insights were vital in creating our user personas.

By thinking through the personas of two high school students struggling to apply to college for two different reasons we were able to hone in on their most important needs. Having two clearly defined users also allowed us to develop a firmer idea of the context of the app’s use.

We developed six example use scenarios based on how we expected our personas to interact with our design. By placing our product in a use context we were able to begin thinking about the considerations and features that would be necessary to address the needs of our user as they apply to college.

We focused on three key features that fit particularly well into our use scenarios:

Homepage/Timeline

The homepage will be the first screen the user sees when they open up the app. This screen is important for visualizing the student's progress and guiding them toward their next step.

Calendar

In all of our research (and experience) students expressed concern with keeping track of deadlines. We knew we would need to incorporate some kind of calendar feature to help students organize and prioritize their upcoming tasks.

College Search

There are thousands of four-year universities in the United States for students to choose from, not to mention the thousands of options abroad. Our team knew we needed to find a way to narrow down this overwhelming list for our users. We hoped to assist students in prioritizing their criteria in order to find the schools best suited for them.

Sketches and Ideation

We began the process of designing the actual app by drawing out dozens of sketched ideas over the course of several brainstorming sessions. The sketches helped us collaborate as a team and get ideas out on the table. After many iterations and rationalizations we produced a rough structure for CollegeConfident, and were able to highlight some of its key features with storyboards.

The user is shown a list of colleges based on the preferences and priorities indicated in the initial profile setup survey.

A preliminary brainstorm of factors from our research phase.

Imagining college search function based on location.

We knew a welcoming and straightforward set up would be a comfort for students using our program.

Homepage

These timeline will be broken down into College Search, Testing Info, and Scholarship Search. Students will have the option of viewing the entire tree and all of its component steps, or zooming in on a single step. There is also a slide out drawer available where we have what we deemed “constants” accessible. Here students can access their saved schools, scholarships, and calendar page.

Calendar

While researching schools and financial aid, students will be given the option to add deadlines associated with particular schools or scholarships to the Calendar. We gave the Calendar two layout options: a visual calendar view and a list view. While the visual calendar view will only show actual deadlines, the list view will include tasks that do not have set deadlines but that need to be accomplished in order to meet the upcoming deadlines. The visual calendar view also has the capability to “zoom-out”, meaning that it can be switched from a month-view to a year-long view. This allows students to see their priorities in context no matter where they find themselves in the application process. Students are able to access the Calendar feature from the home screen of the app.

College Search

The user is shown a list of colleges based on the preferences and priorities indicated in the initial profile setup survey. These filters can be rearranged in a priority list. Somes filters will include location, cost, size, specific programs, and other relevant search categories. All schools can be saved in the user’s list of considered colleges, My Schools.

Strengths: visualizes progress, clearly implies next steps

Weaknesses: may overlook details

Strengths: contextualizes steps, integrates task viewing

Weaknesses: lacks reminder system

Strengths: customizable search

Weaknesses: unsure about layout on mobile screen

Storyboards

The main purpose of the storyboards was tie together our personas and scenarios to illustrate our design ideas. We each focused on a small and specific story featuring each of our personas. Our goal was to keep the story simple with minimal text so that the focus remained on the problem experienced by the storyboard character and the solution our app offers to that problem.

Sitemap

To help understand the information architecture of our application we created a detailed sitemap to define the hierarchy, , structure, and organization of the content and features in College Confident. Our sketches gave us a general idea of the features we wanted to include, but our sitemap shows how our app and its features can be navigated.The completed sitemap gave us an overview of our app’s layout and set us up to begin prototyping

Paper Prototype and User Testing

With a tentative product design laid out, we moved forward with user testing. First we defined three tasks for users to complete using CollegeConfident. We designed these tasks to exemplify the most important features of our app. We then hand sketched the prototype screens and buttons that would be necessary for users to interact with to complete the key tasks. The prototype was crucial in generating valuable user feedback that later used to make improvement on our app.

After designing our prototype we tested it on five volunteer ‘users’. We administered the tests by presenting the users with a task to be completed and taking careful note of how they went about completing it. Our users provided us with plenty of feedback and critique; combined with our own observations we got a strong sense of what changes we needed to make. We compiled a short report consisting of our findings: what worked well, what did not work well, and what improvements we could make to refine our design. We could then used this document to create a more concrete wireframed version of our app.

Task 1: Browse potential colleges and bookmark one that is closest to your current location to be reviewed in more detail later.

Task 2: You have moved onto the next step in the HomeTree. In this next step, you need to find out which standardized test you should take and register for it.

Task 3: You have successfully registered for the October SAT. The deadline for this registration date was Sept. 16th. You would like to mark this task as complete in your calendar.

Feedback

Based on our observations of the user’s interactions with app as well as the feedback they provided at the end of each session, we have compiled a list of changes we would like to make in the next iteration of our prototype.

Animations to indicate completed tasks
Remove or redesign the tree metaphor.
Clarify Filters and impose a ranking system for when users have priorities.
Use only one ‘Register’ option the SAT to parallel the CollegeBoard site used for sign ups.
Have more text/labels to explain content on page.
Pinching screen to zoom in/out

Many of our design choices worked well in user testing, and we were sure to keep them in further iterations of our prototype. Some of those designs were:

Menu bar on the bottom
The calendar and its associated functions
Organization and flow of pages
Infographs on the SAT page
Bookmarked schools and scholarships

Wireframes

Equipped with user feedback and a rough sitemap for guidance, we set out to produce a wireframe of CollegeConfident. Using balsamiq as our software, we created a low fidelity mockup of each screen that would display the layout with minimal content and colors to focus on the interactions and flow between the user and the application. Annotations were applied to help with any components that were not immediately obvious. We put our wireframe through several critiques and used the feedback to make adjustments. Finally we felt confident turning these low fidelity models into high fidelity mockups.

Initial Survey

Choosing Your School

Initial Survey

1/8

Final Design

The high fidelity mockups are models that represent the final look and feel of CollegeConfident based on many iterations of brainstorming,testing, and critiques. We focused on finalizing and displaying three pages that would exemplify the most valuable aspects of the application. After several more rounds of critiques and refinements, we had our final product. The mockups proved to be indispensable when presenting our app design, providing audiences a glimpse of how the app would look were it actually developed.

Reflections

This project was a successful introduction to the process of user centered design, but was not a perfect representation of the process as it should be conducted. While it was an excellent format for learning the steps of design, we did not have the time to complete the most important step in the user centered process: research. If me and my team were interested in taking further action with this design we would need to go back and conduct more authentic user research instead of drawing upon online resources. Interviewing high school students in person and putting our ideas in their hands would give us invaluable information for producing an apt design.

TIMEFRAME

September - December 2015

TEAM

Yujin Cho, Kevin Sun, Camille Mitchell

MENTORS

Dr. Brock Craft, Robert Racadio

TOOLS

Balsamiq, Omnigraffle, Sketch, Adobe Photoshop