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 overall UX/UI architecture. This was a gigantic project that was initially split into two parts: the ‘core’ Paint app and 3D prototype, where the experimental 3D features were developed separately. Although I was often very involved in the development of new 3D features, my main focus was on the architecture of the app as a whole (as well as dozens of features), and I have stuck to describing aspects of the design where I either led or had a very significant involvement. Below is an advert that we produced for the beta launch that summarises the app very 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 these implied a massive UI structure. To make matters more complicated, since the app needed to be 100% functional on both touch and mouse devices, we could not rely on unique operations like the long-press or right-click.

I began by researching relevant apps that catered to a younger audience (12-17), along with drawing apps of every shape and size, especially those that were created for tablet and phone devices. My main concern was trying to locate reoccurring patterns that were appropriate for both touch and mouse. 

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, various improvements and new features that were implied by the introduction of 3d content. My approach was to design for the worst case scenario so that 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