Email:

tianyinglyu@gmail.com

Email:

tianyinglyu@gmail.com

tianyinglyu@gmail.com

QFit

QFit is an analysis software that helps physicists characterize superconducting quantum devices. I collaborated with the Northwestern University Koch group and served as the sole UX designer on the project. The work was recognized with the Core77 Design Awards 2024 – Notable Apps & Platforms, selected by an international panel of design leaders from a global pool of entries spanning top studios, companies, and independent designers.

Responsibilities

I served as the sole UX designer, responsible for all UX flows and layouts. I created wireframes, questionnaires, and interview guides, and navigated ambiguity through research, personas, testing, and iteration. From 0 to 1, I led the end-to-end product design process.

Client

Koch Research Group at Northwestern University

Timeframe

2024

Category

Analysis tool

Introductory Video

Problem

Quantum computing holds transformative potential, but progress is constrained by a critical bottleneck: hardware development. A key step in this process is device characterization—precisely determining the parameters of a manufactured superconducting circuit.

Device characterization is highly time-consuming, so I was asked to help create a tool that streamlines this workflow.

User Persona

Avatar of the website author

Joseph

Background

Role

PhD on Superconducting quantum devices | Advanced data analysis in Python/Matlab

Age

28

Skills

Familiar with Jupyter and Python

Environment

Works in a shared university lab with graduate students and postdocs

Primary Goal

Find the correct parameters required for building superconducting circuit device

Motivation

Publish impactful results

Motivation

Work hours

Often works in bursts around experiment and simulation schedules (may check data late at night)

Work style

Often multitasking as they simulate, de-bug, and process data

Decision-making

Data-driven, prefers tools that show raw numbers alongside plots

Painpoints

Mismatching results

Typically, the final parameters required and the initial values in the model differ up to

20%

Time-consuming iterations

Physicists often face friction when iterating on results to close the initial ~20% gap

Time-consuming iterations

Each research group must invest significant coding effort to build a pipeline for this process

Define Success

Success means enabling users to streamline their iteration process by following a clear, structured pipeline rather than building one from scratch

We pinpointed these core steps to achieve the goals

1. Establish a pipeline → Provide a structured workflow that users can adopt without building their own

2. Step-by-Step Navigation → Guide users through the process in order, helping them focus on one task at a time

3. Easy Comparison → Simplify parameter comparisons to reduce friction during iteration

Flow Chart

After mapping out the process of finding the real parameters, I distilled the workflow into 5 main steps, including 4 steps that can be integrated inside QFit.

For most use cases, a single integrated workflow would be ideal. However, our target users—trained physicists—are already accustomed to working in Jupyter, an open-source environment for writing and running code. Fully embedding Jupyter into QFit would have been too costly, so we instead defined Step 0 of the workflow as creating a model in Jupyter, then importing the result into QFit for further characterization.

P0: Initial barebone

The primary visual design is in dark mode since users mainly work in-door under low glare environment day and night.

4-tab structure

I organized the 4 steps into a 4-tab navigation, with each tab representing one step.

The 4-tab structure helps users to focus on one thing at a time and therefore reduce their cognitive burden. The navigation tabs also help users to understand the sequence and have less frustration by knowing where they are in the entire process.

P1: Smooth Out Iterations

Pre-fit

During pre-fit, users can tune parameters of the circuit model with sliders and see the transition curves predicted by the model.

Fit

In this step, users can use computers to automatically fit parameters by minimizing the mean squared error between the predicted transitions and the extracted features.

The Iteration Loop

From Pre-fit to Fit is exactly when users often iterate multiple times in a loop to achieve the most accurate result.

By dividing the interface into six sections—each dedicated to a single functionality—and keeping this structure consistent across the four tabs, users can quickly build a mental model of the app, reduce cognitive load, and navigate with confidence.

This consistency is especially valuable when users frequently switch between Pre-fit and Fit during iterative workflows.

I also designed secondary buttons that let users quickly transfer data between input fields of the Pre-fit and Fit phases, reducing friction and making iteration easier.

Usability Test

I created a usability testing guide for my team, including a test prompt, questionnaires, observation protocols, and a post-session interview.

[2 mins] Greetings: welcome testers and brief explanation of the purpose.



[3 min] Task Introduction: present the testing prompt and explain the task.



[25 min] Task Execution & Observation: Allow the participant to work independently. Observe. Provide assistance only if they are severely stuck. Take detailed notes on points of confusion, errors, and hesitation.

[3 mins] Questionnaire: collect info about background, expectations, familiarity with Jupyter and Python, and how do they like each stage/sub-task [Scale of 1 to 5]

[30 min] Post-Test Interview: discuss users’ experience. Gather qualitative feedback on usability. Ask follow-up questions.

Interview Questions

What are the 3 things you like/dislike most about the experience?

  1. What was the most frustrating moment, and why?

  2. If there is a magic wand that can make anything happen in the process of completing the task, what is the top thing you want to achieve?

  3. What other (speculative) features would you like to see?

  4. Follow up based on observation notes.

Usability Testing Insights

4-tab structure effective

Users understand the incremental goals of each phase/tab and catch the CTA

PreFit–Fit loop validated

Users were able to iterate smoothly between stages.

Iconography confusing

Existing icons didn’t communicate complex scientific concepts effectively; users preferred established terminology.

Small controls unclear

Information hierarchy needs refinement. Some functions should be more discoverable or regrouped (guided by Fitts’s Law).

Need for multiple graphs

Users required the ability to view more than one graph per device characterization.

Final Design

From iconography to status

We removed the icons, since the scientific concepts they represented were too niche and subjective to be effectively communicated visually. Moreover, our target users were already familiar with the established terminology.

Instead, I used this opportunity to introduce step status indicators, helping users clearly track their progress through the workflow.

Graph

Support multiple graphs

Enabled users to view and compare several graphs at once, making the tool adaptable to more complex circuits.

Calibrated Axes Toggle

Added a toggle to turn calibrated axes on/off, giving users better control when evaluating data quality.

Secondary Controls

Folded secondary controls (e.g., slider ranges) into a collapsible menu and organized settings into a pop-up, reducing cognitive load and keeping users focused on primary tasks.

Clarify Functionality

Repositioned the “Result to Initial” button and added an arrow from source to target to clarify its functionality, making it distinct from the “Fit to PreFit” and “PreFit to Fit” buttons.

More Interfaces

Impact

Time measurements from user testing showed that QFit reduced the workflow duration by nearly

90%

QFit is currently available online and is open-sourced under BSD-3-clause license. This software is not for profit, because the development of the app is supported by governmental research grants, and part of the code is powered by Python library scQubits, which is also open-source under BSD-3-clause license.

Some of my other work

Back to top

Back to top

Let's create
something
together.

Hit me up if you have a project in mind or would like to chat

Back to top

Back to top

Let's create
something
together.

Hit me up if you have a project in mind or would like to chat

Back to top

Back to top

Let's create
something
together.

Hit me up if you have a project in mind or would like to chat