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 prototyping had been largely completed, my focus shifted to the overall UX/UI architecture as well as dozens of individual features. Below, I have stuck to describing aspects of the design that I either led or had a very significant involvement in. Below is an advert that we produced for the beta launch that summarises the app  nicely.

 

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

 

Since the app was obviously going to be quite complex, it became obvious that we could not rely on displaying the entire range of UI upfront. To fix this, I created a dynamic system that provided relevant options depending on what the user was doing. One way of doing this was to create 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 (below are some relevant wire-frame concepts and images of our first Unity prototype.)

This was not an easy process. In many cases, patterns 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 laying 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 realise potential problems with my ideas. 

 

Designing the production version

 

I had a hand in designing the majority of the tools found in Paint. Below are two examples. First, the Curve Tool, which sought to improve upon the original MS Paint version 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 plenty more.

 

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 did quite a bit of lobbying to build 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.

Layouts_Pre_NeonArtboard 4.png