Skitch for Windows Desktop
Skitch is a screenshot and annotation application 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 tackled 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! Throughout the course of the project, I worked on the UX, visual design, and interaction design for Skitch Windows 2.0. Here you can see some of my designs and specifications for the app.
A view of the app's first launch screen:
Visual design specifications for the main interface:
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.
Although not part of the initial Skitch Windows 2.0 redesign, the Skitch toolbar was an ongoing design challenge. I worked with some of the other team members to make the toolbar the best it could be, 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. Links to my prototypes and short descriptions on each one below.
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.
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.
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.
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.
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.
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.