Microsoft Paint 3D
PC and tablet
I joined Microsoft to work as a UX/UI designer on Paint 3D, the successor to MS Paint. I was involved in this project from end to end and had a big hand in every aspect of its design - eventually becoming the design lead of the UX/UI architecture. This was a gigantic project that was initially split into two parts: the ‘core’ Paint app and the 3D prototype (where we developed experimental 3D features).
After research and initial prototyping was completed, I began leading the development of the UX/UI architecture - everything from high-level planning to visual guides. This involved working with the design leads of other applications across Microsoft (PowerPoint, Photos, Mixed Reality Viewer, etc.) to develop a standardised set of patterns while also coordinating with the Windows OS team on implementing visual and UX improvements that came with each new SDK. I also had a hand in designing most of the features found in the app, some of which are described below. Once Paint 3D was launched, I became heavily involved in QA - leading user research sessions to identify areas for improvement while helping to design useful telemetry that enabled us to verify (wherever possible) which changes were leading to an improved experience. Below, I have stuck to describing aspects of the design that I either led or had a very significant involvement in.
Getting started
I was over the moon when it was announced that our studio had been chosen to create the new version of MS Paint and that I was part of the initial team who would be building it from scratch. The brief was massive in scope: it would use the Universal Windows Platform, which allows a single app to run on a variety of devices, meaning that Paint 3D would be a touch-mouse hybrid.
Second, to cater to the gigantic existing user base (around 90 million active users per month), we also needed to update the features of ‘old’ MS Paint without compromising its simplicity. Third, we were asked to design an experience that would broaden the appeal to a younger, ‘Gen Z’ audience. Lastly, to make matters infinitely harder, we needed to design tools that allowed novice users to be able to create and edit 3D content (part of a wider ambition for Windows to ‘make 3D easy for everyone’). This combination of priorities was extremely tricky to navigate: old Paint has a deceptively large number of features buried under its simplistic
UI - many only accessible through obscure keyboard shortcuts - and the requirement to add 3D editing features on top of these implied a massive UI structure.
I began by researching relevant apps that catered to a younger audience (12-17), along with an analysis of a wide variety of creation apps, especially those that were created for tablet and phone devices. My main concern was to try and locate reoccurring patterns that were appropriate for both touch and mouse inputs.
To begin designing the overall architecture, I first created a large list of potential functionalities. This was a combination of the existing features in old Paint (including various updates) and new features that were implied by the introduction of 3d content. My approach was to design for the worst case scenario so the architecture could scale to handle hundreds of interlinked functionalities.
Prototypes: Dealing with Complexity
Due to the number of functionalities Paint 3D needed to support, it soon became obvious that we couldn’t displaying the entire range of UI upfront. To fix this, I created a dynamic system that provided contextual categories, such as ‘Art Tools’. In addition to this I collaborated with another UX designer to devise a secondary system for displaying relevant options that appeared temporarily when something was selected on the canvas. This allowed us to keep more difficult concepts like grouping out of the main UI.
Despite splitting the UI in this way, we encountered a lot of difficulty choosing simple patterns. In many cases, those that worked for 2D painting apps were incompatible with 3D functionalities. For example, we quickly discovered that 3D content necessarily required the existence of a layering system. However we knew that exposing such a system (like Photoshop, Cinema 4D, etc.) would complicate the app to the point of alienating novice users. Our other big problem concerned the method of selecting different objects in a given project (something original MS Paint never needed to solve). Most apps provide different types of selection tools to cater to different tasks (often a marquee select tool for pixels and an arrow tool for objects). However, the inclusion of different selection tools altered the experience of Paint completely and no prototype we created satisfactorily solved this problem. As innocuous as a selection system might sound, designing it was easily the hardest part of the overall project and only through repeated testing and trial and error did we come to a satisfactory solution.
Motion Prototyping
In many cases, I took to After Effects in order to communicate ideas for complex interactions and feedback mechanisms, especially those related to 3D manipulation. Very often the process of making these animations would help me recognise which patterns were worth prototyping and which should be discarded.
Designing the production version
I had a hand in designing the majority of the tools found in Paint. One example is the Curve Tool, which sought to improve upon the version found in original MS Paint by visualising it more clearly, allowing for better precision and compatibility with tablet devices. Secondly, the 3D Draw tool, originally developed by the prototype team and eventually handed to me for UX and UI improvements. Other tools I have had a large hand in designing include the 2D and 3D text tool, the Marquee/object Selection tool, the Brush Preview, the Stamp (sticker) tool, a new modern Crop tool, Online Publishing, the Magic Select tool (which cuts out foreground objects in an image) and the entire system for saving images and 3D models.
More Motion Prototypes
These animated wireframes were created after the prototyping phase when I was fleshing out the main navigation elements for the production version of the app.
Responsiveness
To be accepted into the Windows OS, your app is expected to be fully functional at very small sizes so the layout needs to be flexible and responsive. Here is portion of a spec I wrote to help minimise our UI when there was very little vertical space.
Compact Mode
To help make the app more appealing to use on tablet devices, I designed a compact version of the app. To keep development time down, I created a system where the existing UI layout could be reused. Single buttons would trigger pullouts that contained segments of the original layout, meaning that any change in the regular UI was automatically reflected in the compact version.
Style
As part of Microsoft's shift towards a more modern UI style, we became involved in the process of developing new UI patterns and showcasing them in our app. Since a big focus for us was to make Paint friendlier and more in line with apps that younger generations use, we saw this as a big opportunity to have an influence on the overall Windows design. One of these is a new file operations system that I designed, which is now being taken up by other apps in the Windows eco system. In May 2017, many of these new styles and patterns will be revealed.
