top of page
Redefining tutorials on IBM Quantum’s new learning platform
09/23: My MVP designs are officially launched for IBM Quantum Summit 2023! Explore new Tutorials catalog
Overview
Project Background
In 2023, IBM Quantum undertook a significant cross-functional endeavor called “One Experience” (1XP), an effort to merge tools, content, and resources into a unified platform.
As part of this initiative, the role of Tutorials within the Learning Platform was examined, with a desire to incorporate user feedback into the decision-making process.
My UX research intern partner, Sanskriti, and I worked on this project during the summer to create and evaluate potential tutorial solutions, while adhering to the principles of design thinking.
Role
UX Design intern
Team
Sanskriti Deva (UX research intern)
Mack Blank (UX mentor)
Duration
May - August 2023
Mission
Establish how tutorials surface on the Learning Platform and beyond
Jules Murphy (UX manager)
Let’s define
What are tutorials?
IBM Quantum tutorials educate individuals about quantum computing.
They cover qubits, gates, circuits, and algorithms, offering hands-on experience for practical learning through interactive examples and exercises.
Pain points
Tutorial dashboard
Current experience
Unclear category names, lacking descriptions, make it hard to find specific tutorials, especially for beginners.
Tutorial console
Downloading tutorials and interacting with code snippets is not straightforward, as these features are hidden within the toolbar.
Example of quantum tutorial
As quantum advances quickly, tools change often, requiring continuous tutorial updates. However, there's no way to report code issues when discovered.
1
With that...
Here are our project goals
1
Understand what qualifies as a tutorial
2
Understand how users leverage tutorials as a part of their workflow
3
Propose how tutorials should be organized & filtered on the Learning Platform
4
Discover if there are any gaps in tutorial content/variety
UX begins with
Research
With my UX research intern partner, we conducted a heuristic evaluation to identify the strengths and weaknesses of our competitors and interviewed stakeholders to understand internal needs before our initial design phase.
Process
Timeline
Analyzing our competitors
Heuristic evaluation
We quantitatively reviewed 6 learning platform tutorials, rating them from 1 to 10 (least to greatest) using Nielsen Normal heuristics to understand the existing market.
IBM Quantum was rated towards the middle, showing room for improvement.
Assessing internal needs
Stakeholder interviews
And interviewed 7 stakeholders across Quantum product, research, and community teams to understand product needs.
We found a communication gap between teams regarding tutorial direction. Our research aimed to align perspectives on how to define tutorials within the Quantum platform.
Research breakdown
Here are our keys takeaways
Demo style tutorials
Tutorials are Demo style, focused on interactive code snippets helping users “learn by doing.”
2 main quantum users
Tutorial main users are:
-
quantum-curious beginners
-
advanced quantum researchers/developers
Outdated tutorials
How to keep tutorials updated amongst rapid advancements? How can we indicate update status?
Focus on what exists
Optimize the tutorial experience by reorganizing categories & highlighting great existing features.
Research playback to the team!
With that...
Our design explorations should include...
1
A streamlined content catalog with intuitive filters for finding relevant and useful tutorials.
2
Easy access to actions for integrating and customizing tutorials for all project use cases.
3
A feedback submission feature for broken code on all tutorial pages.
Before we start designing...
Let’s talk Carbon
I ensured I was well-versed in Carbon guidelines to maintain design consistency across IBM and quicken my design process.
Grid guidelines
Color tokens & text styles
Figma components
Process
Timeline
Ideation and iteration
Designing our screens
Once we established our content framework and I became familiar with IBM's Carbon Design System, I started brainstorming and creating wireframes.
Explorations
Tutorial catalog
💡
What we selected
Option 2 was favored by users, but custom illustrations for each tutorial were not feasible. Option 3 was favored by the team, but not viable for MVP. We opted for a blend of all options, aiming for a mix of Option 2 and Option 3 for future release.
📍️
Option 1
Left menu: Add tags as filtering system
Tutorial card: Add helper text for category, title, and area tag
⭐
Option 2
Left menu: Add a combination of checkboxes and tags as filtering system
Tutorial card: Add related illustrations, title, short description, and area tag
✅
Option 3
Left menu: Add a combination of hover boxes and tags as filtering system
Tutorial card: Add title, short description, time, and area tag
Explorations
Tutorial page
💡
What we selected
Option 1 and 3 were equally favored by users. Option 1 was easier to implement, given the way content writers created tutorials on Jupyter notebook.
✅
Option 1
Main content column: Add ‘related tutorials’ section at the bottom of page
Right menu: Add ‘Download notebook’ and ‘Open in Quantum Lab’ actions and area tags
Option 2
Main content column: Add ‘Download notebook,’ ‘Open in Quantum Lab’ actions and area tags to the top and ‘related tutorials’ section at the bottom of page
⭐
Option 3
Right menu: Add ‘Download notebook’ and ‘Open in Quantum Lab’ actions, ‘related tutorials,’ and area tags
Affirming our design choices
User testing overview
We conducted usability testing with 11 internal users at IBM, selected from Quantum ambassadors and the global intern pool.
We all make mistakes...
As our first user testing attempt, we encountered some challenges but identified areas for future improvement:
1
We excluded the first three user tests in response to repeated feedback, due to substantial design changes made.
2
We initially used A/B/C/D testing but later switched to A/B testing after those three user tests as it proved more user-friendly.
3
We should’ve aligned our research discussion guide more closely with our designs for easier note-taking.
MVP prototype
Let’s see the designs in action
What now?
Next steps
As of late August 2023, my designs are finalized and handed off to developers. Although my internship ends before the project goes live, I'm excited to see it in action.
As one journey ends... the next one begins!
Reflecting on my experience
Working at a company with a strong commitment to design has been nothing short of wonderful. I’m lucky for the opportunity to work on a substantial project, gaining experience from user research to iterative prototyping.
Since starting my internship, my design and communication skills have flourished tremendously, thanks to my incredible IBM Quantum design team.
Although this chapter ends, I will cherish the great memories from these past months as I grow my design career!
First day of work @ Almaden
IBM Coachella festival w/ my painted rock
Internship showcase presentation day!
Final playback w/ the team!
Welcome dinner cruise in SF!
Painting party for Intern Day
Making solar lamps @ a Goodear volunteer event
IBM Coachella festival pic w/ the live band
Presenting my poster @ the final internship showcase
Summer ‘23 internship cohort @ the Almaden research lab
bottom of page