If you're building software and websites, you know that bugs are inevitable. The real challenge is to make sure that your team has an efficient way to identify, report and track bugs.
Trello is an amazing tool to keep track of bugs. However reporting them can prove cumbersome. It breaks up your workflow and it often not descriptive enough for developers to understand and reproduce bugs fast enough.
That's why we created Marker.io, the best way to create detailed-rich bug reports in Trello without leaving your website.
See how it works:
If you'd like to set up you own bug reporting & tracking workflow around Trello, follow these easy steps.
Step 1: Create a Bug Tracking board in Trello
Your first step is to define where your team will keep track of bugs and feedback in Trello. We recommend you set up a new board similar this this one;
To get things set up even faster, feel free to copy this template for yourself.
You can also create priority labels to process bugs in order of priority. You'll see these labels will turn out to be useful later on. We recommend defining 4 tags:
Once your Trello board is set up, make sure to invite your team (and clients) to collaborate on this Trello board. This will make it easy for everyone to report bugs.
Now, it’s time to create some cards!
Step 2: Connect your Trello account
To create bug reports in seconds into your Trello boards, you will need a Marker.io account. (If you don't have one yet, start your free trial now)
Go to your Marker.io integration admin here and sync up your Trello account.
Step 3: Capture a screenshot of the bug
At this point, you should have the Marker.io screen capture extension installed in your browser. (if not, log into your account and install now here)
Go to your website and start hunting for bugs. When you find one, click on the Marker.io browser extension and capture a screenshot
Step 4: Select your bug tracking board
After capturing your screenshot, the Marker.io editor will open. In the upper left corner, select in which Trello board and list you want to start sending bug reports.
Marker will automatically remember the last combination of Trello board and list you selected for the next time.
Step 5: Annotate to get your point across
Use the built-in annotation tools inside the Marker.io editor to get your point across.
Step 6: Fill out a bug report template
When you're done annotating your screen capture, make sure to document the actual and expected results of the bug. Some bugs might be obvious for you, but your developers won't always know what the final results should look like.
Take the time to fill out the bug report template and your developers will thank you for it! The description will be automatically converted using Markdown in your Trello card.
Step 7: Assign priority & team member
Consider adding a priority level to your bug report to make it manageable for your team to know on what they should work next. You can even add a team member who collaborates with you on this Trello board.
Step 8: Create & view the bug report in Trello
When you are ready, hit the big green button that reads "Create card". Your screenshot will be converted into a Trello card in your selected board and all the information you included will be added to the Trello card as well.
On top of all this information, Marker automatically grabs the technical information about your browser, OS and screen as well as the original Page URL. Your developers will now be able to easily reproduce the bug and they won't have to ask you again which browser you used or what is the size of your screen. The best part, you didn't have to do anything to.
Here’s an example of a well-documented bug report created with Marker.io. (See how professional this looks on your Trello board? It makes you look good, too!)
This Trello card has all the information needed for your team to act on it:
- The card is in the correct board and list.
- The card has a priority (using labels).
- The bug is assigned to a team member.
- The annotated screenshot is attached.
- The expected and actual results are well documented.
- The technical browser information is included.
- The URL where the screenshot was captured is in the description.
- The bug has a due date.
Wrapping it up
Invite your team to collaborate in a dedicated Trello board and roll out Marker.io to your entire team so anybody can report professional bugs and feedback in seconds without interrupting their workflow.
Wait.... what about bug reporting on Mobile?
Read our special guide about how Marker.io can help with bug reporting on responsive websites and mobile apps