Web App



Administrators of a small junior high school need a way to enroll and manage students attending school. Parents would also like to be able to keep up with the progress of their child in school.

My Role

I was assigned as the UI/UX designer for this project. After briefly discussing certain requirements needed, I was given 5 days to research, implement the features, interactions, and visuals.


Create an app that can be used on both a computer and mobile phone while allowing the administration to add students and assign them to a teacher and class. Each enrolled student will later be added to a teachers roster when finalized. Additional features will include an overview of assigned classes, teachers, and calculated GPA for parents to easily view and keep up with their child’s progress.

Go To Prototype

Student Overview
When creating this page I thought about what information a student administrator would need access to.

Some important things would be that they would need the ability to see which students are enrolled, how many classes they are in, and what classes they are in specifically.

To achieve this I presented each student as an individual list item that would allow the administrator to get an overview in a quick glance.

I also included a search bar to simplify the process of searching for a student as the list grows longer.

In order to add a new student I put an add student button on the upper right side of the screen. Because this is one of the main actions that will take place, the button will be the most prominent element on the page.

Sort By

By default the students are listed in alphabetical order by last name since this is the most common way names are listed. I also added a sort feature just incase there was a situation a student needed to be found by their first name. This is a plan B just in case the user forgot the students last name.

Batch Delete

I added a simple interaction for batch deletion if it is ever necessary for a student to be removed from enrollment.

Enrolling a Student

When a user clicks the add a student button. They are presented with this modal allowing them to input a students name and select each class they will be added to.

I wanted this process to be done in the least amount of steps possible so I created the ability for a user to add a student and assign multiple classes within one instance.

Once a subject is selected in the dropdown all teachers in the system will be filtered out and only the teachers within the selected subject will show in the adjacent teacher dropdown. This will make finding an exact class a quicker process.

To avoid having a user unknowingly select a class that is already full, I added information within the teacher dropdown showing the current student enrollment.

Success Confirmation

I added this screen to provide feedback that a student was successfully enrolled and added to the roster.

Student Profile

A students profile will show their total GPA and also let the administrator know what class the student is already enrolled in and what required classes are missing. I did this by providing a straight forward check list in addition to the percentage of enrollment completion. Again, the goal was to make these pages easy to look through and find out information a quick as possible.

Go To Prototype