Design exploration of Quantum Composer for tablet devices
Quantum Composer
Team | Emerging Technologies Experiences Team, IBM Research
Responsibilities | Design Lead — User Research, Content, UX Design, Visualization Design
Product Overview
The second generation of IBM Research’s Quantum Composer interface re-imagines how quantum programs, or circuits, are created, previewed, and run on both simulators and real quantum hardware. I led a small team of designers and developers to propose a radically new design and system architecture for the tool, a web-based graphical interface that lets anyone write quantum assembly code and run that code on a real quantum computer via the cloud.
Challenge
While the original version of the Quantum Composer was an incredibly successful proof-of-concept demo, both target audiences — quantum researchers and educators — had outgrown its limited functionality. A radical overhaul was needed to incorporate next generation functionality, including real-time visualizations, a hybrid GUI / coding environment, version control, and the ability to preview and debug quantum circuits.
Original Composer layout and functionality (as of June 2018)
Initial User Feedback + Goals
The original Composer interface was created in 2016 to test if people would find value in creating quantum programs online for a 5-qubit machine. Thousands of people from a variety of backgrounds have used the tool and provided a wealth of user feedback —
Researchers working with the tool wanted better options for previewing, customizing, and running their experiments
Educators (as well as students and self-learners) expressed the need for better methods to understand circuits as they were learning to build them
While these goals initially may seem at odds, both groups of users in fact wanted a similar experience — one with easily discoverable functionality and features, with methods of previewing and debugging their programs before submitting them to a quantum computer.
System Architecture
I collaborated with the team’s lead developer to create a human-centered system architecture, allowing us to streamline the choices a person makes when working with the tool, while planning for significant changes to the tool’s backend code.
User-centered system diagram, highlighting the mandatory and optional choices made during circuit creation, preview, and submission
User testing layouts 1-3, and the final design proposal
This exercise allowed us to advocate for fundamentally new Composer experience with functionality that met user needs, including —
Real-time quantum state visualizations while creating circuits
A hybrid coding environment where users can drag-and-drop elements or type assembly code
The ability to preview and debug circuits prior to running them
The ability to compile and run circuits on multiple quantum devices and simulators
Robust version control for past experimental work
Next, I developed a series of interactive prototypes and tested them with researchers, students, educators, and new users, iterating on the design to develop a tool that was robust but not overwhelming to new users.
Final Design Proposal
After several iterations, I developed final layout templates for the Composer’s four main views — the composer workspace, the preview modal, the experiment archive, and the past experiment. Based on these templates, I developed a 200 screen clickable prototype of all major user flows, to workshop interactions and technical feasibility with development, as well as to present to the IBM Q leadership team for validation.
In addition to the prototype, I also developed a prototype of introductory user guides and concept cheat sheets, to serve as a guideline for what onboarding should be created when the Composer goes live, as well as to explain the Composer’s functionality internally to a broader audience.
Final Composer layout templates (workspace, preview, archive, past result)
Screens from comprehensive UX prototype
Patent Submission
In parallel to the development process, I drafted a disclosure document and led communication efforts with the IBM legal team to file a utility patent based on the new Composer system diagram and new feature interactions indicated below. It was deemed a Search 1 priority by IBM Legal and slated for immediate filing. The patent — “Tool for understanding and facilitating the construction of quantum computing programs” — was granted in February 2023.
Platform Integration + Launch
In 2019, the IBM quantum computing team underwent a major overhaul of their online experimental tooling, in order to merge their disparate quantum applications into a single tool, called the IBM Q Experience. To aid this effort, I worked with the quantum team to integrate my Composer designs into this new web experience.
The visualizations created as part of the Quantum Composer designs were successfully integrated into the experience available online today.
I updated the layout and visual design of the Composer to better fit the new web experience, while developing new designs for a new in-tool Results Archive, given that it would need to surface data from multiple applications. The design team successfully lobbied for and incorporated the user research-motivated design changes described above into this new experience, which went live in 2019.