(Squashing bugs the right way)
Raise your hand if you’ve been in this scenario 🖐
You launch an update or a new feature in a crunch because you have to stick to a schedule. It looks ok but not quite like the mockup. Or maybe you have content you need to show, but due to time constraints you’ll just use an iFrame for phase 1. Perhaps the code is not as minimized as possible. That’s alright you’ll fix these… later!
This is what is referred to in the ‘industry’ as technical debt or design debt. TLDR: You prioritize shipping on time over technical implementation or design considerations.
If you want to learn more about tech debt check out this helpful article.
Now that we all know what tech debt is, I wanted to share some tools & processes that I learned to help mitigate and plan for the inevitability of tech debt arising in your projects/products. These tools work just as well for capturing & logging bugs too.
First a little version history on previous methods I have used.
V 1
Nimbus/Gyazo to take a screenshot, then download and upload. Sometimes that would even require compressing the video (just to capture and show the bug) Then we would need to attach it to a google doc and log the bug in an excel sheet. Then we would communicate with developers and manually update the sheet or doc. I think our longest running doc was close to 99+ pages. 🥵
V 1.5
Use Nimbus/Gyazo to take a screenshot or record a video of the browser, then download. Create a new ticket in JIRA. Then we would communicate with developers that a new ticket was added. Any communication would be done via Slack for quicker responses/turn arounds.
V 2
Using Jam there is no longer a need to download/upload videos. With Jam, the bug and feedback process is entirely streamlined. One simple little icon to capture a screenshot, video and even record the last minute in your browser (think twitch clips for your browser). It even creates a ticket in its own dashboard. Goodbye downloading gifs & manually recording screens + compressing videos. Still using an excel sheet to keep track of bug progress.
V 3
Combining the powers of Jam & Linear we now have a streamlined solution for capturing bug feedback, managing that feedback along with progress analytics and status updates. An added bonus, the UI of each of these is super intuitive and minimal.
TLDR: Jam for capturing bugs. Linear for managing tickets.
Having been a self taught product designer and never really having a set in stone bug capturing process, here is a quick start guide to what I deem the most efficient method.
Tool #1 🍓 Jam
I first came across Jam through a comment thread of people talking about their favorite bug capturing software and boy am I glad I did.
Jam is an incredible chrome plugin. As you can see from the above graphic you can:
- Take a screenshot
- Record this tab
- Record desktop
- Instant Replay (Think Twitch clips but for your browser!)
After you’ve selected a method for capturing and finished recording or capturing your screenshot, next is to add some context:
Jam provides super quick ways to add context, whether that’s with a drawing, arrows or text. You can also add attachments directly to the jam for added clarity.
Once you’re done adding info, you can choose from the top how you’d like to share the bug. For this example we’ll choose a link, but as you can see there are several options to integrate with other platforms.
Ever try to reproduce a bug and then your engineer asks for you to copy your console log or tell them the exact steps you took? That’s so 2020! Jam gathers all the important information for your team to reproduce, and analyze what went wrong at the click of a button. And not only that, they give you all the options you’d want & more.
- Info
- Console
- Network
- Actions
- JamGPT
And one of their more recent AI powered features; JamGPT:
When you create an bug it also gets added to your “Jams”, the history of all the bugs captured.
As you can hopefully see, Jam is incredibly powerful and can greatly improve your bug capturing process.
Sometimes, finding older bugs in Jam gets a bit tricky when you’re working on many projects. But with Jam & Linear teamed up, it’s like having a secret weapon that makes everything smoother.
For a quick guide on how to get started with Jam & Linear check out this doc: https://jam.dev/docs/integrations/linear#how-to-use-jam-+-linear
Checkout Jam here: https://www.jam.dev
Learn more about Jam: https://jam.dev/docs/
Tool #2 — 🟣Linear
If you’re a designer you may have heard of or seen Linear in the twitter sphere when they opened up their figma file of their new homepage to the public.
Linear is a product management tool that has made headway over the past few years. Coming from tools like Google Docs/Sheets, JIRA, Atlassian, & Basecamp; Linear is a nice refresh from the standard issue trackers.
My favorite thing about Linear is its UI and ease of use. The team is constantly improving and shipping as well.
It’s free if you have less than 250 issues, but like Jam, their other packages are very reasonable.
Now to get into the UI:
You have choices for how you want to display issues:
When it comes to organizing your bugs, that depends on your own nomenclature, but what has worked for us is to have clear labels so you can see at a glance what the issue is.
For a mobile app:
- Device type (Android / Apple)
- Bug type (Improvement/Bug) — This helps define priority
For a website / web app:
- Device (Mobile/Desktop/Tablet)
- Bug type (Improvement/Bug)
Additionally you can add other label types too like: UX, Copy, Stylistic, Speed etc. It really depends on your team, its size & what language you want to use for labels.
Since we connected Linear with Jam all the finer details are already added so these labels are more for prioritizing & organization.
You also have the option to add other things like status, priority, assignee etc.
To learn more about Linear, check out their helpful docs: https://linear.app/docs
Linear pricing
I wrote this article with the hope of assisting those who, like me earlier on, didn’t really know where to start when it came to capturing and logging feedback. I hope this article is helpful, and if you have any questions, please feel free to comment.
Thanks for your time & wishing you the best on squashing those bugs!
