Since Screen Recorder's well-received release, users have been eagerly requesting a GIF export option for shorter recordings captured via Snipping Tool. GIF Export would provide a strong use case for content capture, likely increasing Snipping Tool engagement and use cases for video.
GIFs are widely used across many social media platforms with GIPHY being used as one of the top online
databases and search engines for animated GIF files. GIPHY serves "10+ billion pieces of GIPHY content
to a daily user reach of 1+ billion people,"_ to provide users a powerful and animated way to express
themselves online. Empowering Snipping Tool users to export short videos as GIFs gives them another
way to express themselves online and allows them to explore a new layer of creativity in having power
to make their own GIFs right on Windows.
Users have additionally requested GIF export via Feedback Hub shortly after Screen Recorder's release
(87 upvotes):
• "Now that Snipping Tool supports recording video in Windows 11, it should let me save as gif"
• "Snipping Tool Screen Recording —Add save as GIF!"
Introducing a GIF Export feature could increase user engagement and retention by empowering users to
do more with video recordings.
Engagement:
% (Feature MAD) / (Screen recording MAD) = 15%
Success means that 15% of Snipping Tool screen recorder users have used the GIF export
feature at least once in the previous 28 days.
Looking at PM-led user research, about 30% of participants (out of 50) record videos from scratch
before importing into a GIF export tool. Through research, only a handful of participants listed Snipping
Tool as their primary video capture tool. This may be since Snipping Tool does not yet support GIF
export, so as a goal, it would be a success to capture half of that usage after releasing this feature.
Looking at the above feature details, my gut feeling said that there was missing a core requirement to make this feature successful. That will be the ability to trim your recorded video before converting it into GIF. PM originally said that would be a scope creep. I felt strongly about adding the ability trim feature into the requirement becuase i was a victim of overbloated GIF file size which leads to poor experience and abandonment of that feature. There was a back-and-forth between the PM before we decided to take the matter into the users. We used usertesting.com to run a survey on the common practices and behavior users do when they are exporting GIF files. The result showed that the editing the duration of a video before exporting to GIF is the number one voted necessary feature and 23/25 users attached their GIF files to other apps that has technical limitation of duration and filezise of GIF files.
This user research data influenced the Product Management LT to attach the "dependency" tag on this GIF export feature and escalate a backlogged feature of video trimming into a high priority feature in the roadmap. We shipped both features within the same monthly release. It was a teachable moment for me, as the gate-keeper of the users voice, to handhold any key stakeholders through user research in order to solicit a feature requirement validation.
Design explorations were mostly from the end-to-end flow point of view; competitive analysis were observed for this explorations. Variations text inputs and other controls were explored to fulfill the technical requirements. Intenal design team reviews were used solicit high level end-to-end flow feedback and as well as specific controls. An Design LT review were needed to gather LT feedback on the UX flow and the company visibility.
After feedbacks from the rounds of internal and LT reviews were analyzed and iterated, it's time for me to start s design spec documentation and attaching hi-fidelity mockups and prototypes to the full-spec document. There were external leads (outside the key stakeholder) needed to sign off on the design documentation. Accessibility, Content Design, and Icon Design cross-functioned with us in making sure the specs fulfill all their respective requirements.
The redlines were needed custom components and optional for established components from the UI library. As you can see in the next picture, it's used to make sure the coded components match the design mockups as close as possible. There is a variation of this where we attach a guideline on how to translate design redlines to the WinUI XAML APIs for the dev to understand it better. In other words, whatever makes sense for the dev team.
The accessibility documentation were needed to signed off by the accessibility before we handed off the Engg. It includes the detailed behaviors of the controls when screenreader and keyboarding assistive devices are interacting with the UI. Once the feature are shipped, the accessibility would occasionally test the feature and file accessbility bugs as needed; and they also give an accessibility score to bring it into our attention.
The full-spec document were written and iterated by the PM and his/her peers; I attached the high fidelity mockups in the feature details section. The document were included in the 'package' that the design and product team hand-off to engineering team.
The implementation ran smoothly for the this feature. There was a minor technical challenge on how the users could pre-generate the filesize before running the GIF export process.
This feature is being worked on. We'll tell when it's shipped. Stay tune!
