Loaded
It’s that time of year again, and each year I like to create an application concept based on a subject I know well and find interesting.
This year, I’ve developed an app to help students prepare for higher education using technology without distracting them from their current coursework.
This idea interests me because, during my middle and high school years, there were no comprehensive resources for college or trade school preparation—we had to do all the research ourselves.
When starting on a project, I usually like to adhere to a process that helps to ensure that my designs are as consistent as possible. During any project, I stick to these four steps:
01 Understand & Research
02 Sketch & Wireframe
03 Resources & Design Inspiration
04 Design
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.
The above images show articles from The Hechinger Report, reporting on student college and career preparation in high school and FSU Academic Library system, discussing fostering college readiness.
How was testing performed?
In order to further validate the idea, I conducted a series of 1:1 interviews with the primary base I was targeting. Participants were found on User Zoom to engage in a series of two 30 minute interviews.
I utilized the responses to understand what participants would need to feel prepared for higher education, a career choice, and their existing coursework.
Questions were grouped into three categories:
Demographic: used to identify the target audience’s age, gender, and grade level.
Preparedness: used to determine if students feel their current academic experiences prepare them for higher education/career choice.
Technology: used to determine why students prefer technology-based learning.
User research was pertinent to discovering more about the target users and their preparation methods, frustrations, goals, and ultimately what they would like to accomplish with a potential application.
What did I learn from my research?
Before moving into the design phase, the main research findings were:
Early on during the research phase, a competitive analysis was performed to understand the landscape of solutions for the problem I was trying to solve. This was important in order to formulate a solid foundation for the application. My goal was to gain strategic insight on the flows, functions, and features that the competition possesses in order to continue the design process.
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 as possible.
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 student to succeed.
Before beginning any designs, I always like to start with sketching things out on paper and taking some notes. This is an easy way to ensure that what I’m thinking in my head makes sense before starting on any complex wireframes.
After sketches, I create simple wireframes which are a cleaner and precise representation of my sketches. For the UI, I like to use the wireframes for reference, this also helps to map out the user flow and see how the UX will be early on. Before starting on the UI, I first like to get some inpspiration…
A key step is finding inspirational designs before starting on the UI for the concept. My favorite websites to peruse are Dribbble and Behance. These are two sites that are usually up to date with UI design trends, and I go ahead and save projects that are great design creations.
After collecting a few designs that are close to what I am looking for, I proceed by making a mood board that I can reference when creating the final user interface.
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 includes:
Before starting any prototypes or development, I wanted to first communicate the idea through a 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.
In order to visualize the journey the target audience would take, a streamlined user flow was created to illustrate the onboarding and student profile experience. This assisted in further solidifying the actions a user would take in the beginning stages of the application.
To further validate the design and functionality, I created wireframes in Figma that could be used for brief usability tests. This would help to determine the strengths and weaknesses of the app from the user’s feedback. Below is a condensed version of the app’s wireframes.
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:
In order to further validate the idea, I conducted a series of 1:1 interviews with the primary base I was targeting. Participants were found on User Zoom to engage in a series of two 30 minute interviews. I utilized the responses to understand what participants would need to feel prepared for higher education, a career choice, and their existing coursework.
Questions were grouped into three categories:
For the design exploration and application flow, I used Figma to communicate the app’s transitions and interactions. Prototyping is essential for analyzing the flow, testing the design, and gaining actual user feedback before the development phase.
While designing the UI, I wanted to showcase some of the applications including:
An evaluation of the application was performed with a 1:1 session with seven participants. 2 participants were high school 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 toward the application’s college and major preparation features as they were closer to 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 were conducted. Below are the findings from the user study:
I found that 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.
The user interface was kept very simple with more of a focus on what the application offers.
Drag on the 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.
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 application’s 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.
Tutorial videos work great for helping students with areas they struggle in, however, many wanted tutorials and videos that focused specifically on those areas rather than viewing videos on topics they already understand. Suggestions were made to list the problem areas in the course section and have tutorials tailored to these areas.