Alicia-design exercise – 01

Student Management Re-design


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.


Design exercise






original class list
original (uncropped)


Screenshot 2024-03-22 at 3.48.53 PM


Initial Thoughts

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

Screenshot 2024-03-22 at 3.47.54 PM

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.

Screenshot 2024-03-22 at 3.48.17 PM
Screenshot 2024-03-22 at 3.47.58 PM

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.

Screenshot 2024-03-22 at 3.48.20 PM

Lo-fi Wireframes (2)

Screenshot 2024-03-22 at 3.48.22 PM

Lo-fi Wireframes (3)

Screenshot 2024-03-22 at 3.48.25 PM

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.
Screenshot 2024-03-22 at 3.48.28 PM


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

Screenshot 2024-03-22 at 3.48.29 PM

Re-designing: Class List


original class list


Screenshot 2024-03-22 at 3.48.45 PM

Final Re-design

Screenshot 2024-03-22 at 3.48.53 PM


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
Screenshot 2024-03-22 at 4.28.09 PM
Screenshot 2024-03-22 at 3.48.56 PM

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.

Screenshot 2024-03-22 at 4.28.14 PM
Screenshot 2024-03-22 at 3.48.59 PM

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.
Screenshot 2024-03-22 at 4.28.22 PM
Screenshot 2024-03-22 at 3.49.01 PM

Re-designing: Teacher Tools


original (cropped)


Screenshot 2024-03-22 at 3.49.12 PM

Final Re-design



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

Screenshot 2024-03-22 at 4.28.29 PM
Screenshot 2024-03-22 at 3.49.22 PM

Card visual

The card shows only three crucial information:

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

Other information has been relocated.

Screenshot 2024-03-22 at 4.28.38 PM
Screenshot 2024-03-22 at 3.49.30 PM

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).

Screenshot 2024-03-22 at 4.28.44 PM
Screenshot 2024-03-22 at 3.49.32 PM


  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.
Screenshot 2024-03-22 at 4.42.52 PM
Screenshot 2024-03-22 at 3.49.34 PM

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.

Screenshot 2024-03-22 at 4.28.58 PM
Screenshot 2024-03-22 at 3.49.35 PM

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.
Screenshot 2024-03-22 at 3.49.37 PM

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.

Screenshot 2024-03-22 at 4.47.27 PM
Screenshot 2024-03-22 at 3.49.40 PM


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

Screenshot 2024-03-22 at 3.49.43 PM

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.

Screenshot 2024-03-22 at 3.49.45 PM

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.
Screenshot 2024-03-22 at 3.49.48 PM

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’.
Screenshot 2024-03-22 at 3.49.53 PM