Designing a rich technical feedback system for developers
Co-Founder
Product Designer
1 Month
(April 2023)
Bridget Bell (PM)
James Li (Developer)
Benran Zhang (Developer)
Product Thinking
UI/UX Design
Branding Design
Four Computer Science students, One Goal: Improve developer workflows.
Firefly was built and shipped at Lavalab, a USC startup incubator, over the course of a month.
As the sole designer on our team, I worked on:
Visual Design (UI Screens, Branding, Pitch Decks)
Experience Design (Research, User Flows, Interactions)
Product Strategy (Competitive Audit, MVP Features)
We learned from engineers that identifying the root cause of user problems is challenging.
Here's what we heard from engineers from various experience levels and company sizes:
“It takes me forever to debug customer issues because I never know what actually happened, leaving both of us frustrated.”
“A user reached out on our feedback form telling us that our website wasn't loading. But how did they get to that point? With no context, there wasn't much I could do."
Imagine this scenario:
Alice is struggling to submit a form on a job board.
Alice's browser might not be compatible with the job board's application software, so she's getting an error.
Alice may have used an old application link, which has since been updated, and the database isn't accepting the request.
An underlying third-party authentication library may have just gotten updated, and developers need to prompt users to log in again.
An issue with data formats from updated form fields may be causing an error with form submission.
...and many many more possibilities.
With only surface-level information, it is difficult for developers to start tackling the issue right away.
Getting more details from users is a logical solution, but...
Users may be non-technical, and might struggle to give detailed information on what is happening.
When faced with too many steps to submit feedback, most users won’t bother—only power users or team members.
Other important data (console logs, etc.) can’t be provided by users.
Product improvement shows that the company is focused on continuously bringing value to users, improving retention and trust.
Many companies are using Agile and other fast moving iterative processes. Getting feedback quickly is valuable in driving further sprints.
Firefly bundles technical data with user feedback for more efficient debugging.
Users and team members can leave a comment anywhere on the screen when they encounter an issue.
This comment turns into a ticket packed with technical data to help developers find the root problem.
How could Firefly help in Alice's situation?
Alice opens feedback mode on the job board, and leaves a quick comment on the error message she's receiving with her job application.
Robert receives Alice's ticket, and notices some HTTP Status Codes that indicate issues with authentication and invalid data formats.
The Design Process
The Problem Space
To better understand the problem space, we interviewed developers from different levels of experience and asked them specifically about catching bugs, getting feedback, and resolving various issues. Here are some of the questions we asked:
Here are some of the key insights we uncovered about the bug-reporting space:
For users who are facing issues, most product websites use forms, chatbot-like widgets, or simply list an email or phone number.
Developers typically hear of these issues through email, internal ticketing (Jira, Trello, Notion) and/or messaging (Slack).
Paying customers and cross-functional team members are invested in improving the usability and reliability of the product.
Casual website visitors or occasional users don't feel as obligated to give feedback (unless they're really interested in the product).
Being supportive of user issues and actively improving the product increases User Trust and Retention.
Product teams are iterating often (agile methodologies), and want systems to quickly gather feedback to guide future development.
The Value Proposition
Additionally, we honed in on places where Firefly could add to the current market.
How might we make it as easy as possible for users or other team members to leave feedback on a deployed website?
How might we avoid redirecting users to a separate form, email, etc. or team members to Slack or Jira to provide their feedback?
How might we collect as much relevant technical information as possible and display it in an intuitive way?
Feedback System
When thinking about existing systems that made feedback giving easy and seamless, my team and I mentioned Google Docs, Notion, and Figma comments. These were flows that were not only user friendly, but also familiar.
Google Docs: Comments pinned to text
Notion: Comments pinned to blocks
Figma: Comments pinned to items
We considered other common feedback interfaces too:
Feedback forms were often a click or two away from the original page or took valuable screen real estate, making it harder to recall the issue.
Many widgets we interacted with were not primarily feedback tools—they were often chatbots or Q&A systems for purchasing products.
Extensions require pre-installation, adding a barrier to entry for feedback that is difficult to overcome.
Figure 1: Finalized Commenting Flow
From first sketch...
...to working prototype...
...to final components!
Developer Interface
When approaching the developer interface, I leveraged my knowledge of technical interfaces such as Chrome Developer Tools and common IDE layouts to create something that would be easily approachable.
This design helps to visually separate different logs, especially the ones with additional details under a toggle. However, my developers noted that as these piled up (which they often did), they would take much more screen space.
This updated version is much more compact and stackable, and also provided a clear space for timestamps and dates.
The finalized components were designed to look similar to Chrome Developer Tools for familiarity and ease of use.
Most IDEs, Github, etc. have their file systems organized using a vertical bar on the left side, so that's where I put the comment feed!
Screenshot Previews...
...and a Project Dashboard!
Learnings
Shipped a working MVP in the span of 4 weeks — from user flow diagram to interactive web application
Gave product demos to audience members, potential customers, and investors
Pitched to a panel of entrepreneurs at Lavalab's Spring '23 Demo Night and was awarded Judge's Choice for Best Product and $1,500 in seed funding
After our team pitched at LavaLab's Spring 2023 Demo Night, Firefly was selected as the "Judge's Choice" product and won $1,500 in seed funding! Take a peek at our pitch deck here:
While our team decided not to continue building for various reasons, since then we've seen the introduction of commenting features in platforms such as Webflow and Adobe Illustrator, as well as the continued development of upcoming products that support businesses with bug reporting and feedback.
Thank You!
A big thank you to my team for their optimism, energy, and kindness through the long meetings and late build nights—we did it! Thank you for being a part of my first end-to-end product design journey and helping me grow both personally and professionally.
We couldn't have done it without our team mentors Joanna and Scott, who along with the rest of the Lavalab E-board, guided us through the product development process and redirected us when we were losing our footing and needed words of wisdom.
A personal thank you to all of the design mentors who looked over my work and gave such great creative and personal advice—I hope to pay it forward as I continue improving my design craft!