windows camera
2019
While working at Microsoft during 2019, I had the privilege to be the sole designer responsible for bringing the existing first-party Windows Camera app up to the latest design standards, while adding an assortment of new features for an enhanced user experience. Along with only two developers, we crafted a fully refined, featured packed Camera experience for nearly 20 million customers who actively use the app every month.
CAPABILITIES USED
UX Design, UI Design, User Research, Product Consistency, Iconography, Collaboration
MISCELLANEOUS
Work created at Microsoft
CAPABILITIES USED
UX Design, UI Design, User Research, Product Consistency, Iconography, Collaboration
MISCELLANEOUS
Work created at Microsoft
the redesign
The following are select screens showcasing the final Camera redesign when it was released to the general public.
For the Photo mode shown below, my primary goal was to emphasize the camera preview to where it would be clearly perceived as the dominant element. I aimed to minimize and simplify the UI controls, making them appear nearly invisible, while still providing an intuitive user experience across all types of device. To achieve this level of visual balance I explored close to 100 different layout variations, many of which were tested with real customers.
Similar to Photo mode, in the Video mode shown below, the emphasis again is on the camera preview, showing the user exactly what is being captured without any extras getting in the way. Camera preview dynamically changes to the 16:9 aspect ratio, but can also be altered via the Settings menu.
Video mode recording in progress scenario shown below. Once a video recording is initiated, the UI controls are stripped down to only the most necessary elements, providing a clear indication of progress and action to pause or stop the recording.
Since desktop PC's and tablets are rarely used to capture panoramas, only a small portion of engineering time was invested into enhancing the updated Panorama shown below. I made several design improvements which enhanced the visual guidance for the user, at the lowest possible implementation cost for engineering.
Working with our partner Office Lens team in India, we were able to utilize their SDK to bring document and whiteboard scanning functionality right into the Windows Camera, as shown below in the Document Scan mode. I worked directly with the Office Lens design team for several months to ensure that we had a cohesive user experience across our products.
In the previous version of Camera, previewing captured media launched the viewer experience within the Windows Photos app, which resulted in multiple open windows and confusion for the user. To simplify this we decided to design and develop a super light weight captured media viewing experience right within Camera. Once again, I aimed to design a minimal and highly functional UI experience which included basic image editing, video trimming, sharing and more.
The greatest challenge for this project was designing an intuitive interface which would dynamically adapt to any Windows device. The experience needed to work across all monitor sizes, laptops and tablets in portrait and landscape modes, while being optimized for mouse, keyboard, and touch inputs. The example below demonstrates how the app was made to accommodate these scenarios.
out with the old
Here's a look at the Camera app as it existed prior to my involvement with the redesign. The previous UI from 2016, shown below, was loosely based on legacy designs carried over by Microsoft from the Nokia devices. In general, it was not aligned to the Fluent design principles, which Microsoft established for Windows by 2019. The experience was not optimized for large screens and the overall features were limited.
In the old Photo mode shown below, the UI was in the way of the camera preview, buttons appeared very floaty, and certain elements did not pass the latest accessibility standards for Windows apps. The controls were also very spread out throughout the interface, requiring a lot of mouse or hand movement when performing basic interactions.
Old video mode. Floating buttons spread out throughout the UI. The previous capture control design was limited to only three modes.
|
Old video mode recording. Arbitrary use of button color and poor visibility of progress indicator.
|
Old panorama. UI wasn't clearly visible and on-screen guidance was confusing.
|
Old advanced Photo mode. Controls were completely custom, not shared by a common library, and did not adhere to Fluent design principles. The controls were revealed by a special gesture, not clearly communicated to the user.
|
redefining the ui
Since the primary goal was to design a cross-platform user experience optimized for mouse and touch inputs, I needed to design a fundamental system to accommodate these scenarios. By studying ergonomic and touch patterns on tablets in landscape orientation, shown below, I had some general guidance on how to structure the new UI.
Before diving into the intricate details, I created a simple layout guide which the developers used to set the foundation for the UI.
I gradually built in additional interactive elements to create a general structure for the UI before proceeding to the visual refinements.
Once all UI elements were in place, I went over the UI again with a visual design pass to ensure it was consistent with Microsoft's Fluent design standards, using common library controls as much as possible. Some controls needed to be completely custom, which I would later thoroughly define in the UI Toolkit. After the visual design was completed, I tested the UI reflow across various window sizes, as shown below. Photo credit.
The Advanced Photo mode shown below reveals additional camera adjustments which are toggled on through the Settings menu. I designed this mode to have a consistent user experience with the basic camera controls and kept the manual adjustment sliders as minimal and unobtrusive as possible.
The Settings menu, shown below, is a responsive panel which allows the user to customize the Camera experience and provide feedback to the team. I constructed it primarily using an assortment of Universal Windows Platform (UWP) common controls which established cohesion with other UWP apps and provided implementation efficiency for engineering.
After finalizing the landscape UI, I proceeded to translate it into a vertical format to accommodate for Windows devices, laptops and tablets, which support portrait mode and touch controls.
After several user tests, I observed that people generally held tablets in portrait mode towards the lower half region of the device. This, in most cases, prevented the hands from covering the physical camera on the back of the device and allowed for better balancing when palms were closer to the lower edge.
|
With this observation, I created a portrait-specific layout guide to communicate the altered UI arrangement for the developers to follow when implementing the reflow.
|
Following the wire-framing workflow I had done for the landscape layout, I created a similar UX guide to determine the general placement of controls.
|
Once the UX framework was in place, it was again time to skin the wireframe with a consistent visual treatment. The resulting interface was cohesive with the landscape version in every way, while accommodating the vertical screen aspect ratio and device ergonomics.
For this version of the Camera app we introduced a new light-weight media viewer for a streamlined way to review captured media. Similar to the capture experience above, I created a series of fundamental layout guides, which the developers used as the basis for their UI implementation.
A primary command bar would hold all commonly used controls.
A secondary command bar would provide controls visible during video playback.
An editor command bar would contain acceptance or cancelation commands during image editing modes.
The scenario with all controls showing would accommodate more advanced editing modes such as video trimming.
Once again the foundational UI elements went into place.
With the viewer layouts established, I did a visual design pass to align everything with the capture experience and test the layout reflow across window sizes.
The video playback mode with trim enabled shown below. Photo credit.
With the addition of Office Lens functionality within Camera, we needed to support cropping of scanned documents and whiteboards. I designed a simple crop interface which supported mouse and touch inputs.
UI Toolkits & patterns
I created detailed component sheets to supply developers with all assets needed for implementation. Below is a close look at some of the interface buttons shown in all their various interaction states.
In a similar way, I assembled a complete UI toolkit as the single source of controls used throughout the interface. Working in Figma allowed me to make responsive components, which I set up as symbols before building the UI patterns.
Using components from the UI toolkit as fundamental building blocks, I created over 30 detailed UI screens, at multiple sizes, to provide a clear reference for every screen within the app.
User Testing
Throughout the design process, I participated in multiple live user studies where customers got hands-on with some of the early Camera prototypes and provided feedback which helped me to refine the user experience. Shown below is one of these live user sessions at Microsoft's visitor center in building 92. Faces not shown to protect customer privacy.
Having fun talking to customers and getting their feedback about the new Camera user experience.
3, 2, 1... launch!
After around nine months, countless design iterations, cross-team collaborations, customer conversations, bug bashing, and final polish, the new Camera app finally launched across all Windows devices and made it to the Microsoft Store.
