Optimizing QPU Data Access
Description
In this project, I proposed a new information hierarchy, visual design, and display logic for system tiles to enhance usability and optimize space in the main console view.
Key challenges:
Limited space efficiency – System tiles occupied too much essential space in the main console, reducing visibility for job-related tasks.
Confusing expansion behavior – The way tiles expanded did not follow best UX practices, leading to usability issues.
Restricted hardware information – The displayed data was limited to characterization details, missing critical insights for users.
Old layout of the backends tiles
Expand behavior of the old design of the backends tiles
Main Goals
Optimize layout – Reduce the footprint of system tiles while maintaining accessibility to key information.
Improve interaction patterns – Introduce a more intuitive expansion behavior that enhances user experience.
Enhance data visibility – Extend the hardware information beyond characterization data to provide more useful insights.
Improve system awareness – Ensure users can:
Identify which systems they have access to.
Easily compare available systems.
Learn how to best utilize each system.
Access calibration data with timestamps.
Check system availability and estimated wait times.
Stay informed about planned maintenance.
Find pathways to access systems outside their current plan.
Objectives
Enhance information readability and hierarchy – Ensure system details are structured in a way that allows users to easily compare options, determine the best system for their needs, and understand how to utilize it effectively.
Integrate AQ (Algorithmic Qubits) and educational resources – Provide users with direct access to AQ insights and relevant learning materials to help them make informed decisions.
Improve data organization – Segregate characterization data to prevent information overload and enhance clarity.
Clarify system accessibility – Avoid misleading or confusing signals about which systems users can access.
Create intuitive expand/collapse behavior – Clearly indicate that system tiles can be expanded for additional details, improving discoverability.
Facilitate deeper learning – Ensure users can easily find additional resources for advanced features that require more context to be fully understood.
Indicate access limitations with clear CTAs – Visually highlight restricted systems and provide a straightforward call-to-action for users to request access.
Enable real-time system monitoring – Allow users to quickly assess system availability, estimated wait times, and upcoming planned maintenance.
JTBD
As a user, I want to access QPU and Simulator details within the cloud console to make informed decisions about system usage.
As a user, I want to see which QPU and Simulator systems I have access to so that I can determine my available options.
As a user, I want to review QPU and Simulator details to better understand the systems before running my jobs.
Solution
We decided to move backends to its own page allowing for more coherent navigation and also to allow the jobs page to scale. The backends page has 2 tabs layout that allows users to explore backends: QPUs and Simulators. The new card system is scalable meaning it can accommodate more information in the future about the backends.
User can clearly see which systems they have access to, which systems are available and dive deeper into the specs of each. Accessing features for each QPU is interactive now. Users can for example request a reservation for a system from the expanded card.
System Tiles on Mobile
Design decisions
Ordering of QPU Tiles by AQ Score
QPU tiles will be ranked by AQ (Algorithmic Qubits) score, with the highest AQ systems appearing at the top.
This ordering will be applied regardless of the user’s access level to ensure consistency in system comparison.
Tie-Breaker for QPU Tiles
If multiple QPUs have the same AQ score, they will be ordered numerically (e.g., Aria 1 before Aria 2).
Ordering of Simulator Tiles
Simulators will be ranked by qubit count, with those supporting the highest number of qubits appearing first.
If two simulators have the same qubit count, the ideal simulator will be shown before the noisy simulator to prioritize accuracy.
Design process
Beyond the standard design process, this project required extensive collaboration with stakeholders across engineering, product management, and marketing.
The backend tiles effort was closely aligned with an ongoing engineering initiative to centralize backend data, ensuring consistency across systems.
Marketing played a key role in defining what system data should be publicly available, shaping the information displayed.
Product managers (PMs) were involved to reassess which data was truly valuable to users, ensuring that only relevant and actionable information was prioritized.
Collaboration involved working with shared spreadsheets, where multiple stakeholders contributed input and approvals.
Any unimplemented logic was documented in JIRA tickets to ensure visibility and potential future execution.
This cross-functional effort ensured that the final design was both technically feasible and aligned with business and user needs.
Data alignment spreadsheet
Tooltip content alignment spreadsheet
Learnings and improvements for the future
Scope Management & Planning
The project scope expanded significantly, leading to a large PR with too many items. In the future, breaking down tasks into smaller, manageable chunks will help streamline development and review cycles.
The dev team has the ability to push back and suggest breaking items into smaller pieces, which should be encouraged earlier in the process.
Extensive QA should not be included in the original scope—if QA takes longer, a separate ticket should be created for it.
More detailed acceptance criteria should be written during the planning phase to better estimate the work scope.
Well-defined acceptance criteria will also improve task breakdown and reduce scope creep.
Unexpected Dependencies & Process Refinements
The system tiles work unexpectedly led to additional tasks, such as refining the style guide and creating component guides, which were valuable but unplanned.
The need to remove elements from “My Jobs” was not initially accounted for and required additional tickets. This highlights the importance of mapping dependencies early in the design phase.
Backend work should ideally come first, as front-end changes often depend on backend updates (e.g., API connections).
Design Consistency & Style Guide Adherence
Any deviations from the existing system tiles style guide —such as changes in color, fonts, or components—should be documented.
The style guide and component guides should be continuously updated to reflect changes and ensure design consistency.
QA & Testing Improvements
A long QA feedback list emerged, revealing gaps in testing. More structured testing and early validation could help identify issues sooner.
Testing user accounts with different access levels would make the process smoother.
Production and staging accounts should be available for testing.
Feature Flagging & Version Control
Instead of deleting old features from the front end, use feature flagging to hide them while maintaining version control.
Data & Analytics
Talk to marketing to better track user interactions.
Investigate how often customers return to the console to inform UX improvements.
Complex Image Handling
Handling images within system tiles was more challenging than expected. Future projects should allocate more time for solving image-related design and technical challenges.