Comment on Your Screen with Bubbles
GOAL: Design a zero friction experience for users to capture anything on their screen and comment live in context as they record.
Bubbles is an early-stage startup that has developed an application to capture and annotate screen recordings. The opportunity for this sprint was to design a way for users to annotate while recording using live commenting and audio capture.
The current version of the application allowed people to record their video and then add comments after, however users desired the ability to capture comments while creating a recording so they would not have to risk forgetting their comments until after the recording was complete.
Opportunity
Overview
Testing & Iterations
Build
Process
Sprint Cycle
This project took place over a one month spring cycle that involved one week for scope and initial direction setting/feasibility, two weeks for building and prototyping and one week for cleanup and launch.
Mid-fi & pixel perfect mocks
Updating the fidelity of the design, I could focus on visual identity and get ahead of what-ifs as the dev team worked on the build.
Detailed user flows
Mapping each step the user takes and the corresponding micro-interactions is crucial for a project like this. Understanding where and when a user might make a decision to pause a recording and comment is the difference between a good and bad experience.
Crazy 8s and pen + paper sketches
I led the team through a. round of Crazy 8s to capture everyone's ideas. I find this step important in understanding how engineers are thinking about the problem. From there I keep sketches as simple as possible and on paper to allow for discussion and easy edits.
Initial team brainstorm
To begin the sprint I met with the engineers to define scope, understand technical limitations, and capture everyone's goals for the cycle.
This project took place over a one month sprint cycle that involved one week for scope and initial direction setting/feasibility, two weeks for building and prototyping and one week for cleanup and launch.
Ideation to Pixel Perfect
Problem
The biggest issue we found was that people expected a "comment mode" that allowed them to repeatedly click the screen to add comments. While this was not possible due to the need to simultaneously use a mouse click to interact with a live screen, a deeper understanding of the user need uncovered that clicking the comment button for each comment was what caused an undesired interruption in workflow.
Solution(s)
Understanding the underlying user need, we were able to design a short-term fix by add a keybinding shortcut to reduce friction, and set the priority of developing the capability for audio comments for the next sprint.
During our build we iterated on a prototype of the feature to test with users for feedback to observe how people used the tool and answer questions we had about desired functionality.
Following completion of comment while capturing, we developed and released a feature that allowed users to record audio while they recorded. This enabled users to utilize their voice as another means of commenting while recording.
Audio Comments & Highlights (V2)
Shipped Products
Bubbles users can pause their recording at any time to leave a comment in the flow of their recording.
Comment While Capturing (V1)
Conclusions
Take Aways
Impact
We killed the product! Oh wait...
V1 of this feature was released as a Chrome Web extension. At the time of release, Chrome hid any unpinned extensions under a puzzle icon. Suddenly just after launch, our numbers were plummeting and we couldn't figure out why. Was this feature somehow killing the product?
Eventually we caught the issue and realized our extension had suddenly disappeared for most users. Upon solving for this, we saw our usage numbers steadily rise as expected.
Respond to needs, not wants. A user knows what they want to achieve but doesn't always know what feature they actually want to achieve it. Many people we tested with suggested specific features, while what they wanted was a solution to a problem. Understanding pain-points unlocks the best design solutions.
Context is key. One issue that came up while developing audio comments was how users could still comment in context. Listening to a long recording isn't as helpful as commenting on a specific instance in time. The development of "Highlights" where you can select a section of audio as a comment allows users to jump right to the context they need.
Pen and paper. Spending time early with engineering defining logic with lo-fi wireframes allows you more flexibility to catch edge cases. Before jumping into mockups, a bit more time starting with pen and paper can save a lot later on.
3
1
2
