Prototyping Microsoft Windows 11

Microsoft has at its core a strong DNA of prototyping but with such an advanced functional product such as Windows 11 how can the team have the ability to create advanced prototypes without everyone having advanced knowledge? To achieve this I created a Windows 11 Interaction library in ProtoPie.

Designing an operating system takes an immense amount of effort. It takes many teams of designers to design Windows. Not only is there the OS to design but also all of the software that sits on top of it.

Prototyping is a core principle and discipline within the product design process at Microsoft. It’s a key part of designing both hardware and software. Prototyping is a natural part of the hardware design process so it’s only natural to continue that philosophy through the software design process as well.

My Job at Microsoft was threefold:

1. Build Windows 11 as an interaction library in ProtoPie that could be used by designers to rapidly prototype both Windows 11 and the software that sits on top of it.

2. Teach designers ProtoPie so that they could own the complete design process and design in a space that was realistic to the final product.

3. Work with the design teams to help them prototype their design iterations for Windows 11

Building the Windows 11 ProtoPie component library

I wanted designers to really embrace and own the prototyping process so the idea of building a library was key to that. Building Windows 11 in ProtoPie is no mean feat but ultimately it had to be easy to use with a low barrier to entry otherwise it would just end up gathering dust in some virtual folder on SharePoint. To achieve this we had to think very carefully about the features and principles that the library would need to adhere to. The library had to be:

• Flexible

• Smart

• Theme aware

• Configurable

• Easy to use

• Deconstructable

Flexible and smart

Like in the real world, the Windows 11 ProtoPie library needed to be usable to prototype a Windows experience on any device form factor. This meant that all of the components had to be flexible, resizable, and configurable. Both spacing and sizing could be configured using a custom control panel that designers could simply drag into the pie file and played with when the prototype was running.

The Taskbar is like the brain of the library. As with real Windows. Many interactions are connected here. Creating an app launch can be done in a few minutes. For the core-shell surfaces (these are things like Quick Settings and Action Center) dragging them to the scene is all you need to do. For others such as launching an app in a window and having it show on the Taskbar only requires a matching keyword and the smart components do the rest.

Theming

Personalisation is a big part of the Windows 11 experience so we wanted the components to be theme-aware. The biggest aspect of theming that we wanted first to implement was the ability to switch a prototype from light mode to dark mode. To achieve this, a framework was created inside of every component so that they could be switched.

Theming is also decentralised, what this means is that the theme can be triggered from anywhere by using a simple ProtoPie message. Type in the keyword ‘light’ or ‘dark’ and the prototype will change accordingly. Because theming is a custom framework, it can be extended and used in newly created components, making it easy for the library to be updated and extended.

Easy to use

I didn’t want designers to have to learn advanced prototyping to create advanced prototypes. For example, the Window component can be initially shown or hidden by changing a simple override. On top of that using the Window component to show an app is as simple as switching a nested component with the prototype of your app living inside a window container. This could be a simple image or a full-blown interactive prototype. What you get for free is all the inherited window functionality like maximise and minimise and the ability to resize and drag. Below is a training video explaining how to add a simple static app image.

Upskilling a whole team

There were several approaches that I used to teach interaction design with ProtoPie. One of the best ways to learn anything is to be able to reverse engineer and deconstruct. All the component internals were accessible and neatly organised and named in a way for them to be as self-documenting as they could be.

Additionally, more traditional methods were also used. I set up a Microsoft stream Channel and recorded several training videos about how to get the grips with the basics of ProtoPie as well as how to use the Windows 11 for ProtoPie components. These recorded videos were augmented by many live sessions that I ran within Microsoft Teams to enable people to live-learn and ask questions.

The Future of Designing for Digital

Having the ability to design products realistically that behave like the real thing is key to making the best products. Having a process and tools to enable your design team to be inclusive, and giving designers ownership of the whole design process is a must. Of course not every designer is going to be able to get to grips with the complexity so having an interaction design system built for ease of use is a great way to get your design team started with high-fidelity design without disrupting their design ideation flow state.

Get in touch if you’re interested in having your own interaction library built in ProtoPie.