Student Management Re-design

GOAL

The goal of this redesign was to modernize a section from one of the company's main products. The design was outdated and difficult to navigate for first-time users. Its complex nature served as a challenge as it encompasses various classroom management capabilities and functionalities for monitoring student activity. My overarching objective was to seamlessly integrate these features and ensure the intuitive utilization of tools necessary for efficient classroom management. This design exercise was my application to the company and has led me to my acceptance. I am now in charge of designing for this product line along with 2 other products.

PROJECT TYPE

Design exercise

TOOLS

Figma

YEAR

2022

Original

Re-design

Ideation

Initial Thoughts

A list imagining that I was a teacher using this product.

Break into Tiers

With the overall target audience, objective, and design goals in mind, I categorized each section into tiers to better visualize a design solution.

Lo-fi Wireframes (1)

Freehanded several drafts of the screen containing students and devices.
After each idea, afterthoughts were listed and then implemented into the next draft.

Lo-fi Wireframes (2)

Lo-fi Wireframes (3)

Tool buttons Redo

Tried to rethink button logic by combining certain actions and simplifying tool usage.

1. ‘Lock’ works for both app and site, depending on what the student is currently viewing.
2. ‘Lock’ and ‘Release’ will exist as one button.
3. ‘Airplay’ and ‘End Airplay’ will exist as one button.

Checklist

While drafting, I made a worded checklist of what to do. This checklist was constantly updated and modified throughout the entire process.

Re-designing: Class List

Original

Wireframe

Final Re-design

Filtering

As teachers typically teach only a few classes throughout the year, I found that the search bar wasn’t necessary. Instead, I created filtering options that change the viewing order of the classes based on the teacher’s preference.

The filter options would be as follows:

1. Scheduled Order
   
2. Alphabetical Order
   
3. Recently Edited

ORIGINAL

Other Tools

As class tools are not often used, they were recreated as an options dropdown menu. The option to ‘Edit’ the class information has also been added.

ORIGINAL

Hamburger menu

1. To simplify the main screen for monitoring, the left navigation bar has been made into a hamburger menu.
   
2. The original header containing the account options, the option to switch to Nucleus UI, and Help have also been placed here.
   
3. Teacher Tools and student details have been combined into a new tab titled ‘Classroom Dashboard’.
   
4. A ‘Settings’ tab has also been created. The school location information would be accessible and editable here.

ORIGINAL

Re-designing: Teacher Tools

Original

Wireframe

Final Re-design

Header

Applied hierarchical typography and simplified the header for a more simpler, modern feel.

ORIGINAL

Card visual

The card shows only three crucial information:

1. Student
2. Device
3. Icon of current app / site

Other information has been relocated.

ORIGINAL

Glance Monitoring

To allow the teacher to monitor all students from a glance, the icon of the active app/site is shown on every student’s card (real-time).

ORIGINAL

Options

1. The option to Remove from Class has relocated to the new Options dropdown menu.
   
2. Additionally, the option to Edit, Duplicate and View More Information has also been added.
   
3. Tier 3 information such as the student/device’s serial number, last sync date, and other information is accessible via the More Information menu item.

ORIGINAL

Add Student

As it is not often that teacher have to add students/devices, the option to add/delete a student has been removed from the tool bar. It is now shown as a single card at the end of the card collection with lower visual presence.

ORIGINAL

Individual Monitoring

1. The teacher is able to view a student’s screen of their choice in real-time.
   
2. This window is shown to the right of the program’s screen accompanied by relevant teacher tools. It shows the student’s screen, the student’s name, as well as the device’s name.
   
3. Typographical hierarchy and sizing have been considered here for a comfortable monitoring experience and obtaining just the necessary information.

Individual Monitoring Tools

Only the tools that are relevant to the current device’s status will be shown here.

For example, if the app or site is already locked, the option to ‘Lock’ will not be shown. The option to ‘Release’ will be shown instead. This allows the tool experience to be more intuitive and direct.

ORIGINAL

Multi-Select

Single-clicking onto several cards or drag-selecting will allow for a multi-selecting function.

Multi-Select Viewport

As each additional card is selected, the cards will visually stack up in the right-side viewport– giving a clear indication to the teacher that multiple cards have been selected.

A simple overview of the selected devices and apps is also shown at the bottom.

Multi-Select Options

1. As multiple statuses of each device may exist in the group of selected student cards, all options for Teacher Tools will be shown.
   
2. The tools are shown in an organized way, with each action type in its own row.
   
3. These tools will serve as master actions to override the status of all devices in the selected group.

Flow Change

1. The system ideally would allow teachers to input the schedules of each class into settings.
   
2. Therefore, depending on the date and time, the relevant classroom dashboard will be automatically shown as the opening page (without the class selecting precursor).
   
3. If the teacher wants to open a different class despite the current date and time, this option is available via the hamburger menu item ‘Classes’.