WINDOWS 8 CAMERA APP

Project Overview

Primary designer for the Camera app experience for the Reimagined Windows 8 OS. The Camera app was one of a handful of Inbox Signature apps that shipped with the release of Windows 8 and introduces users to the concept of full screen modern app experiences using the new design language known as Metro.

The early planning phase for Windows 8 was a fast moving and constantly changing environment. Windows 8 would be the first time ever for a dedicated PC Camera experience in the Windows Operating System. However, the Camera app was a candidate for the cutting block early in the Windows 8 product cycle. By focusing on the common goal of delivering a great User Experience, the Camera app evolved under the radar and emerged as a first class app citizen in the Windows ecosystem.

Although I had already designed a usable windowed camera app model, I continued to explore a full screen camera model and that was the turning point for the app. The full screen explorations opened up opportunities to create a Camera experience that is aligned with the other Windows 8 Modern apps.

What I did

Cross-group collaboration  //  Product planning  //  Hardware / software integration  //  Interaction design  //  Prototyping  //  Visual design  //  Icon design  //  Touch integration  //  User Research

Dell Camera App Partner video

Partnering with the Microsoft marketing team, Dell created a great short tutorial for users new to Windows 8 that shows the Camera app interaction model and other aspects (Start tile, settings, in-app invocation and dialogs) of the Camera experiences that I designed.

Camera App First UX

One of the major Camera app design decisions was to shift from standard Photo-Video two button paradigm and double down on the W8 immersive Touch experience. The Tap Anywhere to Capture feature (see research at the bottom of this page) gives the user the option to Touch or mouse click anywhere on the screen to take a photo capture or start a video recording.

The Video mode button is a toggle and will enable video capture on button tap, then return to Photo capture mode if you tap on the button again. The default capture mode is Photo. The Camera options button opens the camera settings fly out. The Timer button will enable a screen countdown before a photo is taken or a video capture begins. The Change camera button is visible if the system detects more that one camera. If there is a forward and rear facing camera on the device, users can toggle between active cameras.

Photo Crop View

Simple and intuitive design for photo cropping a captured image. Easy to use crop interaction flow allows unlimited photo crop capabilities.

Video Editing View

Streamlined easy-to-use media controls for video playback with the ability to trim captured video length.

Camera Roll View (semantic zoom)

Using a two finger “pinch” gesture on a photo or video capture preview, users can access the Camera Roll by using semantic zoom, then use a “swipe” gesture to pan the camera roll horizontally.

Camera Settings Flyout

Although Windows 8 has a Settings fly out system invoked from the Charms bar, the Camera app required an additional in-app Settings fly out to open up third party developer scenarios.

Camera Settings Effects

In partnership with the Microsoft Hardware LifeCam Studio team, we designed an easy-to-use photo effects experience that utilized the camera settings fly out surface. NOTE: This example shows an alternative Appbar commanding concept for button toggling between Photo and Video capture modes.

YOU Video Profile

The ability to call the Camera API from a 3rd party partners like Facebook or Windows system surfaces like PC Settings was an important Windows 8 developer scenario.

From the W8 Account Profile page in PC Settings, users can create a profile photo or create up to 5 seconds of video capture that will play when the profile is loaded on screen. Great fun designing one of the lesser known, but major delighter features in Windows 8.

Camera App Snap View

Snap view design of the Camera app alongside the Modern Internet Explorer browser. Camera app Snap concepts included Skype integration scenarios.

Camera App Snap View

Snap view design of the Camera app alongside the Modern Internet Explorer browser. Camera app Snap concepts included Skype integration scenarios.

Camera App Portrait View

Portrait rotation implementation.

Camera app explorations (click through)

From windowed to full-screen immersive.

Tap Anywhere to Capture research (click through)

The proposal of the Tap Anywhere to Capture user experience required verification that accidental captures would not be a significant issue. I proposed adding an edge buffer “dead zone” to the screen perimeter to minimize accidental captures while holding the device, taking a capture, picking up the device or rotating to Portrait.

I also worked with my research partner to explore heatmap signature data that shows 2 types of user patterns while holding a Tablet device.

1) Palm Grip (bottom corner is nestled in the corner of the palm)

2) Edge Grip (holding the device along the edge. Distance from the top will vary by individual, device, UI element position)

These patterns supported my position that accidental captures would not be a significant issue and when combined with a functional prototype I created that we used in user studies, the positive results removed all concerns around accidental captures and green lighted this feature.

Camera App workflow

Video capture workflow.

Camera App post-mortem

The difference between what the feature vision is in the beginning and what the team will actually build and ship are often significant. As the product cycle progresses, reality is there’s never enough time and resources to build everything that we originally planned. “Cutting is shipping” is a popular engineering catch phrase at Microsoft.

Once the product ships, the feature team will meet and capture the missed opportunities. Feature teams who take on this area in the next version of the product will use previous post mortems as a starting point. NOTE: Most of the missed opportunities on this whiteboard were implemented into the Windows 8.1 version of the Camera app.