🐞Designing BugSwift - Efficient Bug Capture & Reporting App
Sandeep Boda | sandeepbvnr@gmail.com
Problem Statement
Design a web application that would help QAs/ developers capture and report bugs while they develop a website.
Executive Summary
Conducted 4 user interviews with Quality Analysts and Developers to empathise and understand their workflow, pain points & challenges.
Analysed few direct & indirect competitors (Jira, Asana, Bugzilla, Linear ...) to internalised what solutions already exist, draw inspirations and find the gaps.
Leveraged generative AI to optimise QA's heavy lifting tasks by assisting and co-piloting.
Tailored experiences for power users and also Increased communication effectiveness by making test session sharing more intuitive and informative.
Designed few power-up features to increase QA's productivity.
Table of Content
User Research
Leveraged user research methodologies to empathise with the users, understand their pain points and challenges. Here is the flow: Conducted User Interview -> Created Personas, Empathy Map, Journey Map -> Affinity Mapping -> Insights
Primary Persona: QA's / Manual Testers
Secondary Persona: Developers
User Interview
Identified 4 users in my circle with QA or Developer role. Designed a questionnaire and planned 1 hour session with each of them. Aim was to:
Understand their organisation's existing workflow.
Day in the Life of the personas.
Identify gaps & opportunities.
Here are the profiles chosen for the user interview:
Shalini
Senior Quality Analyst @Knolskape
Manual Testing: 14+yrs
Tools: Excel, Jira
Krishna Raju
QA Manager @ScientificGames
Manual Testing: 14+yrs Leading: 3+yrs
Tools: Excel, QTest, Jira
Sameer Agarwal
Developer Lead @Pixes
Development: 12+yrs Dev Lead: 6+yrs
Tools: Excel, Jira
Nitin Singh
Senior Developer @Kubera
Development: 12+yrs
Tools: Linear, Logrocket
Empathy Map
Synthesised findings from user interview and designed an Empathy map which helped me in structuring my finds about the users.
Use the tabs below to look at the empathy map of other 3 users
Journey Map
Created this journey map by aggregating the information I received from all the 4 personas. This map represents the entire end to end journey of a new product/ feature from requirements to release.
High resolution Journey map here.
Affinity Mapping
Leveraged Affinity mapping technique to generate themes from the observations and findings from user research. Grouped all the information into 6 categories which helps in a structured ideation.
Automation & Tools
KT & Capturing Bug
Reporting Bug
Team Motivation
Timeline & Quality Management
Processes
Insights from User Research
For product management, there are 2 specific Agile methodologies: Scrum & Kanban
Different teams follow different processes customised to their needs.
Some teams use a combination of both methodologies, sometimes referred to as Scrumban, to get best of both worlds.
Product management is vast topic with lot of different methods, opinions & processes. Bug reporting is just a small part of it.
QA team still extensively used Excel with manual updates.
Most of the tools doesn't connect 2-way with product management tools.
Writing test cases is manual and tedious process.
Lot of miscommunication happens between dev and QAs.
Fun Fact: Why do we call it a "bug"? 😆
The first documented use of the term "bug" to refer to a computer defect dates back to September 9, 1947. When a moth caused a malfunction in the Harvard Mark II computer, Grace Hopper recorded it as the "first actual case of a bug being found."
Competitor Analysis
Analysed direct and indirect competition in the market, got inspired, identified gaps and opportunities. Below are few insights from the competitor analysis
UI/Experience of few legacy tools like Bugzilla, qTest are outdated.
Jira is most extensively used tool for bugs & project management across companies of all sizes.
Users feel Jira is too heavy & complicated application for simple kanban projects. This is more relevant to team that follow SCRUM & sprints.
Modern teams lean towards light weight applications like Asana, Sentry, Linear, Monday.com...
Most of the light-weight applications are generic in nature. Flexible for project and bug management.
Usage of AI in the testing is evolving at rapid pace. However, no working features yet.
Most of the tools are focusing on product management in generic, but not catering to bug capturing or testing in specific.
Sentry & few latest tools allow session recording which makes the communication easy.
Ideation & Wireframes
Crazy 8's Ideation Technique
Picked few themes from the Affinity mapping for ideation. Used Crazy 8 technique for structured and faster ideation on the chosen themes.
3 ideas were chosen from the above list of ideas based on the value add vs feasibility vs uniqueness to create concepts.
Wireframes
Pardon my writing. May be I should have considered becoming a doctor 😂
Design Guidelines
Please refer to the below document for detailed design guidelines for BugSwift
Solutions
Concept 1: Using Generative AI for creating test cases
Problem with existing process/tools
Writing test cases is a tedious, slightly repetitive and time-taking process.
On an average, QA spends 30% of their time writing test cases.
Sometimes, QA forget writing test cases for few functionalities or the test cases are not exhaustive.
QA lead concerned with the quality of test cases written by junior QAs.
Majority uses Excel to create test cases which makes it practically impossible to co-relate with the bugs identified.
QAs are generally shared resources which makes it a point to optimise their time spending on a particular project. Boosting their productivity is crucial.
Solution
Leverage Generative AI to create test cases.
Train an AI algorithm to synthesis the requirements (PRD) and give test cases in the desired or customised format / template.
This provides exhaustive list of test cases .
Demo
Meet Vivan 🙋🏻♂️. He is a QA Lead at a FinTech company. They are working on a new IOS app project and he received the KT and requirements from the product owner.
Vivan is too busy handling multiple projects. He want to optimise his work as much as possible, so he can spend time in upskilling himself & his team.
He came to know about BugSwift (Efficient Bug Capture & Reporting App) which claims to optimise testers work by levergaing AI
He got super excited and wanted to give it a try.
Subscribed to the product -> Signed in -> Created a new workspace -> Created a project.
Checkout the demo video below to see how magically he created test cases in minutes.
Here is the Figma Prototype Link for the above concept
Vivan 🙋🏻♂️ surprised with the value-add BugSwift can bring-in to all the QAs.
Finally 🙋🏻♂️ got some spare time for himself. Thanks to technology 🙏. Happy Ending! 🙂
Sensitivities
Training an algorithm for niche usecases might be bit tough, but technology has evolved enough to cater to most of the testing usecases.
The flow needs few tweaks to avoid duplications of test cases while users create test cases both manually and using AI prompt.
Success Metrics
Test Case Effectiveness: Measure the effectiveness of the generated test cases in identifying defects or verifying the functionality described in the requirements.
Test Case Maintainability: Measure the ease of maintaining and updating the generated test cases as the requirements evolve.
Testing Efficiency: Measure the efficiency of the overall testing process facilitated by the generated test cases.
Concept 2: More power to power users. And Increased communication effectiveness.
Problem with existing process/tools
Currently, It's very hard for QA to execute a test case in different environments in parallel and to group related bugs.
Present solution forces QA to file the bug completely before proceeding to the next one. This context switch distracts to testing flow. Sometimes users forget what they were doing.
Existing hack by QAs: QA takes screenshots of the bugs and files all the bugs in Jira board at the end of the testing session.
Linking / merging is super hard after filing the bugs. This depends on the QA's memory power.
Solution
Multiple Cross-browser instances in the same tab.
This makes it super easy for the QA to stay in the context and compare behaviours in different setups.
This helps QAs to find related bugs and merge it very easily
Drafting Bugs.
Separating bug capturing & reporting phases helps QA to stay focussed, move faster.
Step1: QA can capture the screenshot, give short description and move to the next step. Step2: After testing session, QA gets back to the list, do any changes to the description / assigning / priority and submit all at once.
Merging Bugs is much easier than ever
This solution enables merging bugs before reporting itself.
Session Replay
Session playback video, log, console view helps developers to replicate and diagnose the issue much faster.
Demo
Here is the Figma Prototype Link for the above concept
Sensitivities
This solution needs to be tweaked to support all types of bugs other than UI bugs.
This flow encourages people draft bugs first and submit later. Submitting bugs as soon as captured needs extra effort with this interface. Few tweaks can fix this.
BTW, do you know why I named it "Bug Swift"?
"BugSwift" draws inspiration from the swift bird, known for its agility and speed in capturing insects mid-flight. This name implies a quick and efficient bug capture process, conveying the app's focus on swift bug reporting and resolution.
Conclusion
Bug capturing, reporting and product management are very context specific. One size doesn't fit all. This highly depends on the processes at the company. And ofcourse, no 2 companies follow the same process, they have their own customisation. The solution I created is just based on the small sample of users I get to interview.
Design for one person and extend it to others
I hope you got a better understanding of my design process & working style. Looking forward to connecting with you soon 🙂
Last updated