Skip to content

Case Study: Iterative Design of a Custom Assessment Form

This case study walks through an iterative development process using Gemini's Canvas feature. The goal was to build an accessible, self‑contained assessment form with tri‑state switches for better user feedback.

1. Initial Problem & Vision

The original form came from a Retool app and had several issues:

  • Rendering Problems – It depended on external JavaScript that caused the form to flash briefly and then disappear when loaded outside Retool.
  • Limited Interaction – Switches were simple yes/no radio buttons and were often disabled, providing no clear feedback.
  • Styling Constraints – The layout felt generic and lacked responsive spacing.

The vision was a clean form with three switch states: Untouched (grey), Yes (green), and No (red).

2. Iteration 1: Enabling Switches & Basic Tri-State Concept

  1. Removed disabled attributes from the switch inputs.
  2. Added JavaScript to cycle a data-state attribute through unchecked, checked, and untouched.
  3. Applied initial CSS so each state showed a different background color.

Outcome: The switches were interactive and could move between three basic states, though the visuals still needed polish.

3. Iteration 2: Addressing Visuals

  1. Added box-shadow on the switch thumb to mimic the Retool appearance.
  2. Defined colors for each state:
  3. Untouched: grey track with muted thumb.
  4. Yes: green track with dark‑green thumb.
  5. No: red track with dark‑red thumb.
  6. Updated JavaScript to set these colors dynamically.

Outcome: Each state looked distinct and the thumb displayed correctly.

4. Iteration 3: Refining Thumb Position & Hover Effects

  1. Adjusted transform: translateX() values so the thumb aligned perfectly left, center, or right.
  2. Replaced the old brightness filter on hover with a subtle box shadow.

Outcome: The thumb moved smoothly and hover feedback was clear without hiding the switch.

5. Iteration 4: Layout and Spacing Adjustments

  1. Tweaked margins for headers and individual items to create breathing room.
  2. Positioned labels to the right of switches using flexbox.

Outcome: The form became easier to read with balanced spacing.

6. Iteration 5: Adding a Second Assessment Column

  1. Wrapped both assessment lists in a flex container.
  2. Allowed each column to share space evenly with a minimum width so they wrap on smaller screens.

Outcome: Sales and Marketing assessments appeared side by side without clutter.

7. Iteration 6: Adding "Start Assessment" Button

  1. Placed a clear call‑to‑action button at the bottom.
  2. Styled it with Tailwind classes for consistent color and hover states.

Outcome: Users now have a clear next step after selecting options.

8. Iteration 7: Full Customization

  1. Removed all external Retool CSS links.
  2. Consolidated required styles directly in the HTML <style> block.

Outcome: The form stands alone with no dependency on Retool, improving portability.

Conclusion

Using Gemini's Canvas feature to iterate allowed for continuous improvements and precise control over both functionality and aesthetics. The result is a fully interactive, visually distinct assessment form that can be embedded anywhere without external dependencies.

This Gemini Canvas case study illustrated how structured iteration transforms a rough form into a polished, accessible component. Building on Lesson 08 – Codex Code Quality Scans and Test Generation's focus on maintainable code, Lesson 10 – Gemini Canvas UI Design will delve deeper into crafting interface elements from natural language prompts.