TroubleshootAR: An Approach to IT Troubleshooting

Overview

It had been a while since I’d looked into augmented reality (AR), but I’ve always been interested in how it could be applied in different contexts. It had been a while since I’d touched AR, but I’ve always been interested in how it could be applied in different contexts. I hadn’t seen many projects that were education-focused, and that made me wonder where AR might fit into the learning process. One area that stood out was the IT field. Even though it’s often thought of as a digital field, troubleshooting has plenty of physical, hands-on elements, like tracing cables, checking devices, or verifying power sources. These concepts can be tricky to teach through books alone.

That took me back to when I was first learning IT myself. Troubleshooting was usually presented in textbooks or through computer simulations. Simulations are great, but they don’t quite capture the unpredictability of real-world issues. I wanted something that could bridge that gap between reading about problems and actually diagnosing them, and how TroubleshootAR began.

TroubleshootAR does this by letting students scan AR markers. These are context-aware printed images that, when scanned with a device, trigger the related digital content. From there, students can work through checklists, jot down their observations, and then review everything in a summary they can discuss with an instructor or peers. In other words, it recreates the first steps of troubleshooting in a way that feels a little closer to hands-on practice.

---

UX + Design Decisions

• Marker-based flow: The experience is built around four context-aware markers (network, power, cable, device), each tied to a core part of troubleshooting.

• Simple interface: A couple of buttons guide the process. Students can open a checklist, take notes, and review a summary without complicated navigation.

• Mobile-first: Designed to work on phones and tablets since those are far more accessible than AR wearables.

• Instructor support: The instructor guide includes setup instructions, sample scenarios, and a grading rubric.

Design and Development Challenges

One of the first challenges came from my initial attempt to build this with 8th Wall. The platform is powerful, but the free version didn’t give me the flexibility I needed to incorporate custom AR markers or reliably trigger the checklists. I could never quite get the marker interaction to work as intended, and after wrestling with it for a while, I decided to pivot. Switching to A-Frame and AR.js ended up being a much smoother path, and I was able to get a working prototype together surprisingly quickly.

Marker design was another unexpected hurdle. At first, I printed the borders too thin and cut them too close to the edge, which made them unreliable for scanning. I had to reprint all of them with thicker borders before they finally worked consistently. It was a small detail, but one that completely broke the experience until I fixed it.

Lastly, I had to balance how much visual information to include on the markers themselves. I didn’t want the icons to distract from the actual hardware students were troubleshooting, so I kept them simple and more symbolic than detailed. The markers serve as reminders and light scaffolding, enough to orient students without taking attention away from the task at hand.

Core Features and Implementation

Marker templates

Each marker maps to a small checklist template. Keeping it as plain data makes it easy to tweak per class or swap items without touching the core logic.

  const checkListData = {
    "marker-power": ["Power source is plugged in", "Power switch is ON", "Devices are connected to power source"],
    "marker-cable": ["Cable connected at both ends", "No fraying or exposed wires", "Cable is seated firmly"],
   //...
  };

Checklist Reuse

The app reuses a single checklist div. When a marker is scanned, the relevant text, labels, and notes are swapped in. The data is stored locally in an array and restored when returning to the same marker, but it isn’t persistent; everything resets on refresh, so each troubleshooting exercise starts fresh.

function showChecklist(id) {
  checklistItems.forEach((item, i) => {
    const checkbox = item.querySelector("input");
    const label = item.querySelector("label");
    checkbox.checked = state.checks[i];
    checkbox.onchange = () => updateMarkerState(id, i, checkbox.checked);
    label.textContent = items[i];
  });
  //...
}

Summary for Debriefing

All notes and checks get compiled into a simple summary for group or instructor discussion.

function generateSummary() {
  Object.keys(markerState).forEach((key, index) => {
    const state = markerState[key];
    const summaryElement = document.getElementById(`notes-${index + 1}`);
    summaryElement.textContent = state.notes || "N/A";
  });
}

Final Takeaway

TroubleshootAR gave me a chance to revisit augmented reality and explore how it might fit into an instructional setting. I picked up lessons about AR marker quirks, library trade-offs, and how small design choices can shift the learning experience. Even a simple prototype can open the door to new ideas for using emerging tech in education.

Explore the Project

Try it out here: View Project
Check out the code: GitHub Repo
Watch the video: Coming soon!

---

— Dominique
Learning out loud, one project at a time.