CapSure: The Evolution of an App
See the Video — UPDATE Jan 6: We just posted the promo video here. Rush fans will love it, but I think that regular people will too: https://youtu.be/00_eVFKJ-ao
You’re the project manager responsible for a client team and an internal team of designers and developers. In this role, you are constantly receiving feedback from internal devs and QAs, from client product owners, and from test users. Much of this feedback needs to be converted into requirements and actionable tasks for one or more members of your team. This documentation process consumes many hours per week and requires a high level of attention to detail in order to communicate feedback clearly and correctly. Online product demos represent a great opportunity to collect quality feedback from multiple users in a short period of time and it was during such an online demo that an idea was born.
CapSure is designed as a plug-in for the Zoom online meeting app. While users view and interact with content in the Zoom meeting (such as a software demo), capSure adds the ability for observers to take a screenshot and then add comments within a few clicks either while the meeting is happening or immediately after the meeting. These feedback items are added to a dashboard that is accessible to the project manager who can review entries one at a time, adding comments if needed, and then publishing the screen capture with any comments to the manager’s project management software (JIRA or similar) as a task to be addressed by the design and development teams.
We observed project managers and UX architects in their work settings to identify their current habits and methods for capturing user feedback during software demos and for publishing useful feedback to their project management systems. These observations and interviews revealed a variety of methods, but all had one thing in common — multiple steps along with 10–15 minutes spent capturing and annotating sample images to describe changes needed to the software shown in the demo. Observations showed that end users — the client-side viewers of the software demos — simply texted or verbalized their feedback rather then producing it in a reusable digital format. This put the burden of the digital conversion on the project manager or UX architect. There had to be a better way.
We began to ideate an application that could integrate with Zoom for image capture, creating paper prototypes to gather initial feedback for the concept. User comments were positive and our test group was excited about an application that could capture and publish data in real time, combining several steps in the collection to publication flow.
After a few tweaks to the paper model, we decided to focus exclusively on the more difficult project manager role (review, commenting, and publication to JIRA, etc.) since the observer role was more easily addressed and because we had direct access to managers and UX staff. While the original product idea was conceived as a desktop application (lots of screen real estate) wireframes for the manager flow were created in Balsamiq and then imported to inVision to make it easy to share and test on the more challenging mobile device — an iPhone in this case. We then went to work with our test user group which consisted of “real live” project managers and UX staff and a new friend (Alex) who is taking the same Coursera class as me.
Again, feedback was generally positive with a short learning curve for the application. Tests did identify minor problems with list screens (we need dates and times for each entry) and the detail screen shown above and below (Why are there 2 comment buttons? How do the marks on the screenshot relate to the actual comments?)
Experimental-Driven Design
After two rounds of adjustments to our wireframes, we uncovered an opportunity to refine a key area of the application. The item detail screen (shown above) needed to be intuitive and efficient and our original design was not quite “there.” So we gathered tester comments and ideas in order to create an alternative design for this important screen and ran an A/B test through UserTesting.com.
Feedback was generally positive for both designs, but layout B received slightly more favorable ratings for ease of use. One A group test subject actually suggested removing the magnifying glass icon from the design, making room for the thumbnail to be moved to the left, suggestions that were already incorporated into the B version (yes, we are psychic).
With our UX research behind us, we then applied the skin to our skeleton. One tester noted that our “design” as shown in the wireframes was a “bit out of date,” so we attempted to apply a flat, more modern design in this last stage. Icons were simplified and shades of “capSure green” were used to create sections within busy screens.
UPDATE Jan 6: We just posted the promo video here. Rush fans will love it, but I think that regular people will too: https://youtu.be/00_eVFKJ-ao
