
Surface Duo combines the absolute best of Microsoft with the absolute best of Android into one product.

It brings together the power of Microsoft 365 experiences and the full ecosystem of Android mobile apps into one device, with two screens that you can take anywhere.

These groundbreaking experiences are packaged into a robust and sleek industrial design that is synonymous with Surface. It is the thinnest mobile device on the market.

![Surface Duo is the result of years of Surface design and research. Pictured with Surface Slim Pen and Surface Earbuds.](/images/surface-duo/duo-id.jpg)

Duo enables you to be more productive, either by spanning one app across the dual 5.6-inch PixelSense Fusion displays or by using two apps at the same time and multitasking across them.

![You can multitask with two apps on Surface Duo, one on each screen. Shown is Spotify and Outlook.](/images/surface-duo/duo-spotify-outlook.jpg)

As part of my role on SwiftKey keyboard, I worked with the team to adapt and tailor our typing experience to this brand new form factor. Input is one of the most critical experiences on any device and so it was essential that we got it right.

SwiftKey is able to adapt to every single one of the modes this device supports -- from single mode to dual mode in both portrait and landscape orientations that are a category first.

![SwiftKey adapts to the various modes of Duo. Shown is the keyboard when the device is rotated into compose mode.](/images/surface-duo/duo-swiftkey.jpg)

We spent a lot of time researching how people react to and use SwiftKey on this device. This was crucial to our design process, more so than usual due to the new nature of the form factor.

![SwiftKey on Surface Duo being used to reply to a message.](/images/surface-duo/duo-swiftkey-dp.jpg)

I also had to opportunity to collaborate closely with the Surface design team themselves to craft tailor-made software experiences that work beautifully in any posture.


Do one better. There's a new way to get things done.

Surface Duo


Figma is the design tool of choice for many teams at Microsoft, and this applies to the design team at [Microsoft SwiftKey](https://www.microsoft.com/swiftkey). While we had a robust component library in place -- it was due a refresh after completing a major project that saw us rebuild many of our controls and panels. I worked with another designer on the team to lead an effort to create a new, modern library system that takes advantage of the latest features in Figma and scales well across our entire product.

We use Figma because of it's collaborative nature -- which is crucial for us. While most of the team is in London, we collaborate with partners on all sides of the world and need to be able to share documents quickly and get feedback instantly. This ease of collaboration also makes it easy to share work with partner teams as there is no need to send file revisions, we can simply link them to our living Figma document.

![Keyboard panel buttons from the Android component library.](/images/swiftkey-design-system/buttons.png)

I oversaw updating our Android component library. Many of the components were outdated or did not reflect product truths, especially so for our settings app which had undergone a massive rearchitecture and redesign as part of work for [Surface Duo](/work/surface-duo). I recreated these components from scratch, ensuring they accurately represented our in-market product.

![The library scales to hundreds of components and styles.](/images/swiftkey-design-system/all-components.png)

The new components also take advantage of many new Figma features, such as Auto Layout, that were not available when the team originally switched to this tool. This reduces designer time spent adjusting the position of elements to be "perfect" for mockups, allowing the team to work faster and more efficiently.

I also spent time providing new iconography for SwiftKey, partnering with our internal Design System Studio to craft a custom set of Fluent Icons specifically for the keyboard (see more about these on the [Fluent Icons](/work/fluent-icons/) page). These icons are lighter in weight, and doing this work allowed us to align with Fluent while still being respectful to the existing themes and design of SwiftKey.

![Our design language contains all of the Fluent Icons needed for SwiftKey.](/images/swiftkey-design-system/icons.png)

For flexibility in theming, the keyboard design is built from a set of core "variables". This allows a designer to update the theme of every keyboard component very easily -- changing only a few main components versus having to manually adjust every item. By duplicating the library, it's possible to quickly scaffold a new theme design without having to spend time inside our online theme designer tool.

I organized the components themselves in a logical and neat fashion to make it quick for our designers to get going and make adjustments where needed. Each component has a light and dark style, and it is easy to switch between them using the instance picker. Colors and typography are also arranged and named appropriately.

![Color styles, typography ramp and components are all neatly organized to make it quick and easy for our designers to get going.](/images/swiftkey-design-system/overrides.png)

Download Microsoft SwiftKey for [Android](https://play.google.com/store/apps/details?id=com.touchtype.swiftkey&hl=en_US) or [iOS](https://apps.apple.com/us/app/swiftkey-keyboard/id911813648).


I helped lead an effort to clean up and modernize our internal Figma design systems.

SwiftKey Design System


The Fluent UI Icons are a set of monoline icons from Microsoft, designed originally for mobile apps but with the web and desktop in mind. These icons are based on metaphors established by the older "MDL2" set originally conceived and widely used by the Windows team. They compliment the new [Fluent Design System](https://www.microsoft.com/design/fluent/) and the additional full-color app icon work undertaken by Office, Windows, and countless other teams across Microsoft.

I was part of a team spanning designers from across the company that laid the groundwork for this icon system. We were able to quickly scale the system from a handful of icons to thousands over a few months. Using an agile approach we were able to release new icons every week, prioritizing icons for teams that needed them immediately.

While being based on the same or similar metaphors to make the transition easier, Fluent Icons have a slightly different visual style. The icons also have rounded corners and end-caps. They span all platforms, creating harmony and uniformity across apps and services.

![Examples of Fluent Icons in Yammer on iOS and Outlook on Android, showing how they can scale across platforms.](/images/fluent-icons/examples.png)

While the project originally started with designing Fluent Icons for mobile use, they have also started appearing in Microsoft's desktop apps -- notably first in Microsoft Edge. A new size, 20px, was specifically selected for use in desktop settings as with padding it allows the Fluent Icons to replace existing 16px MDL2 assets.

![Fluent Icons in the Microsoft Edge web browser.](/images/fluent-icons/edge.png)

To allow flexibility, the icons are available in multiple styles and sizes. The size ramp goes from 16 to 48 units, with each size being hand-drawn to ensure pixel perfection. Outline and filled states are used for indicating selection, or when a filled icon will be more visible than one that is outlined.

![The size ramp and outline vs. filled states.](/images/fluent-icons/ramp.png)

There is also a comprehensive modifier system that can be used to easily add common states to an icon -- for example, a plus icon can be affixed to any corner to create an "Add" state. These modifiers are consistent so users can reliably know where to see the state or additional action an icon represents.

![A small subset of the available modifiers.](/images/fluent-icons/modifiers.png)

There is a great article on Microsoft Design's Medium site where Fluent Icon leads answer a few questions from the community. I recommend checking it out: [Developing an Open Source Icon System at Microsoft](https://medium.com/microsoft-design/developing-an-open-source-icon-system-at-microsoft-b1796315df9f). The icon system is now [open-source](https://github.com/microsoft/fluentui-system-icons) and available for anyone to use in their apps and websites.


A brand new monoline icon system for Microsoft.

Fluent Icons

Windows for Foldable Devices. Not affiliated with Microsoft.

Project Meta


Designing mobile browsers is hard. Fitting the web in the palm of your hand has been a challenge that has been solved to varying degrees of success over the years.

I'm a firm believer that Windows Phone had one of the best browser navigation paradigms ever created. All the controls were located at the bottom of the screen, easy to reach without stretching. This was especially good on larger screens.

Yet for some reason, no other mobile browser has adopted a similar UI. A lot of them make a compromise, with a toolbar at the bottom and the address bar at the top. I believe all of the elements should be at the bottom--just like Windows Phone.

This new design for Edge mobile places an emphasis on usability. All navigation controls are located at the bottom of the screen. The address bar takes up most of the space, with buttons to the left and right for entering the tab view and opening the menu respectively.

![New bottom-mounted navigation makes everything very easy to reach.](/images/edge-ios-redesign/Edg3Up_BrowseAddressMenu.jpg)

The menu itself slides up from the bottom and provides the same options as are available in the Edge browser today. They've been re-arranged to take up the full-width of the screen for easier tapping.

## Synced Tabs

A rather useful feature that was included in Internet Explorer 11 for Windows 8.1/Windows Phone 8.1 was tab syncing. You had the ability to access tabs from your phone on your PC, and vice versa. With this redesign, I have brought back this feature.

![Tab syncing between an iPhone and a Windows PC.](/images/edge-ios-redesign/EdgPCLockUp_TabsSyncOld.jpg)

Tabs can be synced between all sorts of devices now that Edge is available everywhere, not just Windows-based platforms. In addition, if you have a tab open on one device and then pick up another, there is a new notification that prompts you if you want to continue browsing on that new device.

![You can pick up on your iPhone just by tapping the notification.](/images/edge-ios-redesign/EdgMacLockUp_Notif.jpg)

The tab view itself went through multiple iterations before I settled on the final design. Originally I used the Microsoft iOS Fabric-style segmented control (furthest-left screenshot), but with iOS 13 there is a new segmented control that has "depth" thanks to new shadows. I decided to adopt this control as it feels more in line with Fluent Design on the desktop.

![](/images/edge-ios-redesign/Edg3Up_TabEvolution.jpg)

On iPad, the tabs now adopt the same rounded corners as on the desktop version of Microsoft Edge.

![The tab bar in Edge for iPad has evolved to match that of it's desktop counterpart.](/images/edge-ios-redesign/EdgiPad_Tabs.jpg)

## Menus, Settings, and Search

The Hub and Settings pages both use the new iOS 13 modal panel. This helps provide a sense of context and allows the user to swipe down to easily dismiss. The new Settings page has new icons next to many of the subcategories for easier identification.

![The Favorites section of the Hub and the redesigned Settings menu.](/images/edge-ios-redesign/Edg2Up_Menus.jpg)

The Search experience has also been evolved with a new "Cortana Suggestion" region. This is similar to the suggestion area in the outgoing version of Edge on Windows 10--typing in a query can show a top site or a knowledge suggestion.

![](/images/edge-ios-redesign/Edg2Up_URLBar.jpg)

## Inking on iPad

I also decided to add inking capabilities to the iPad version of Edge. These mirror the capabilities of inking in the outgoing Windows version of Edge. These _Web Notes_ can be saved or shared.

![Inking in Edge for iPad.](/images/edge-ios-redesign/EdgiPad_Ink.jpg)

## Dark Mode

With the new style guidelines given for the upcoming Dark Mode in iOS 13, I thought to also redesign the dark interface of the Edge app.

![The refreshed Dark Mode gives the app a whole new look and feel.](/images/edge-ios-redesign/EdgiOS_DarkMode.jpg)

---

**While this design focuses on iOS, a lot of these improvements can be applied to Android too.**

The new design also works there, with minor changes to adopt Material Design patterns. Inking could also be added to certain Android phones—such as the Galaxy Note line.

If I ever get around to making mockups for the Android version, I'll link to them here.


A focus on one-handed usability and new cross-device experiences.

Microsoft Edge for iOS redesign


This weekend, I posted some initial mockups for a project called "Cortana OS" to Twitter. Character limits make it hard for me to convey everything I want to, so I wanted to write this short post explaining some of the design decisions that went in to this.

## Branding

_Cortana OS_

It sounds strange and perhaps should only be considered a working title (I've been suggested plenty of different names), but let me explain why it **isn't** called _Windows_.

This product, while following a similar design language and interaction model as Windows, isn't Windows. It's something completely new, free from legacy components. Windows RT and the later Windows 10 S have both suffered because they were branded as _Windows_. Users entered the product with an expectation that because it carried the windows name, it could do run all their legacy apps and features.

Calling this product something entirely new helps break away from that expectation.

## Visual aesthetic

![The Mail and Store apps in Cortana OS shows how rounded corners are used throughout the design, complimenting the radiused corners of the display.](/images/cortana-os/rounded.jpg)

Cortana OS devices come with screens of all shapes and sizes — they may be square or they may be rounded, like in the examples shown. To compliment these various screen shapes, the system adapts the corner radius of interface elements. On a square screen elements have subtle rounded off edges, while on rounded screens the elements have more pronounced radius.

This is part of creating a more friendly aesthetic. Cortana is a bubbly and fun personality, and thus this Cortana OS product should align to that.

## Gestural interface

![The keyboard is powered by the same SwiftKey intelligence as on Windows 10 and includes gestural typing. Other gestures are used to access system surfaces.](/images/cortana-os/kbandstart.jpg)

To create a simpler experience, there is no taskbar of any kind in Cortana OS. This presents a question — how do you navigate between their apps and other system surfaces?

The answer is: _Gestures._

Similar to the gestural system on products like iPhone X, a swipe from the bottom of the screen will display the Start overlay and this works no matter where you are in the product.

A swipe from the top edge of the screen will present a multitasking view similar to that on Windows 10. You arrange apps in split-screen setups by dragging them to the left or right of the screen.

A swipe from the right will present the familiar Action Center, already found on Windows 10.

## Other loose ends

![Microsoft Edge on Cortana OS has the same rich features as it does on the desktop — including picture-in-picture and assistance.](/images/cortana-os/other.jpg)

_"What about the desktop?"_

Cortana OS does not have a desktop mode as this would contradict the simplistic nature of the product. Apps can run in a split-screen arrangement, but there is no freeform windowing by design.

_"Where are the Live Tiles?"_

As [reported by Windows Central](https://www.windowscentral.com/are-windows-10s-live-tiles-dead) last week, it's looking like Microsoft's upcoming "Windows Lite" doesn't include Live Tiles. I can understand why, users can be confused when their app icons seemingly keep changing. Because of the news that Lite may ditch tiles in favor of static icons, I've done the same.

_Note: This content was rewritten in July 2020, alongside the addition of updated renders._

A hypothetical take on Windows 10 designed around proactivity and assistance.

Cortana OS


I worked with [Ben Fox](https://twitter.com/ductionist) at User Camp to help reimagine the Microsoft Store with a new featured apps layout and improved editorial content. The aim was to take the best parts of the new Mac App Store in macOS 10.14 Mojave and apply them to the Store on Windows.

If you’re interested in reading more about this, I’d highly recommend taking a look at Ben’s blog post over on Medium: [Lessons from the Dark Side](https://medium.com/user-camp/lessons-from-the-dark-side-6f8b6e2db5f7).

## Discovery

There needed to be a way for users to discover the new editorial content. It made most sense to replace the existing hero elements on the Apps tab with stories about apps, developers, and more.

![The Apps tab homepage has been repurposed as a hub to discover brand-new content from the Microsoft Store editors.](/images/microsoft-store-content/discover.jpg)

## Featured content

Next, there needed to be a way of presenting these new collections and feature pieces. The design here mimics the Mac App Store, with a hero element on the left and scrollable content on the right. Users can install apps directly from the featured pages.

![A featured collection of three apps.](/images/microsoft-store-content/collection.jpg)

Apps can also be featured on their own:

![A single feature piece. The same left-panel hero image is used, but now with a floating card giving more info about the app.](/images/microsoft-store-content/app.jpg)


Reimagining the Microsoft Store with new new featured apps layout and improved editorial content.

Microsoft Store Content


The **Your Phone** app is launching with the Windows 10 October 2018 update as a new way to connect your Android phone to your PC and access messages and photos. I’ve had a chance to try it out for a while in preview builds, and have come up with a few ideas on how the messages function can be expanded and how calling features can be added to the app. This project focused on these two things.

## Messages

The messaging features of Your Phone are already quite well done today. The next two screens mainly show a slight redesign of the app overall, and the application of Acrylic material to the message list. The conversation view has also been tightened up.

![The messages view of Your Phone. No conversation is selected right now.](/images/your-phone-redesign/YP_Messages.jpg)

![The messages view of Your Phone, now with a selected conversation thread.](/images/your-phone-redesign/YP_Messages_Selected.jpg)

What is new is this popover that now appears when tapping or clicking on a contact’s avatar. This view provides clear information about the person (or persons, in the case of group conversations) you are talking to. It’s also possible to initiate a phone or Skype call directly from here, as well as map an address or start composing an email.

![A popover displays contact info about the person the user is conversing with.](/images/your-phone-redesign/YP_Messages_SelectedInfo.jpg)

## MyPeople

This is a feature that has been requested on the Feedback Hub, so I decided to create a mockup showing how it could be implemented. It appears like most other MyPeople flyouts, and shows the message thread for whatever contact has been pinned.

You can also drag items into a chat thread to send them—in this case, it’s images. Different options may appear depending on what’s being dragged. In the case of images, an option would be shown to quickly upload them to the OneDrive cloud service and then share a link with the recipient—allowing for sharing without losing quality due to MMS restrictions.

![A MyPeople flyout showing an ongoing conversation with a contact. Files are being dragged from File Explorer into the conversation—in this case: images.](/images/your-phone-redesign/YP_Messages_MyPeople.jpg)

## Calls

Logically, one of the next steps for the Your Phone app after photos and messages is the ability to receive and also place phone calls. The next few screens show how this feature could be incorporated.

First you can see how the list of recent calls would look. There are status icons associated with each call, informing the user if a call was outgoing, incoming, or if it wasn’t answered. Wherever possible, there is a button that can be tapped to instantly initiate a new call with that contact.

![Recent calls from the user's Android phone are displayed.](/images/your-phone-redesign/YP_Calls.jpg)

In addition to seeing and making calls to phone contacts, there’s also a Bing-powered search experience that allows a user to type a query—in this case, Martina is looking for lunch in the Bellevue area—and see matching businesses or people. From there, the user can tap an item to view more info or instantly go into a call by using the phone icon.

![The search box allows users to find not only contacts, but also businesses. In this example, we are looking for places to have lunch.](/images/your-phone-redesign/YP_Calls_Search.jpg)

When in progress, calls are displayed in a small CompactOverlay window with buttons to quickly perform common actions such as putting the call on hold (where supported), muting the user’s microphone, or ending the call.

![A CompactOverlay window shows an ongoing call with a contact.](/images/your-phone-redesign/YP_Calls_CompactOverlay.jpg)

Incoming calls are displayed as standard Windows notifications.

## Inking

Pen input is becoming a core part of a lot of Windows experiences. The October 2018 update alone introduces a new screen sketching app and an updated sticky notes experience. I believe inking should also be a part of the Your Phone app.

Here you can see how a user can select a photo (these photos are a collection of images from the connected phone itself, and from the user’s pictures folder on their PC), open it up in a larger previewer, and then use their pen to markup the image before then sending.

![The attach panel showing the most recent photos from the user's phone and PC.](/images/your-phone-redesign/YP_Messages_Attatch.jpg)

Note how there’s the usual set of Windows Ink tools as well as a crop button.

![The attachment markup editor.](/images/your-phone-redesign/YP_Messages_AttatchMarkup.jpg)

Who doesn’t love cute dogs? 😄

![The inked image has now been sent to the recipient. They can use Ink Replay to see exactly how the sender drew on the photo.](/images/your-phone-redesign/YP_Messages_AttatchSent.jpg)

## Final remarks

I haven’t focused on the photos and notifications part of the Your Phone app just yet—I think the photos part doesn’t need much more work and notifications is a topic for another day when I can look into how they could be implemented into the Windows Action Center. That will be the subject of a second design piece sometime in the future.

In the meantime, this concept shows how more functionality could be added to the app while also giving it a fresher look that’s more in line with the Fluent Design System. Let me know what you think!

Thanks for reading! 🙂


A fresh lick of paint and an even fresher set of features.

Your Phone redesign


This project focused on building a lightweight and modern podcast consumption app. While there are many great third-party podcasting apps on Windows, there’s no solution built into the OS—this app aims to fill that void.

## Listen now

This is the first page the user sees when the app is opened. They’re presented with a collection of some of the podcast episodes they haven’t listened to.

![The Listen now tab, showing unplayed podcast episodes and suggested podcasts.](/images/podcasts-app-concept/PodcastsListenNow.jpg)

Below this are suggested podcasts that the user might enjoy. They can subscribe to the podcast directly from this page, or click on one to view it in more detail.

Connected animations are used in the transition between pages in this app, helping the user remain aware of context and where items will return to when the back button is pressed.

Once on a podcast info page—the user can select an episode to play or get more info by right-clicking. This context menu provides options to not only play the content, but also download it to device for offline listening, getting more details, sharing the episode, or reporting it for inappropriate content.

![A podcast detail page, showing the context menu displayed when an episode is right-clicked.](/images/podcasts-app-concept/PodcastsInfoContextMenu.jpg)

## Search

There is a search box on the right side of the navigation bar, which (rather obviously) searches the catalog of available podcasts. The top three recent searches are shown first (this history can be cleared and/or turned off in the app’s settings), then trending searches are shown—potentially helping users discover new content based around what other people are listening to.

![With the search box selected, you're able to quickly see recent searches and trending searches (things that many people are searching for).](/images/podcasts-app-concept/PodcastsInfoSearch.jpg)

Finally, on certain pages there may be an option to only search in the context of that page. On this podcast info page, toggling that option would mean only that podcast’s episodes would be searched.

## Exploring new podcasts

Under the **Explore** tab, users can discover new podcasts—with both curated selections and suggestions based upon listening history.

![The Explore tab showing a collection of featured podcasts and picks by editors.](/images/podcasts-app-concept/PodcastsExplore.jpg)

Users can also browse by featured podcasts publishers/providers or by category.

## Video

As well as audio podcasts, users can access and play video-based podcasts.

![A video podcast playing, with a darker background than the rest of the app's user interface.](/images/podcasts-app-concept/PodcastsVideo.jpg)

Video podcasts can also be set to display in the corner over the user’s other windows (CompactOverlay mode).

## Multitasking

Above I mentioned how video podcasts can be run in CompactOverlay mode, however they are not the only podcast type to do so. Audio podcasts may also be shrunk down into a persistent floating window, allowing the user to work while still having quick access to playback controls.

![The Your Phone app open while the Podcasts app is displayed in a small compact window over the top-right corner of the desktop.](/images/podcasts-app-concept/PodcastsCompactOverlay.jpg)

For example, here the user is sending a message to a friend using the Your Phone app and the Podcasts app window has shrunk to the top-right corner of the screen. It uses colored Acrylic material, the color being automatically picked by the artwork of the podcast.

## Final remarks

This new Podcasts app gives users a simple way of listening and managing podcasts—both audio and video. Smooth animations and a clean design help keep users engaged. CompactOverlay support makes it easy to multitask while still keeping an eye on what’s playing.

Thanks for reading! If you liked what you saw, sharing would really help me out! 🙂


Building a lightweight and modern podcast consumption app.

Podcasts app concept


This project focused on making the Windows Out Of Box Experience (OOBE) simpler and look more in line with the Fluent Design System that’s been making its way into Windows over the last year.

## Startup and welcome
When the user switches on their PC for the first time, they are presented with a welcome screen that displays a variety of common languages on the left. Each language is displayed in its localized name—as you can see, Germany is written as _Deutschland_.

![](/images/windows-oobe-redesign/welcome.jpg)

On the right of the screen is a large image of the device being set up. The screen content of the device is dynamic and changes according to which part of OOBE the user is in. This image should be provided by the device manufacturer, and isn’t displayed on custom PCs or virtual machines. The _Welcome to your_ text is also set by the manufacturer—because it’s a Surface Pro in this case, that’s what is said.

With this design, the reliance on Cortana for the setup experience has been removed in favor of either pressing a particular keyboard key or waiting a few seconds for Cortana to start speaking—something a lot of users have been asking for. The text in the lower-left corner of the first page illustrates this.

![](/images/windows-oobe-redesign/keyboard.jpg)

The user’s keyboard layout is chosen next, with the most relevant layout displayed at the top of the list already selected.

## Network setup

Next the user can connect to a network. This is obviously recommended, since doing so allows Windows to download updates and sign the user into their Microsoft Account. The connection can be done over Wi-Fi, Ethernet, or cellular (in the case of devices with a SIM card already inserted).

![](/images/windows-oobe-redesign/wifi.jpg)

## End User Licencing Agreement

This one is pretty self-explanatory. You have to accept to use Windows. I’ve included a screenshot of this just so you can see how it fits in with the rest of the setup experience.

![](/images/windows-oobe-redesign/eula.jpg)

## Signing in

Now the user should sign into their Microsoft Account. Notice how the image shown on the device screen to the right changes to an appropriately themed image. This is a common pattern across the entire experience. There is explanatory text below the email address box, telling them what benefits signing in with a Microsoft Account gives them.

![](/images/windows-oobe-redesign/sign-in-1.jpg)

It’s possible to use a local account by simply clicking the ‘Offline account’ button in the bottom-left corner.

After clicking the ‘Next’ button, the user must enter their password or confirm the sign-in using an authenticator device. Again, notice how the screen image changed to display the user’s profile picture.

![](/images/windows-oobe-redesign/sign-in-2.jpg)

After the user is signed into Microsoft, and if they are using a supported device, the Windows Hello setup page will appear. A new component in this experience is the video player, which can be used to provide additional info about certain features or give tutorials on how to do things. In this case, a video telling the user about Windows Hello is displayed.

![](/images/windows-oobe-redesign/sign-in-hello.jpg)

## Restoring the device

Signing into a Microsoft Account will allow the user to restore the new device from a OneDrive backup created on any of their other devices. A list of available backups is shown, and the user can select which one they wish to restore from. Doing this will skip the next few pages, landing the user on the desktop, since the various privacy and personalization settings are brought over from the backup.

![](/images/windows-oobe-redesign/restore.jpg)

While the user may choose to set up the device without restoring content, app data and settings will still sync from OneDrive.

## Setting up OneDrive

After the user has chosen if they wish to restore the device or not, they will then get the option to set up saving all their files to the cloud using OneDrive. There are three different options presented:

![](/images/windows-oobe-redesign/onedrive.jpg)

The first option is the equivalent to enabling all three of the folder protection options in Windows 10 today, redirecting the Documents, Pictures, and Desktop folder to the cloud. The second choice will set up OneDrive and store the user’s system and app settings, but without enabling folder redirection. The third will set up OneDrive, but not store settings or files automatically.

## Cortana and privacy settings

These next couple of pages are very similar to how they are now on Windows, just styled differently. The first page asks if the user wishes to enable the Cortana digital assistant. The same information that is displayed now is shown and there are two clearly labelled buttons at the bottom for enabling or disabling Cortana.

![](/images/windows-oobe-redesign/cortana.jpg)

Next are the general privacy settings for Windows. This page was revamped last year to provide more control to users, with a collection of toggle switches. These switches are preserved in this new design, but now have iconography to make them stand out more.

![](/images/windows-oobe-redesign/privacy.jpg)

## Linking phone and PC

Now the user gets the chance to link together their phone and PC. This is done through the Microsoft Launcher on Android, or the Edge app on iOS. Connecting the user’s devices together allows them to take advantage of a whole bunch of great features—like Continue on PC, a feature that allows the user to send any supported activity to their PC.

![](/images/windows-oobe-redesign/continue-on-pc.jpg)

This screen is shown after the various privacy options, as the choices made there may affect if they can use the connected devices experiences.

## Personalizing Windows

This is a page that was partially present in the Windows 8.x setup experience (accent color selection was one of the first things a user did when setting up Windows), but was then removed with Windows 10. With the new OOBE design, this page returns, but also now with an option to choose the app mode the user wants—light or dark. A user can skip this page, accepting the defaults, or make adjustments and save them.

![](/images/windows-oobe-redesign/theme.jpg)

If the user makes a change, it’s reflected in real-time on the page. For example, in the screenshot below, the user has changed their Windows theme to dark and the accent color to red.

![](/images/windows-oobe-redesign/theme-changed.jpg)

If the user has previously synced theme settings on OneDrive, these will be the “defaults” applied on this page.

## Completing setup

The last page a user sees before they hit the desktop is this one. Before the user can start using Windows, their account needs to be provisioned—setting up all their apps and settings. In previous iterations of the OOBE, this was done behind a slideshow of shades of blue with basic text on it.

This new design allows a user to watch some videos showing them what’s new in the particular feature update to Windows 10 they’re using before taking them to the desktop.

![](/images/windows-oobe-redesign/finished.jpg)

A small informational notice towards the bottom of the screen tells the user they will be automatically taken to the desktop once this portion of setup is complete, meaning they do not have to watch all the videos to get into Windows. If the user is watching a video and setup is done, they will be taken to the desktop _after_ the video finishes playing.


Giving the Out-Of-Box Experience a fresh look that's more in line with the Fluent Design System.

Windows OOBE redesign


In this exploration, I wanted to see if the NavigationView in Windows 10 apps could be adapted to fit in better with "Sets".

I also wanted to see how hamburger menus could be re-worked by bringing them in-app.

Finally, I wanted to rework how users could open new applications in a Set, or start a Set quickly with applications they already have open.

## Overview

I wanted to do this after seeing how Microsoft's new **Sets** feature was working with many of their in-box apps. There's a lot of clunky UI since lots of apps use left-hand navigation or some inconsistent variant of the top “pivot” navigation. My new design fixes the left-hand navigation issue by moving these links into a new consistent set of items at the top of the app.

The navigation items share a common look. In in-box Windows apps, they are 15 point Segoe UI with a 16px icon located 8 pixels to the left of the text - the addition of iconography helps the user visually identify what a particular menu item does. On the top-left is a back button—this is placed here since **Sets** does not allow for the back button to be placed directly in the titlebar.

In situations where more menu items are needed, the back button can be replaced with a hamburger button, allowing for a menu to be opened in-app. When the user navigates away from a main page, this hamburger button will convert back into a back button temporarily, allowing for navigation.

## Photos

![A mockup of the Photos app showing the Collection view. There is a new featured carousel style at the top and reworked date headers for groups of images.](/images/windows-navigation/photos.jpg)

### New pivot control and app layout

For the Photos app, I wanted to keep the existing top pivot layout, but make it blend in better with the rest of the app content. To achieve this, a white background has been used.

There's also a new general layout for the app, with a slightly refined carousel for stories and new headers for groups of photos.

### Hamburger menu

A hamburger menu reveals more items to the user, such as options to filter by media type while also allowing them to manage things like shared albums.

It also shows top nav items that may be hidden due to the size of the window, such as in the screenshot below.

![The hamburger menu in the Photos app, showing a bunch of different headers and categories that can't all be shown on the horizontal navigation bar.](/images/windows-navigation/photos-hamburger.jpg)

## Microsoft Store

![A mockup of the homepage of the Microsoft Store app. Like in Photos, there's a new style featured carousel.](/images/windows-navigation/store.jpg)

### New featured carousel

For Store, I changed the featured section from a set of tiles to a carousel, allowing for potentially more items to be featured.

This carousel varies depending on the category being visited—some carousel cards may be smaller because the content is less important.

### Navigation

Store uses the same new style of navigation that Photos used, except it's been tailored for the type of content the app contains.

The hamburger menu features the top navigation items as well as more categories to filter the Store by, for example extensions for Microsoft Edge, or specific types of hardware.

![The hamburger menu of the Store app. Again, it's very similar to the one I created for Photos.](/images/windows-navigation/store-hamburger.jpg)

## App case study

### Starbucks UWP

![The homepage of a Starbucks app mockup—showing a similar navigation style to the Photos and Microsoft Store apps, but styled to match Starbucks' brand.](/images/windows-navigation/starbucks.jpg)

I wanted to create an example of a third-party application that used some of these new navigation and design principles. For this, I took Starbucks' Progressive Web App (PWA) and "converted" it into a true Windows 10 app that features Fluent Design.

#### Cards

Like in the Store concept, there's a new card-based UI here. In this example, cards are used to provide a "feed" of information about the user's account

These cards feature a mix of Starbucks' corporate font for areas of text that need attention drawn to and the platform-native Segoe UI for all other text.

#### Adapted navigation

Unlike the other concepts, the navigation view here doesn't use iconography, keeping it in-line with the look of Starbucks' web app.

There's also "nested" navigation on the Order page, a secondary horizontal NavView is placed below the main one, distinctly separated by shadows and brand colors.

![The primary ordering page in the Starbucks app, with an overview of the various different food and drinks available.](/images/windows-navigation/starbucks-order.jpg)

## Sets navigation

While not strictly related to NavigationViews within apps, I also have designed a couple of new Sets scenarios for adding apps to an existing set or creating a new one.

### Adding apps to a Set

![A small dropdown menu appears when the user positions their cursor over the new tab button, displaying other open apps that could be merged into that Set.](/images/windows-navigation/merge-set.jpg)

Right now, if a user wants to add existing apps on the desktop to a Set, they have to go to the app itself and drag its tab into the tab bar of the Set they want to add it to.

With a new interface that appears when the user hovers (or potentially right-clicks) on a tab, they can choose from compatible apps that are already open or quickly launch one of their recently used apps. In the example above, you can see how Paint and Microsoft Edge are listed as apps that can be added to the existing Set of Calendar and Photos.

#### Quickly creating a new Set

![A similar dropdown menu shows apps that could be used to start a new Set.](/images/windows-navigation/create-set.jpg)

Creating a new Set is currently a little bit easier than merging existing apps—simply click the new tab button and choose the app you want—but I still believe that this can be made even easier by allowing the same menu for merging appear when you hover on the new tab button for an app that’s on its own.

The interface is very similar, except it indicates that a new Set will be created from the apps a user chooses—they can even create a new Set with an existing Set (as you can see).

## Groove Music

Finally, here is a design that shows how images can bleed through the NavigationView and into Sets tabs, creating a very seamless look for apps.

![A concept of Groove Music, showing the album page for Highway to Hell. The background behind the album art and information bleeds through into the Sets tab for that app.](/images/windows-navigation/groove.jpg)

## Final remarks

I believe these new navigation and design principles help keep in-box apps looking consistent, while also helping third-party apps create a style that fits their brand (as shown in the Starbucks concept).

These new designs also show off new concepts, such as redesigned carousels, better in-app hamburger menus, and a cleaner look for Sets.

Meanwhile, the new Sets concepts show easier ways of getting things done on Windows, allowing users to bring apps together in logical groups—one of the main ideas behind Sets—even faster than they can right now.

If you liked this UI exploration, take a moment to share it on your favorite social media platform—it means a lot.

**Thanks for reading!**


Making in-app navigation fit in better with Windows Sets.

Redesigning navigation for Windows 10


The Windows 10 desktop experience has always been of great interest to me and has been the focus of a lot of my recent design concepts on social media. I’ve received a lot of feedback and have been asked many questions. I want to try and address all that, while also introducing part of a Windows redesign project that I’ve spent the last few weeks working on.

Why redesign the shell anyway? There’s not much wrong with it, right? I agree that it seems a little weird given how there’s much more important parts of Windows that need work on, and it’s not like the shell is fundamentally broken anyway. So we get to the actual design motive:

> “To redesign the shell to be cleaner and more intelligent.”

That’s the goal. To get rid of the current clutter and replace it a more minimal yet more powerful experience. I call it **Fluid Desktop** and I want to share the journey it took to get here.

## Taskbar

Some of you might remember when I wrote about [reworking the Windows system tray](https://medium.com/@itsmichaelwest/reworking-the-windows-system-tray-9577b646731e) over a year ago. Inspired and excited by what possibilities there were in this area, I continued to refine the design further to create a flyout I eventually named _Quick Actions_, and even apply the same overall look and feel to Action Center as well.

This led to a new system tray design. Gone was the overflow of icons and applets that have cluttered up the taskbar since 1995 — and in its place: a clean tray with only the essential information presented.

Afterwards I started thinking about how the taskbar itself could be simplified. I couldn’t remove any more icons, the system tray rework had already removed everything possible. So I thought about the actual taskbar — could its shape, size, even material be changed? What if it wasn’t constantly attached to the edge of the screen, and instead floated (something inspired by some versions of Chrome OS).

Here’s the first iteration of that new taskbar:

![A key component of Fluid Desktop — the floating Taskbar](/images/fluid-desktop/floating-taskbar-crop.jpg)

Things felt more open now the taskbar was split in two. The people button was also detached from the rest of the system tray, as it’s not really directly related to that component.

Initial feedback centered around one thing — the Start button.

Currently on Windows, the Start button sits in the corner of the screen, so you just have to move your cursor into any of the four corners of your display to quickly get to the Start menu. People were concerned that moving the Start button away from the edge of the screen would prevent this behavior from working.

The answer is simply to make the target area for Start extend into the corner, allowing users to continue to use muscle memory to access this feature.

Other feedback focused on tablet mode usage. I thought about this one for a while. Today, the taskbar remains visible on Windows when you enter tablet mode — but I always preferred the Windows 8 way of having apps run full-screen in this mode and now that the taskbar “floats”, the idea of it drifting off the edge of the screen and only appearing when the user swipes from the edge makes more sense.

## Sets

Microsoft [announced](https://www.youtube.com/watch?v=3lEjuU-XFHg) a new feature dubbed _Sets_ in November 2017, and I’ve been interested in how this would work with things like the taskbar and Task View. I’ve not yet finalized a design on how a set of apps will look in Task View, but I did design a rather minor change to how they’re displayed on the taskbar.

Instead of these apps scattered across the taskbar, why not group them together and include a small visual cue that the apps are part of a Set?

![Previews of different sets tabs on the taskbar.](/images/fluid-desktop/taskbar-sets-popover.jpg)

Also, having tabs on top of every app is somewhat unconventional — especially for utility apps like Calculator. With that in mind, adding a new tab button alongside the existing window caption controls doesn't seem like a bad idea.

## Start Menu

This isn’t something that has to actually be thought about. You could just bolt on the existing Windows start menu to the new taskbar and leave it at that—but it doesn’t exactly look all that great. Something didn't feel right.

![An early Start menu idea for Fluid Desktop.](/images/fluid-desktop/shell-start.jpg)

There’s still work to be done in terms of element sizing, but this updated Start menu design fits in better with the overall modern look and an integrated search box at the top replaces the need to have a search bar confusingly placed at the bottom.

## Intelligence

You might have realized that Cortana seems to be missing. Her button was replaced by a search icon (that launches a search UI much like the one [discovered in Redstone 4 builds](https://www.windowscentral.com/microsoft-working-new-search-ui-windows-10) last year). The Spring Creators Update already moves a lot of Cortana’s “cards” and other proactive info to Action Center, where it gets delivered when a user needs it.

But what if you could go to Action Center and see suggestions of things you might want to act upon, and talk to Cortana in a more chat-like fashion (like you can with Google Assistant)?

Here’s what that idea could look like:

![Intelligent Action Center in Fluid Desktop.](/images/fluid-desktop/shell-actioncenter.jpg)

As always, notifications are displayed first, followed by suggestions of things you might want to act upon. They could be calendar events (like shown here), local news, weather alerts, reminders, and even activities based on your nearby devices or location.

![Talking to Cortana directly in Action Center on Fluid Desktop.](/images/fluid-desktop/shell-actioncenter-chat.jpg)

At the bottom of Action Center is the text box that we’re familiar with from the taskbar and you can still talk to Cortana by tapping the microphone icon. The queries you type are shown as "messages" to Cortana, with her replies being inline — allowing for a greater level of context since you can scroll back up and see your previous replies in that conversation. The conversation idea also helps bring a bit more consistency between Cortana in Windows and Cortana in Skype (where it acts as a bot in your chats).

_Note: This content was originally published on UX Collective in March 2018. It was shortened and rewritten in July 2020, alongside some render updates._


Redefining the Windows desktop experience with a new look, refined apps, and improved Cortana intelligence.