MICROSOFT WANTS EVERYONE TO FOLLOW ITS LEAD WITH ITS NEW MOBILE DESIGN

nearlyNearly a decade ago, Microsoft launched its Windows Phone platform with the promise that its software would free users from their phones. The first big ad campaign showed people engrossed in their devices at clubs, restrooms, and even on a roller coaster, while frustrated bystanders asked, over and over: “Really?”

Windows Phone would answer those frustrations, said Microsoft. It was “designed to get you in and out, and back to life” with the help of the company’s striking tile-based Metro user interface. Microsoft envisioned a world in which apps would talk to each other seamlessly and content flowed freely. Despite some great design principles, Windows Phone didn’t work out, but Microsoft never gave up on the idea of improving mobile productivity.

Today, Microsoft is reviving some of these ambitions by bringing what it calls its Fluent Design system to its mobile Office apps, a simplified set of principles designed, just like Windows Phone, to speed things up on the go. It’s even letting third-party app developers embrace these design elements with toolkits to prettify their own apps. This will have the benefit of making Microsoft’s mobile apps feel more consistent, but the end goal is the same as Windows Phone’s was: to get users in and out of their apps quicker and back to life again.

“When we look at the mobile market, we feel like no one has done an amazing job of nailing productivity on phones across voice and visual systems in a sort of microtasking kind of way,” explains Jon Friedman, corporate vice president of design and research at Microsoft, in an exclusive interview with The Verge. “We feel like it’s our birth right and duty to help people in the world accomplish their goals, so that’s why we’ve been super focused on this.”

Microsoft has spent years researching exactly how people use their phones on a daily basis in markets like China, India, Europe, and the Americas. More than 40 designers and researchers across Microsoft “have collaborated to rethink and redesign how we approach mobile and mobile productivity,” reveals Friedman. “Not just the apps themselves, but how they all connect together and work together; and to build a common design system to extend Fluent to be a truly mobile-first design system.”

This unified mobile design system borrows a lot from the work Microsoft has been doing on Outlook in recent months, with improved iconography, identical file lists, updated typography, new splash screens, and a focus on dark mode.

Apps like Word, Excel, PowerPoint, Outlook, and OneDrive will now all share common design elements and look far more similar. Even Yammer, Teams, and Planner are getting new versions, too. You’ll soon notice a brand-colored header at the tops of these apps (like what exists in Outlook) and a simple bottom bar with Microsoft’s new Fluent design icons. Just like how Microsoft created a new dedicated mobile Office app to focus on tasks people do on the go, these separate apps have been simplified with the same goal in mind.“When we look at the mobile market, we feel like no one has done an amazing job of nailing productivity on phones across voice and visual systems in a sort of microtasking kind of way,” explains Jon Friedman, corporate vice president of design and research at Microsoft, in an exclusive interview with The Verge. “We feel like it’s our birth right and duty to help people in the world accomplish their goals, so that’s why we’ve been super focused on this.”

Microsoft has spent years researching exactly how people use their phones on a daily basis in markets like China, India, Europe, and the Americas. More than 40 designers and researchers across Microsoft “have collaborated to rethink and redesign how we approach mobile and mobile productivity,” reveals Friedman. “Not just the apps themselves, but how they all connect together and work together; and to build a common design system to extend Fluent to be a truly mobile-first design system.”

This unified mobile design system borrows a lot from the work Microsoft has been doing on Outlook in recent months, with improved iconography, identical file lists, updated typography, new splash screens, and a focus on dark mode.

Apps like Word, Excel, PowerPoint, Outlook, and OneDrive will now all share common design elements and look far more similar. Even Yammer, Teams, and Planner are getting new versions, too. You’ll soon notice a brand-colored header at the tops of these apps (like what exists in Outlook) and a simple bottom bar with Microsoft’s new Fluent design icons. Just like how Microsoft created a new dedicated mobile Office app to focus on tasks people do on the go, these separate apps have been simplified with the same goal in mind.“When we look at the mobile market, we feel like no one has done an amazing job of nailing productivity on phones across voice and visual systems in a sort of microtasking kind of way,” explains Jon Friedman, corporate vice president of design and research at Microsoft, in an exclusive interview with The Verge. “We feel like it’s our birth right and duty to help people in the world accomplish their goals, so that’s why we’ve been super focused on this.”

Microsoft has spent years researching exactly how people use their phones on a daily basis in markets like China, India, Europe, and the Americas. More than 40 designers and researchers across Microsoft “have collaborated to rethink and redesign how we approach mobile and mobile productivity,” reveals Friedman. “Not just the apps themselves, but how they all connect together and work together; and to build a common design system to extend Fluent to be a truly mobile-first design system.”

This unified mobile design system borrows a lot from the work Microsoft has been doing on Outlook in recent months, with improved iconography, identical file lists, updated typography, new splash screens, and a focus on dark mode.

Apps like Word, Excel, PowerPoint, Outlook, and OneDrive will now all share common design elements and look far more similar. Even Yammer, Teams, and Planner are getting new versions, too. You’ll soon notice a brand-colored header at the tops of these apps (like what exists in Outlook) and a simple bottom bar with Microsoft’s new Fluent design icons. Just like how Microsoft created a new dedicated mobile Office app to focus on tasks people do on the go, these separate apps have been simplified with the same goal in mind.

”The thing we learned in all of our research is that people spend about 4 hours a day on their phone, but the average session time of doing something is between 20 and 30 seconds long,” explains Friedman. That’s an extremely short burst of time to get something done on the go, and Microsoft is trying to improve its own apps, and others, to simplify those tasks with a design that makes it more familiar and less jarring when you switch apps.

That doesn’t mean every Microsoft app will look the same on iOS and Android, as the company is still trying to feel at home and native on these platforms. It means things like search should be in a similar place, and iconography will be reused so things feel more familiar. It’s these very subtle changes that can add up to improvements over time, and it’s a big part of Microsoft’s open design approach internally.

It’s not been an easy journey to get all Microsoft designers on the same page, but things like buttons, patterns, and file lists are now being reused freely in the company. “That took us some time to really get everyone involved and contribute,” says Benedikt Lehnert, director of product design for Microsoft 365 mobile experiences, in an interview with The Verge. “Now we have a really thriving community of mobile designers across the company that’s literally every week making the system better.”

A lot of this work has started off in small and subtle ways, but recently, Microsoft launched a new “Play My Emails” feature for Outlook that uses Cortana to read out emails and even calendar invites when you’re driving to work, cooking, or commuting. This feature was born out of designers wanting to design email for people who are visually impaired. Microsoft formed a relationship with the Washington State School for the Blind and spent time studying what it’s like to live in a narration experience.

“Listening to the entirely of a UI… is highly fatiguing for your brain,” explains Friedman. Microsoft added audio bumpers between emails, thanks to its research, allowing everyone to ignore things that aren’t important and stop listening. This is a feature that was designed around accessibility, which is a big focus for Microsoft, but that actually ends up being useful for everyone using it.

Beyond these subtle changes today, Microsoft has broader ambitions to impact iOS and Android further and push dual-screen experiences ahead. “Building this foundation of a Fluent mobile system that works across iOS and Android has been an awesome experience in designing dual-screen experiences as well,” reveals Friedman. “So when we work on Surface Duo and work on iPad side-by-side experiences, having a common system helps our apps align and have a cognitive connection across them with shared components and it makes the foundation of the dual-screen experience way better.”

Microsoft obviously faces big challenges here because the company doesn’t own or control the platform on which it’s trying to build apps. To counter this, the answer seems to be close partnerships with Samsung, Google, and others. Microsoft only vaguely hinted at its Google partnership for dual-screen Android experiences during the Surface Duo unveiling earlier this year, but it looks like this will go a lot deeper soon. Gmail, Google Drive, and Calendar are coming to Outlook.com, and Microsoft is testing ways to let people use their Google accounts to sign into a number of the company’s services.

“We have designers from Samsung, Google, and Microsoft sitting in rooms together designing together,” reveals Friedman. That’s a surprising turn of events, given the history of Samsung holding back on Windows Phone and Google’s bitter rivalry with Microsoft. Things have started changing, though. Microsoft and Google are also collaborating on Chromium, and now we’re starting to see some collaboration on Android. “It’s really about how do we make that experience better for our customers. That gives us a direct line of communication between designers on how we improve Microsoft experiences, how do we help Samsung improve its experiences, and how do we help Android improve its experience,” explains Friedman. “Those collaborations are awesome, it feels great to be part of an industry where we can actually work together on these things to make the products better.”

Microsoft is now leaving it up to developers to decide whether they want to use Fluent design elements in their own apps that plug into Office or even ones that are entirely separate. “If developers decide to build entire apps with these toolkits we’ll be really excited to see that, too, since they represent the best in class patterns from our perspective,” says Lehnert.

It’s fair to say that Microsoft’s previous Metro design system really helped push iOS and Android forward, and the company has been quick to adopt other design trends that the industry has implemented. “We’re in an interesting time when it comes to UI, things are converging more and more,” says Friedman. “I like to think that back in the Metro design days we started with this idea of simplification... and that’s gotten friendlier over time, which we’ve embraced with round people, rounded corners, and subtle drop shadows, and dark mode. I think generally speaking when we look at Android, iOS, the web, Windows, and Mac, there is a common DNA from a visual design perspective we’re starting to feel.”

Microsoft’s fresh approach to mobile design will be interesting to follow in the year ahead and beyond. Combined with the company’s promises for Fluid Framework, it feels like Microsoft is truly embracing mobile and the web as the foundations of its future. As Satya Nadella said recently, “the operating system is no longer the most important layer for us.” For Microsoft, it’s all about apps and services and building useful features that help people get work done on the go just that little bit quicker.