Snip Insights

Millions of Windows users perform the same task every single day. Screenshots are taken all the time, but as technologies progress in leaps and bounds, screen capturing tools haven’t really changed at all.

Snip Insights is a Microsoft Garage intern project focused on injecting AI into the screen capturing process. Vancouver's Microsoft Garage is a 4 month internship that brings together teams comprised of 1 designer and 5 developers, to design, develop, and ship Microsoft projects with the support of a PM intern, sponsoring teams, coaches, and senior leadership. 

The Why

Challenge
Infuse AI into the screenshotting process to create an application that delights and empowers users. Ensure that the product meets both user goals and business goals. Seek user pain points and address them.

Solution
Snip Insights is a easy-to-use screen capturing tool that helps Windows users do more with their screenshots. It leverages AI services to bring image insights just a snip away.

The Process

The first part of this project was riddled with ambiguity. Our prompt was extremely broad.

There were many directions we could take the project. I brainstormed, created potential project goals, and made design principles. Mapping out features, personas, and user flows helped to narrow down the focus a little. 

The biggest challenge we faced was a broad problem and audience. Every person we talked to used their snipping tools in different ways. A mix of user research, user testing, and trial and error would eventually lead us to a product. 

User research

We conducted 4-8 sessions of user research with Microsoft employees each week, walking through our prototypes and builds. Feedback was invaluable to the design process, whether it be from a UX, UI, or potential features perspective. 

 

Design

We were building off a pre-existing project's codebase so I started from there. The application consisted of two components: a floating snipping toolbar and an insights/editing experience. Design was also limited by WPF, a platform that does not adequately support Fluent Design principles. I participated in weekly Sprint Reviews and Design Critiques, carefully considering the feedback. I would post iterations in our workspace to receive votes, comments, and feedback.

hji@3x.png
 

Redesign

We needed to unify the screenshot experience with the insights experience while also pushing the app towards a more modern design language.

As my developer team grew and could implement greater UI/UX changes, I came to the conclusion that a hefty redesign was necessary for a number of reasons. I tried to bridge and round out a disjointed user experience. I took learnings from diving into Fluent Design and tweaked according to the system. For the sake of a presentation to our stakeholders, the MVP of the redesign was designed, tested, and built in a one week sprint. Here are some of the wireframes stemming from that redesign that our team used to build the final app. 

Iteration 1 – 3@3x.png

Future Opportunities and Learnings
From working with an incredibly talented team to endless iterations, creating this application from the ground up was an incredible experience. This project was extremely fast-paced and had many stakeholders involved; I was constantly pushing out prototypes and wireframes to validate my ideas. I gained a lot of experience in what it takes to ship a product.