{"id":7484,"date":"2024-05-23T13:36:02","date_gmt":"2024-05-23T17:36:02","guid":{"rendered":"https:\/\/treize.pro\/non-classifiee\/optimize-website-quality-control-with-the-right-tools\/"},"modified":"2024-05-23T13:36:02","modified_gmt":"2024-05-23T17:36:02","slug":"optimize-website-quality-control-with-the-right-tools","status":"publish","type":"post","link":"https:\/\/treize.pro\/en\/management\/optimize-website-quality-control-with-the-right-tools\/","title":{"rendered":"Optimize website quality control with the right tools"},"content":{"rendered":"<p>The quality control and optimization phase is a crucial step in any website design project. This stage requires seamless coordination between the various stakeholders involved: quality control managers, developers, strategists, designers, project managers, and of course, clients. <\/p>\n<p>Integrating clients into this phase can sometimes prove complex, especially if the appropriate tools to collect their feedback and guide them effectively through the quality control process are not available. To avoid ending up with 17-page PDF documents filled with screenshots, it is best to provide a clear framework for all stakeholders from the start. This ensures that all feedback is structured in the same way and accelerates the quality control process.  <\/p>\n<p>The key to a successful quality control phase is moving as quickly as possible through the following feedback and correction loop: 1) testing, 2) bug reporting, 3) bug fixing, 4) deployment.    <\/p>\n<p>Steps 2 and 3 often require the most management, as client feedback must be coordinated, processed, and transformed into concrete tasks for the development team.<\/p>\n<p>What if there were a revolutionary tool that allowed us to facilitate this management and structure requests?<\/p>\n<h2>Marker.io: The feedback loop accelerator<\/h2>\n<p>That&#8217;s where Marker.io comes in. A revolutionary tool we use at TREIZE that accelerates the feedback loop by simplifying every step of the process. <\/p>\n<p><a href=\"http:\/\/marker.io\/\" target=\"_blank\" rel=\"noopener\">Marker.io<\/a> is a visual bug reporting and feedback platform for web development teams. It allows users to easily report visual issues on websites, such as UI bugs, layout problems, or design errors. <\/p>\n<figure id=\"attachment_5385\" aria-describedby=\"caption-attachment-5385\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5384 size-large\" src=\"https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-1024x562.png\" alt=\"Screenshot of the Marker.io interface, featuring functionalities such as website annotations and easy installation. A testimonial and a feedback form are visible.\" width=\"1024\" height=\"562\" srcset=\"https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-1024x562.png 1024w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-300x165.png 300w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-150x82.png 150w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-768x421.png 768w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-1536x843.png 1536w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-2048x1124.png 2048w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-200x110.png 200w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-832x456.png 832w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-827x454.png 827w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-1760x966.png 1760w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-671x368.png 671w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-1920x1053.png 1920w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-513x281.png 513w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-345x189.png 345w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-565x310.png 565w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-1013x556.png 1013w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-715x392.png 715w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-1312x720.png 1312w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-495x272.png 495w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-ecran-interface-markerio-800x439.png 800w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-5385\" class=\"wp-caption-text\">Screenshot of the Marker.io interface.<\/figcaption><\/figure>\n<p>Users can easily report issues using screenshots and annotations directly on the website. In addition to providing a text explanation of the problem encountered, they can add annotations, arrows, or shapes to the screenshots to provide more context. The more visual a bug report is, the more actionable it becomes.  <\/p>\n<p>Furthermore, all reports include the page URL, environment information (OS, browser), console logs, network requests, and even a video of the last 30 seconds of navigation. Capturing this information with every report reduces back-and-forth with users. <\/p>\n<figure id=\"attachment_5387\" aria-describedby=\"caption-attachment-5387\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5386 size-large\" src=\"https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-1024x467.png\" alt=\"Marker.io user interface with an annotation requesting to change an element to green, and a panel displaying session details, including the operating system, browser, and console errors.\" width=\"1024\" height=\"467\" srcset=\"https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-1024x467.png 1024w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-300x137.png 300w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-150x68.png 150w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-768x350.png 768w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-1536x701.png 1536w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-2048x934.png 2048w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-200x91.png 200w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-832x380.png 832w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-827x377.png 827w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-1760x803.png 1760w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-671x306.png 671w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-1920x876.png 1920w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-513x234.png 513w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-345x157.png 345w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-565x258.png 565w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-1013x462.png 1013w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-715x326.png 715w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-1312x599.png 1312w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-495x226.png 495w, https:\/\/treize.pro\/wp-content\/uploads\/2024\/05\/capture-feedback-interface-application-web-optimisation-800x365.png 800w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-5387\" class=\"wp-caption-text\">Example feedback and environment information captured by Marker.io<\/figcaption><\/figure>\n<h2>Synchronizing reporting and project management tools<\/h2>\n<p>Next, user feedback is automatically transmitted to a project management tool (Jira, GitHub, Trello, Asana, ClickUp, and Notion). This avoids having to manually transform feedback into tasks and facilitates the centralization of information where the development team spends most of its time: the project management tool. The better we can facilitate information transfer to this location, the more efficient we will be in managing quality control.  <\/p>\n<p>Finally, when an adjustment is deployed and the task is closed in our management tool, a notification is sent to the user to inform them that the request has been completed. It is even possible to leave a comment to explain the work performed or to provide more context. We could all spend a little less time in our inboxes, so this feature is very welcome!  <\/p>\n<h2>Facilitating the management and triaging of user feedback<\/h2>\n<p>One of the underrated features of <a href=\"http:\/\/marker.io\/\" target=\"_blank\" rel=\"noopener\">Marker.io<\/a> is the ability to pre-fill form fields. When a user completes the form, the pre-filled information is sent directly to the project management tool. As you can imagine, this makes triaging much easier.  <\/p>\n<p>Additionally, since there are two distinct forms for team members and guest users (clients), it is possible to have different pre-filled information for each. An excellent way to gain speed and efficiency! <\/p>\n<p>In the fast-paced context of website design, responsiveness to user feedback is essential to ensure project success and adherence to deadlines. By using high-performance tools like Marker.io, we can not only collect valuable feedback more easily but also process it efficiently, thereby accelerating the quality control and optimization process. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The quality control and optimization phase is a crucial step in any website design project. This stage requires seamless coordination between the various stakeholders involved: quality control managers, developers, strategists, designers, project managers, and of course, clients. Integrating clients into this phase can sometimes prove complex, especially if the appropriate tools to collect their feedback [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":5400,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"wds_primary_category":1,"footnotes":""},"categories":[107],"class_list":["post-7484","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-management"],"acf":[],"_links":{"self":[{"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/posts\/7484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/comments?post=7484"}],"version-history":[{"count":0,"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/posts\/7484\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/media\/5400"}],"wp:attachment":[{"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/media?parent=7484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/treize.pro\/en\/wp-json\/wp\/v2\/categories?post=7484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}