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 two developers dedicated to the project, we crafted a fully refined, feature packed Camera experience for over 20 million customers who actively use the app every month.
CAPABILITIES USED
UX Design, UI Design, User Research, Product Consistency, Iconography, Collaboration, Figma
MISCELLANEOUS
Work created at Microsoft
CAPABILITIES USED
UX Design, UI Design, User Research, Product Consistency, Iconography, Collaboration, Figma
MISCELLANEOUS
Work created at Microsoft
out with the old
Here's a look at the Camera app as it existed prior to my involvement on the redesign. The existing 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 or Universal Windows Platform (UWP) design standards. The experience was not optimized for small screens and the overall set of features was somewhat 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 UWP apps. The controls were very spaced out throughout the interface, requiring a lot of mouse or hand movement when performing basic interactions.
Old video mode included floating buttons spread out throughout the UI. The previous capture control design was limited to only three modes.
|
Old video mode recording featured an arbitrary use of button color and poor visibility of progress indication.
|
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 or UWP design standards. The controls were revealed by a specific gesture, not clearly identified to the user.
|
redefining the ui
Prior to redesigning the app UX and UI, I conducted live user studies to get a good sense of how users interacted with the app experience on laptop and tablet devices. (Faces not shown for customer privacy.)
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 observing the ergonomic and touch patterns on tablets in landscape orientation, shown below, I had some general guidance on how to structure the new UX.
Before diving into the visual details of the landscape camera experience, I created a simple layout guide which the developers used as the foundation for the UI.
I gradually built in the interactive elements to create a general structure for the UI before proceeding to the visual enhancements.
After finalizing the landscape UX, I proceeded to translate it into a vertical format to accommodate the Windows devices and tablets, which support portrait mode and touch controls.
During the user testing, 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 with palms closer to the lower end.
|
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.
|
For the redesign, I introduced a new media viewer experience for a cohesive way to review captured media. Similar to the capture experience, I created a series of fundamental layout guides, which the developers again used as the basis for the UI implementation.
A primary command bar would contain all commonly used controls.
A secondary command bar would provide controls visible during video playback.
An editor command bar would contain confirmation commands during image editing modes.
The scenario with all controls shown below would accommodate more advanced editing modes, such as video trimming.
Once the layout guides were established, i set the foundational UX controls into place.
the final redesign
Once the UX guidance shown above was finalized and approved, it was time to visualize the final app UI, while adhering to Fluent and Windows UWP common control standards.
For the Photo mode, my 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 device types. To achieve this level of visual balance I explored dozens of layout variations, some of which were tested with actual users.
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 simplified 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 mode 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 into the Windows Camera app, as shown below in the Document Scan mode. I worked directly with the Office Lens design team 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 outside 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.
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 and UWP 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 Camera app 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 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 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.
The portrait interface was cohesive with the landscape version in every way, while accommodating the vertical screen aspect ratio and device ergonomics.
Using the established viewer layouts, I did a visual pass to align everything with the capture experience and test the layout reflow across various window sizes.
The video playback viewing 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.
One of the greatest challenges 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 functionally optimized for mouse, keyboard, and touch inputs. The example below demonstrates how the app was made to accommodate these scenarios.
UI Toolkits & patterns
I created detailed component sticker-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 several live user studies where customers got hands-on with some of the early Camera redesign prototypes and provided feedback which helped me to further refine the user experience. Here is one of these live user sessions at Microsoft's visitor center in building 92. (Faces not shown for customer privacy.)
3, 2, 1... launch!
After nearly nine months of work, countless design iterations, cross-team collaborations, customer studies, bug bashing, and final polish, the new Camera app finally launched across all Windows devices and was published to the Microsoft Store.
