Design Challenge

Designing a bug reporting system for InVision

CHALLENGE

Choose an existing web app
Imagine discovering a bug/defect/error in the web app
Design the digital experience for a user to report that error to the web administrator

I chose Invision App for this exercise for these reasons:

I'm already familiar with the app
I can pretend to be a user myself, in this exercise
I already have some ideas how their support and ticket submitting process is and wish to make it better

THE PROCESS

Observing the current flow

I began exploring the Invision App focusing on the bug reporting system or support center they already have.

Currently, after the user is logged in, there's no help or support for user to submit a bug/error/defects. In fact, there's a Learn tab that user can click to, and browse through video tutorials, and look for pre-defined questions in FAQs section.

I often find this time-consuming process when you just want to contact support and file a bug.

The current flow for filing a bug is:

User logs in -> Identifies a bug -> Click Learn -> Look for FAQs and click on to the issue -> Find answers or contact support
User logs in -> Identifies a bug -> Go to https://support.invisionapp.com/hc/en-us -> Click Contact Us button or search for the issue to resolve it yourself

Defining a bug report

A bug report is something that stores all information needed to document, report and fix problems occurred in a software or on a website.

A good bug report contains the information needed to reproduce and fix problems
A good bug report is an efficient form of communication for both bug reporter and bug receiver
A good bug report is resolved as fast as possible
A good bug report is sent to the person in charge

A good bug reporting system allows you to report, document, store, manage, assign, close & archive bug reports.

USERS

The primary user for Invision app is designers who need to create prototypes easily and share with the team for collaboration. No coding knowledge is needed to use the app.

User Needs: Able to submit a bug report to notify the bug/errors

User Goals: Report a problem most efficient way while using the app without being distracted.

Constraints: Web app in Mac OS

Assumptions: Middle to high level of tech savviness, has free InVision account, wants an in-app bug reporting system while working on the project.

LOW-FIDELITY MOCKUP

I added a help icon in the secondary icon set in the bottom navigation so users can easily get to the support/help while working on a project.

Upon clicking the help icon, users are asked to choose whether they want to give feedback, report a bug, or contact support. Clicking the to report a bug will show a display where users can draw arrows to point to certain area of the screen, type their comment on screen and take screenshot to attach to the message. Also recording a behavior will be helpful since designers use InVision for prototyping, so there might be some interaction issues that users want to report. Allowing users to attach screenshots and videos help users to explain the issue better, and also helping the InVision support team to understand and reproduce the problem better.

I also thought about how users can track the status of the bug report they submitted, ensuring that it will get resolved. By asking users to post it to support forum not only helps others with same issues look for resolutions, they can also communicate with the support team member how the issue is being addressed. But due to confidentiality issue of posting a project, a confirmation is needed from the user to make sure they agree to post it for public.