Manual testers who investigate multiple aspects of the user experience of a software product tend to follow a cumbersome process of recording and filing a issue in any issue tracking software.
Filing a single text-annotated UI issue involves over 3 applications, 30+ interactions and takes at least 20 minutes.
This apparently boring redundant process suffer from the following insufficiencies.
As the designer, I once sat with a UI tester to identify subtle design-development issues for a newly developed feature. In a span of 6 hours, we were able to file just 26 issues, most of them trivial and non-critical. It was at that moment, I felt that there will definitely be a better to way to do this.
A typical UI Issue filing workflow involving JIRA
I right away with the concept sketch (Read why I always start with a concept sketch instead of strategy), focusing on a mobile-first approach mainly because I wanted to capitalize on the familiarity of using a mobile camera to take pictures, in recording UX issues. Also, it turned out to be advantageous in terms of mobility, taking work partially away from the test item, input advantages of mobile devices etc.
Bugsy concept sketch
The concept explored the following salient features/ ideas
Two major conclusions were reached after the concept sketching stage. They are
Bugsy was decided to be a mobile application (initially, an Android app, due to the skewed relative popularity and affordability of Android devices in Indian smartphone market) which will be a handheld companion for manual testers in creating and filing UX related issues for Atlassian's JIRA. The mobile application will solely depend on JIRA REST API for its accessibility and server-side communications.
USER RESEARCH & PERSONA
The target users of this application were a quite straightforward to me. As I wanted to solve the problem of my colleagues and people like them, there was no place better than Bangalore (India) where I could observe and construct my User Persona.
Generic User Persona Range
Gender - Male or Female
Age - 24 to 30 years
Education - Bachelors in Engineering or Computer Applications
Country - India
Languages Known - English, Hindi and a regional Indian langauge etc.
Sociological Status - Mostly single or newly married
Employer - Medium to Large scale IT companies making software products for US partners etc.
Position - Junior Testing Engineer
Technology Familiarity - Familiar with business applications on computer, very comfortable using a smartphone for carrying professional tasks
Traits - Young, recently earning, yet to feel settled, substantial part of weekday spent in commuting, very active on social media (Facebook, Instagram, Whatsapp groups etc)
With the target persona in mind, a generic customer journey was mapped to list the key requirements, the pain points the user will encounter in the use of the product and the ways to solve or leverage the pain point to serve a great user experience to the customer.
Bugsy - Customer Journey Map
Based on the product strategy, customer journey map findings, target audience behavior and time constraints to roll out a minimum viable product (MVP), the scope for the product was crafted.
With the scope of application drawn up, a quick interactive prototype was made from sketched wireframes. The workflow on the deployed concept was captured as a video (see below) and analyzed for interaction insights.
Bugsy - Wireframing for Proof-of-Concept interactive prototype
Bugsy - Interactive Proof-of-Concept
From interacting with the POC, a few insights were obtained.
A straightforward clustering based hierarchical structure was chosen to dictate the application's information architecture. Combined with the sequential process for issue creation & reporting, the structured proved to be fairly robust against different user journeys.
Bugsy - Information Architecture
With the learnings from interacting with the Proof of Concept prototype, a JIRA-like workflow combined with an amped-up Instagram-like workflow was crafted.
Bugsy - Issue Creation Workflow
USER INTERFACE DESIGN
To facilitate a seamless user experience between Bugsy and JIRA, the UI design process was influenced by JIRA's visual design. And simplification of NEW button by Google's latest Material Design philosophy was also incorporated. The interface becomes quite similar to Instagram when the part of workflow where the media is captured, and UI customizations to support multi-mode multiple media item capture.
Bugsy - Style Guide
Photo annotation options
Video for annotation
Reporting an Issue to JIRA
Multi-mode multiple media selected
Review captured and/or selected media
Select from Gallery
Photo for annotation
There were are few substantial learnings in the exposure of concept to the target users. They are
Note: The product is currently under development. Bugsy API is being built with technological requirements identified in the Customer Journey phase to facilitate a great user experience. See you guys soon on the Play Store and App Store.
What do you want to do next?
BACK TO TOP