The Challenge

In early 2019, bettermarks—an AI-powered adaptive math learning platform—faced a critical problem: mobile usage was growing rapidly, but none of our users could solve function plotter exercises on mobile devices. The UI had been designed exclusively for desktop, leaving thousands of mobile users unable to access key content.

The core constraint: Users needed to interact with controls while simultaneously viewing real-time graph changes, extremely difficult on small screens.

Research & Requirements

Data Analysis

Using Mixpanel, I analyzed device and screen resolution data, establishing a minimum target of 320×480 pixels (iPhone 4 equivalent). This device was still widely used in 2019, particularly in regions where newer phones were less affordable.

Design Requirements

• Graph and controls must be visible simultaneously (no scrolling/navigation)
• Support single and multiple curve inputs with color-coding
• Maintain identical functionality to desktop version (including error/inactive states)
• Adaptive layout: compact for small screens, extended for larger displays

Design Exploration

I developed multiple approaches centered on dropdown-controlled sliders that could display alongside the graph. Each iteration was tested with colleagues and students to identify which solutions met all requirements.

Final Design

The final design used a menu toggle + compact slider system that adapted based on available screen space. Devices with larger screens used an extended version, while smaller devices displayed the optimized compact interface.

Key features:

• Progressive enhancement for different screen sizes
• Color-coded inputs with clear differentiation
• Complete error and disabled state coverage
• Flexible system supporting various exercise types

Developer Handoff

I created comprehensive specification documentation including measurements, spacing rules, interaction states, and implementation guidelines to ensure consistent execution.

Outcome & Impact

The redesigned gizmo successfully launched in [quarter/year], enabling mobile users to complete function plotter exercises for the first time.

Key results:

• Supported devices down to 320×480px, making the feature accessible to the full mobile user base
• During testing with 12 students on site, all successfully managed to solve the exercise, 9 of them on first attempt
• Established a responsive design pattern documented for future mobile optimizations

Note: Detailed post-launch analytics are not accessible as I’m no longer with the organization.

Key Takeaways

• Established my design foundation at bettermarks by mastering the product’s complexity, internal design standards, and the complete workflow from concept through developer handoff—skills that shaped my approach to all subsequent projects.
• Learned to prioritize user validation over personal preference. Testing revealed that my preferred design wasn’t always the most effective solution, reinforcing the importance of letting user feedback drive decisions.
• Discovered the value of early usability testing. Testing concepts sooner in the process reduced wasted iteration time and led to more confident design decisions.