Skitch for Windows Desktop

A design project for Evernote • 2012 - 2014

Skitch is a screenshot and annotation tool that enables users to quickly mark up images with text, arrows, shapes, and more. The Windows Desktop version of Skitch was the first major project I worked on while I was at Evernote. Around the time of my hiring (November 2012), the Windows client was badly in need of some design love, and I volunteered to whip it into shape. I did UX, visual design, and interaction design to streamline and enhance the app, while also attempting to adhere to Microsoft’s design system at the time. Here you can see some of my designs for the project.

A view of the app's first launch screen:

Visual design specifications for the main interface:

Educational tooltips appear when creating a new Skitch for the first time

Submenu breakdowns:

Share menu flows:

Custom Color Picker Designs

Part of the Skitch Windows redesign project involved coming up with a new custom color picker. This was a move to satisfy our power users who wanted more precise control over the colors of their annotations. I experimented with several different interface variations, and I ran user tests on each variation to determine the best approach.

Size Control Explorations

At the beginning of the project, I did a few explorations for what a separate size control would look like on the toolbar. It always bothered me that size was initially incorporated into the color bucket (it also bothered our users!). Eventually we did end up separating color and size in future design iterations.

Toolbar Prototypes

Although not part of the initial Skitch Windows redesign, the Skitch toolbar was an ongoing design challenge. I worked with some of the other team members to streamline the toolbar design, thinking through everything from icon design to tool hierarchy and organization. I was responsible for the toolbar's UX and interaction details, creating interactive prototypes and user testing those prototypes. Videos of my prototypes and short descriptions on each one are below.

1. The Double Wide

My idea with this prototype was to open a drawer for subtools and allow the drawer to stay open in case a user wanted to leave the subtools open. This ended up failing in the end due to the drawer's expanded state taking over too much canvas real estate.

2. Horizontal Shifter

This prototype was starting to move in the right direction. Instead of forcing subtools to occupy a new space, they would transition in from the right edge of the toolbar while the parent tools transitioned off the left edge. You could return to the parent tools by mousing off the toolbar. There were a few things in this prototype that needed some tweaking - for example, subtools transitioned back to the parent tools too quickly when mousing off the toolbar, and the lock icon for keeping subtools open wasn't easily understood. These issues would be addressed in future prototypes.

3. Horizontal Shifter with Color and Size

In this version, I added color and size to the toolbar to see how they would fit in with the rest of the design (thankfully they fit in pretty well!). I also modified the hit area for determining when subtools transition back to parent tools. The lock icon that was present in the previous prototype was changed to a pin icon, and moved to the top of the toolbar rather than the bottom. Per some user feedback, I also made it so you can click the white space underneath subtools to return to the parent tools.

4. Horizontal Shifter with Timer on Mouse Out

A couple small tweaks with this prototype made the toolbar feel just right. First, I added a timer when mousing off the toolbar, so the subtools don't immediately transition back to the parent tools. This gives users a little bit of flexibility when mousing off the toolbar. I also added a small delay before transitioning back to parent tools when a subtool is selected, so you can actually see the subtool being selected. This was the version of the toolbar that we ultimately ended up building for both the Mac and Windows versions of Skitch.

5. Vertical Shifter

This prototype was an exploration for how the toolbar would work if it were horizontal instead of vertical. I started working on this in conjunction with my Skitch 3.0 explorations. It needed a bit more tweaking, but I think it probably could have worked.

Toolbar Specs

After deciding on a toolbar direction through user testing the prototypes above, I drew up some cross-platform specs for the Mac and Windows teams to build off of.