Smartwork Redesign
Impact
students will now have access to Smartwork via mobile and tablet devices
WCAG 2.1 AAA accessibility compliance achieved across all redesigned components
Norton's
most widely used product with expansion of redesign
Overview
Smartwork is W.W. Norton's online learning assessment tool used by over one million college students and instructors. Despite its widespread adoption, Smartwork was only accessible via desktop, limiting when and where students could complete assignments.
Students, however, increasingly expect mobile-first experiences and all key competitors offer native mobile apps. I needed to make Smartwork fully responsive and accessible for our user base while working within existing design constraints.
My Role
I led the UX design for making Smartwork fully responsive and accessible, covering the Student Assignment Homepage, Question Player, and all 13 question types. I maintained existing functionality while improving accessibility, usability, and visual design.
Throughout the process, I collaborated closely with engineers and product managers. They shared design constraints, and I created detailed UI specs, designed prototypes in Figma, and served as the point person throughout development to answer any questions and stay close to the implementation.
Problem
Over 1 million students and instructors relied on Smartwork's desktop-only experience, but the platform wasn't accessible or mobile- friendly — putting us behind competitors who already offered native apps. Additionally, our accessibility team and product manager received requests from colleges to address this.
The challenge was making Smartwork work across devices without disrupting familiar workflows for 1M+ existing users, all while working within a legacy system with limited design flexibility.
Research & Discovery
To start the project, I audited over 100 screens — every student-facing interface in Smartwork — to identify what required updating.
In this discovery work, I identified all scenarios and question types that raised accessibility, visual design, or responsiveness concerns and flagged the opportunities to improve them.
Design Challenges
01 / Managing Project Scope
The project scope was large: 100+ screens, 13+ question types, and multiple user flows—all on a legacy platform with limited flexibility. I needed to break this down into manageable pieces and plan them sequentially so students could keep using Smartwork while updates were being rolled out.
Solution
I organized the project into 6 phases:
Assignment Homepage & Question Player (students need these to access everything)
Adaptive question type (complex question type with graphs and tracking)Basic question types (established patterns I could reuse)
Text-heavy questions
Equation editors
Drag-and-drop questions (most complex question types to redesign)
This approach let me launch updates gradually without disrupting students, and I could reuse design decisions from early phases across later ones.
02 / Making Busy, Outdated Screens Intuitive and Responsive
Smartwork's screens were cluttered with unnecessary icons, visually outdated, and didn't work on mobile or tablet. Additionally, many elements weren't accessible—screen readers couldn't navigate tables, touch targets were too small, and color contrast didn't meet standards. I needed to modernize the interface, improve usability, achieve WCAG AAA compliance, and keep the experience familiar for 1M+ existing users.
Solution
To decide what to update, I established clear criteria: Is it accessible? Responsive? Using updated components? Intuitive? If an element didn't meet these standards, I changed it. Everything else stayed the same.
I removed unnecessary visual elements across all screens, updated all components to our design system, and worked with our accessibility team throughout the project.
On desktop, I kept familiar layouts but cleaned up spacing and visuals. On mobile and tablet, I converted complex elements like tables into card-based lists with sorting dropdowns, giving users the same control across devices.
03 / Improving Accessibility in a Legacy Product
Smartwork wasn't built with modern accessibility standards in mind, and our accessibility team was receiving requests from instructors about inaccessible question types. I needed to ensure all 13+ question types, the Assignment Homepage, and Question Player met WCAG 2.1 AAA standards while maintaining how students learn from each question.
Solution
I worked closely with our accessibility partner throughout the entire project, reviewing each phase before moving forward. After analyzing all existing screens, I identified specific accessibility concerns across question types and prioritized solutions that would work for screen readers while maintaining how students learn from each question.
The accessibility improvements included:
Increased touch targets for mobile and tablet to meet minimum size requirements
ARIA description labels for all interactive elements, ensuring screen readers could navigate every question type
Improved color contrast ratios across buttons, text, and visual indicators
Keyboard navigation for all interactions, not just mouse/touch
Focus states that clearly indicated where users were on the page
Accessible modals and tooltips that worked with assistive technology
For each question type, I considered how screen reader users would experience and answer it independently. For a few examples; all text fields needed clear input labels, multiple choice needed proper button labels, and image-based questions needed alt text that provided context without giving away answers.
04 / Redesigning Complex Question types
The hardest question types to redesign were Sorting, Ranking, and Labeling—all of which relied on drag-and-drop functionality. Drag-and-drop doesn't work with screen readers or mobile devices, but I needed to keep the same functionality while making it accessible and responsive. These question types also had different scenarios depending on the content—sometimes there were more labels than answers, sometimes fewer—so the solution had to be flexible.
Solution
I replaced drag-and-drop with dropdown menus. Instead of dragging items, students selected answers from dropdowns next to each label. This worked with keyboards, screen readers, and all devices.
The real challenge however was handling all the different scenarios. I added a "None of the Above" option for when there were more labels than answers, and worked with developers to make sure the dropdowns could handle every edge case. Testing with our accessibility partner confirmed the solution met accessibility standards while giving students the same learning experience.
Visual Design
I updated all visual elements to Norton Design System standards, including buttons, modals, form fields, navigation, icons, and typography.
Key updates:
Removed outdated designs and unnecessary icons
Cleaned up spacing and padding for better readability on mobile
Increased touch targets to meet accessibility requirements
Updated color contrast for accessibility standards
Modernized remaining icons and visual indicators
The final designs maintained Smartwork's familiar look and functionality while feeling cleaner and more modern across desktop, tablet, and mobile.
Handoff
This project required 12 separate handoffs to developers. As you can see in the images below, each handoff included many detailed annotations as well as a summary document explaining all the changes.
I always met with PMs and developers to walk through the interactive prototype, review the summary, and explain the annotated designs.
During production, I stayed involved throughout development—answering questions, reviewing Jira tickets, and troubleshooting bugs. As sections launched, I checked the final implementation to make sure everything matched the designs.
Outcomes & Impact
The Assignment Homepage is live for all 1M+ users, with remaining sections launching in June 2025. Based on this redesign, Norton decided to expand Smartwork to additional disciplines, positioning it to become their most widely used product.
Key Deliverables:
12 comprehensive design handoffs
13+ question types redesigned for mobile, tablet, and desktop
Full WCAG 2.1 AA accessibility compliance
Assignment Homepage, Question Player, and all student-facing screens updated
Detailed Figma annotations and design summaries for each handoff
