Redesign and Feature Enhancements - Graphing, Number line & Pad Tools

WebAssign
Redesigned the UX/UI of WebAssign's long-standing Graphing Tool, focusing on integrating and enhancing evolved features while maintaining the stability of its core educational functionality
WebAssign

Redesign and Feature Enhancements - Graphing, Number line & Pad Tools

Project Overview:‍
To modernize the user interface of WebAssign's core Graphing Tool, a foundational application used by students for over a decade, without disrupting its long-established, stable functionality.

The goal was to improve the usability and discoverability of existing and newly evolved features (like graphing circles, parabolas, and inequalities).
Role:
Wireframing
UX/UI Design
Touch Screen Interactions
Visual Designs
Tools:
Sketching (Pen/paper)
Adobe Photoshop & Illustrator
Balsamiq

designs solutions & Impact

— Strategic Enhancement over Overhaul: Focused the design efforts on streamlining the existing interface to accommodate feature evolution (e.g., improved plotting and shading capabilities) rather than executing a high-risk, complete redesign.

— UX Modernization: Provided a refreshed interface to ensure the tool's appearance and interaction patterns met modern standards, improving the overall student experience with a product core that has served users for years.

— Feature Discoverability: Redesigned key interaction flows to make advanced features (like plotting specific shapes or managing inequality shading) more intuitive and discoverable for students, aligning the UX with the current capabilities demonstrated in online tutorials and support resources.

version 1

Option which allows an editing panel on the points interaction.
Mockup

version 2

Option which allows editing points from a sliding side panel.
Mockup

Pad tools

— The "pad tools" are answer entry palettes for creating formatted responses, with common ones being mathPad (for mathematical expressions), chemPad (for chemical notation), and calcPad (for specific math expressionUse
Activation: When you click the answer box for a question that uses a pad tool, a palette of buttons appears.

Entry: You can use the buttons on the palette or type using specific keyboard shortcuts.

Formatting: The tool automatically formats your entry into the correct notation. For example, typing pi and using the function button might display πpi𝜋.

Preview: Some tools, like chemPad, have a preview pane that shows how your answer will be formatted before you submit it.

Support: The availability and specific functionality of these tools depend on the assignment, which is set by the instructor. 

chempad

Users can enter chemical notation, such as formulas, equations, and reaction arrows. It can include features like subscripts, superscripts, and chemically aware feedback.
Mockup

calcpad

Users can enter answers using calculator notation, featuring expandable groups of buttons for operations, trigonometry, and other functions.
Mockup

mathpad

Users can use the tool's buttons or type to enter answers, with groups of buttons for operations, functions, and variables.
Mockup

physpad

Users are displayed buttons for physics notation like the Planck constant (hhℎ-bar) and other special symbols.
Mockup

number line tool

— The NumberLine tool provides a direct-manipulation interface, allowing students to efficiently input graphical solutions by dragging and dropping elements onto the number line.

Design

Users can include graphing points, lines, and intervals using a set of tools, or dragging labeled points to the correct location.
Mockup