Screen Shot 2018-11-15 at 8.34.29 PM.png

Quantum Composer

Design exploration of Composer for tablet devices

Design exploration of Composer for tablet devices

Quantum Composer

Design Research / UX Design (2018-19)

The second generation of the 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.

Initial User Feedback + Goals

Original Composer layout and functionality (as of June 2018)

Original Composer layout and functionality (as of June 2018)

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

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.

User testing layouts 1-3, and the final design proposal

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” — has been filed in both Europe and the United States as of November 2018.

Platform Integration + Launch

In early 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 2018 Composer designs into this new web experience.

The visualizations created as part of the 2018 Composer designs were successfully integrated into the 2019 experience available online today

I updated the layout and visuals 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 May 2019.

Visit the following link to more about the launch of the new IBM Q Experience, and try out the new Composer: