The problem

• Dense instructor views. Lists and reports carried a lot of data with little hierarchy, so finding one student or one result took too long.
• Fifteen reports, fifteen ways to filter. Each report type had grown its own filter logic.
• Specs drifted in the build. What shipped did not always match Figma, and accessibility was left to interpretation.

My role

Senior Product Designer, designing the new interface with Ethan Watson. I take features from requirements to Figma specs and prototypes, design SIMnet-specific components on top of Sullivan, write the accessibility annotations and run Design Acceptance Testing (DAT) against staging.

Key decisions

1. A Users List that explains itself.
   One clear rule for registered vs. unregistered students, refined with instructor feedback.
2. One filter panel for every report.
   A single filter pattern in My Reports that covers all 15 report types, plus the Content Snapshot Report views.
3. Zero states are part of the design.
   Summary Cards define color and empty-state behavior up front, so an empty result reads as information, not a bug.
4. Design QA before release.
   DAT audits compare Figma with staging, so gaps are fixed before students see them.
5. A redesign from scratch. Together with Ethan Watson, a new information architecture and new screens for every area of the product: courses, assignments, gradebook, reports, content, users and admin.
6. Product components on top of Sullivan. Where the design system stopped, we designed SIMnet-specific components, like the data grid and tree grid, with every state documented.

Courses

The new home for instructors. Summary cards surface what needs attention first: integrity violations, idle and inactive students, credentials issued. Every course links straight to its snapshot, assignments, gradebook and student view.

Assignments

Units, folders and assignments in one tree grid, with dates, LMS pairing and visibility at a glance. Bulk Updates changes scheduling, details, gradebook options and restrictions for many assignments at once.

Gradebook

Every student and every assignment in one grid, with status icons and a legend, column filters, and bulk grade updates for the whole class.

Reports

Saved reports in one place, and a single filter panel that works the same way for every report type.

Content

SIMbooks, lessons, exams and SIMpaths share one pattern: a list to find and assign content, and a snapshot that shows where it is assigned and what instructors can do with it.

Users

Students and instructors managed from one place: search, filter, import, archive, and a create form that includes accessibility settings like extended time.

Admin and profile

Account settings, campuses and credential branding for administrators, and a profile page that shows each user exactly what they are allowed to do.

Components built for SIMnet

Sullivan gave us the foundation; SIMnet needed more. We designed product-specific components like a data grid and a tree grid with every state, filter and action, each documented with its accessibility pattern.

Accessibility in the spec

Every screen ships with annotations for landmarks, headings, focus order and ARIA, plus a reflow version at 400px.

Impact

The new SIMnet interface is live. Instructors find students and filter reports with the same patterns across the product, and engineering receives specs with accessibility already defined. McGraw Hill’s own support guides now walk instructors through the new Courses List, Course Snapshot and Course Header (see them here).

Reflection

Working on the product right next to its design system changed how I design features. Problems found in SIMnet became components in Sullivan, and every improvement to Sullivan made the next SIMnet feature faster and more consistent.