Details:

Background

Our assigned design theme was about kids, and we decided our target user was solving a problem high school students face. According to a research study conducted by Ellucian, almost 2/3 of the 1000 surveyed students need more guidance on potential majors and careers that they could consider.

Problem Definition

From our research, we came up with a problem statement:

Our Solution

Our app has two main features: a major decider and GPA calculator. While these features are often seen separated, we combined both functions together, so that users would not need to download a separate app.

• Major Decider: Helps students find a major that is best fit for them based on their interests, as well as providing suggested courses to take
• GPA Calculator: Calculates the student's overall and term GPA based on the classes and assignment grades they input

Personas and Storyboards

To empathize with our users, my group and I created personas and storyboards, both focused on high school students since they are our target users. These were helpful to come up with scenarios where this app could be used. Below are two of the ones we did, with the first one focusing on the major planner feature and the second one focusing on the GPA Calculator feature.

For the one I did, it shows a student going to 12th grade. When he realizes he has to prepare for his college applications, he gets stressed - he has no favorite academic subjects, and therefore, doesn't know what to major in. He likes baking, but doesn't know how to apply that interest into a major. Due to his shy personality, he doesn't want to talk to a counselor for help.

As a group, we created one focusing on a high school music student who wants to maintain her GPA at a 3.4 GPA. However, she doesn't know how to calculate her GPA, and therefore, doesn't know what grades she needs to maintain that GPA.

Competitor Analysis

In order to design the best app possible, we need to examine what our competitors feature in their products. Since there are no/few competitors that function as both a major decider and GPA Calculator, we examined both of them separately, and considered the important features to design in our version. Below shows a summary of Me3, a major decider, and Grades, a GPA Calculator.

me3: Major and Career Quiz

Pros

• Helps students decide their major
• Shows career choice information for each suggested major
• Includes admission information for the school

Cons

• Algorithm to decide major is broad since it only uses images, which may sometimes be interpreted differently, leading to suggested majors that aren't interesting for the user
• Long series of image questions

Grades - Grade Calculator, GPA

Pros

• Allows students to track grade and set target grade
• Input prior GPA using their current GPA and number of credits
• Customizable class by changing colors and icons

Cons

• In free trial, can't add subassignments under a weighted category
• Only one grading scale allowed for all classes

Sketches and Low-Fidelity Prototype

We started out doing individual sketches of how the app could look like. I came up with this:

Combining everyone's app design ideas, we created a low-fidelity prototype on Figma. We first built the basic foundation of our app with a sign up/log in page, with a few pages on our major decider and gpa calculator:

Sign Up/Log in & Home page

We have users first create an account in order to keep their GPA and saved majors information safe. This allows them to easily access the data from another device if they wish.

Major Decider

After the home page, the user arrives at the major decider functionality if they choose that option. We wanted to have questions that would lead the user to majors and courses they could consider taking. At this stage, we only had 3 questions.

GPA Calculator

With our second major functionality of this app, users can add terms, add classes they're taking that term, and add assignments for that class. The GPA and class grades will update after each added class and/or assignment.

Prototype 2

With the basic features figured out, we started improving on the current version, adding in new features, besides from adding more color:

Major Decider

• Changed to a flowchart-type major decider because we felt it would be quicker to use and give major/course suggestions
• Rather than only college courses, we suggested high school courses as well. We think that this is useful for students because if they are new to high school, they can plan their AP courses for what is most useful and interesting for them, and for others who already our suggested courses, could consider taking College courses for preparation
• Allow users to save majors they're interested in, and link them to outside resources as well

Although we had categorized the majors into seven different paths, the image below shows an example of how the user would arrive to the business path.

User profile

On this page, we display the majors that the user has bookmarked. It utilizes a horizontal scroll to save vertical spacing, with each major set in a different color. Clicking the individual majors link to an outside reference for more information on the major.

GPA Calculator

• Added a grading scale page for users to change if needed (ex. if their class uses A+, A, A- or just A for 90%+). We allow the students to customize it for every class. Accessed by clicking the information (i) button.
• Added ability to choose to input courses that grade on either the points or weighted (percentage) system. This gives more flexibility to the users so they aren't limited to inputting only one type of class.

• Points

• Weighted

View the Figma prototype Here

User Testing

Since this project was done remotely, we also conducted user tests remotely, using a Google Form to collect all the responses. Although we weren't able to see their facial expressions while they were testing our app, we were still able to get some good feedback.

In general, from conducting user tests, we learned that we need to be more consistent with the spacings and our color design needs to be improved. However, they did find that this was a really good app since it combines 2 important features.

Major Decider

• Need more questions and be more specific with the majors
• Should let users change their answer

GPA Calculator

• Color for GPA box needs to be changed
• Gpa should also be listed for each term
• Users found it difficult to know which page they were on and what back what lead to
• Can't edit or delete classes, terms, and assignments

Final Prototype - Added Features

Based on the feedback we got, we started improving on our prototype. As the content strategist, I analyzed our competitor’s products and asked myself, "How can I improve our app to be more competitive with the current market?" So, I planned new features:

Major Decider

1. Added career field options to help decide major
2. Provide links to major information and career information to students

GPA Calculator

1. Showing weighted and unweighted GPA for students. I felt that being more specific would help students when they are applying to colleges.
2. Allow users to input previous GPA.
3. Allow classes to be customized by class type (regular, honors, AP), since they have different weights: AP courses are worth 5.0, rather than the regular 4.0

Final Prototype

After designing these new features, we were able to clean up our overall design and colors in order to make all the pages consistent.

Major Decider

Because the feedback suggested having more questions and major options, I changed the design for the major decider. Seeing how many of our competitors have career field options or different ways of helping students decide a major, I decided to find a way and include that in our app design as well.

So, I started with a question, "Do you know which career field you want to go into?" Depending on their response it goes into different ways to determine the best major for the student.

If the user answered yes:

• User knows what career field he/she is interested in and choose between STEM and non-STEM
• Similar to prototype 2, they are recommended high school courses, college courses, and potential majors
• Each major links them to outside resources for information about major and careers

If the user answered no:

• User is unsure about his/her career paths, so we have a questionaire of 8 questions to help them. Questionaire asks about interests and personality to decide which field he/she is best suited for.

I believe that this is an improvement from our previous design because we consider cases where the user may already have some sort of idea of what career path they want, as well as those who don't know. The career choices split into STEM and non-STEM help narrow down possible major choices. We were also able to have more specific questions about their personality and interests, and provide links about major and career information.

GPA Calculator

• Color for GPA box needs to be changed

Our original design had the GPA box in a red-colored box, but since red is usually associated with failure in school, we changed it to a more neutral color.

• Users found it difficult to know which page they were on and what back what lead to

To make it more clear, we added in the page it would go to, next to the arrow.

• Can't edit or delete classes, terms, and assignments

Through our conducted user tests, we found out we didn't include a feature for users to delete/edit their terms, classes, and assignments. We considered adding pencil icons which would allow users to both edit and delete with just one click. However, we decided to go with a solution that we felt was cleaner and more familiar with users: a swipe left for more actions. We implemented this swipe to edit/delete terms, courses, and assignments on the points grading system.

In case this wasn't clear to the users, we added a protip animation in the beginning of the GPA Calculator.

However, the swipe function didn't work well with our weighted grading scale system, so we designed it. With this redesign, we require students to first add in categories separately. Then, users add in their assignments, and are able to edit and delete by swiping as usual.

Next Steps / Reflection

In the future, there are many upgrades to this app that could be made, for example, the major decider portion could include more information about the career field/jobs (ex. salary information) they could go into the suggested majors. Another idea would be to integrate the GPA Calculator with a calendar of due dates so it becomes an easy one stop place for all students to visit for their academic needs. Overall, this was a very fun project to work on, and I believe this app would become very useful for high school students to download if this app was developed and if there was a larger database collection of majors and careers.