Ex-Microsoft Designer Explains How Office Mobile Came Together

Ex-Microsoft Designer Explains How Office Mobile Came Together

Jon Bell, the designer who previously explained Microsoft’s move away from the Metro design language, is back with a fascinating peek at how his team designed the Office Mobile apps to fit on small phone and tablet screens.

Currently at Twitter, Mr. Bell is a co-founder of UX Launchpad. But he is perhaps most interesting in these circles because he is was previously a design lead at Microsoft on Windows Phone. And in an April 2015 Reddit AMA, he explained the software giant’s decision to abandon Metro because it was less efficient for users than Android or iOS.

Windows Intelligence In Your Inbox

Sign up for our new free newsletter to get three time-saving tips each Friday — and get free copies of Paul Thurrott's Windows 11 and Windows 10 Field Guides (normally $9.99) as a special welcome gift!

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

As part of that previously discussion, Bell touched on Office Mobile, noting that the (in some places reviled) hamburger menu was warranted because of the complex nature of the apps. He also discusses this topic in an interesting video about the underlying UX (user experience) in Office Mobile, where navigation sits at the top of the screen and actions are on the bottom.

Today, he offers a lot more information. A lot more. So be sure to read his UX Launchpad post, Design Explosions #4: Office Mobile, for the full story. But here are some highlights of his time designing the Office Mobile UX.

He led the design of Office Mobile. To be clear, Office Mobile is a set of mobile apps (PowerPoint, Word, Excel, OneNote), or more precisely, sets of mobile apps, that run on various platforms, including Android, iOS, and Windows (phone and tablet), and across device types like smart phones and tablets. As Bell notes, he was “tasked with leading the design on PowerPoint, Word, and Excel on Windows Phone.” So his comments are literally as inside the design process as you can get: This isn’t an outsider’s view of what happened. It is what happened.

Brand vs. platform. One of the first questions Bell’s team confronted was whether to align the design of these apps around Office (the brand) or Windows phone (the platform). And while you could make a case for either, he ultimate chose (correctly, I think) to strike a balance. That is, Office Mobile should be familiar, both to Office users on other platforms, and to Windows phone users (in this case). Similar choices were made for Office Mobile on other platforms, of course, and for Office on the web.

Device hardware necessitates some changes. While most companies reuse their iOS design when they port apps to other platforms, Bell didn’t feel this was the right choice. The navigation is quite different between iOS and Android because Android (like Windows phone) has a hardware Back button. (Yes, it can be implemented in software in Windows phone today, but it’s always there.) So software-based navigation has historically worked quite differently between the two platforms. Bell’s team was also operating under the “(now defunct) Steve Ballmer edict that the software be ‘first and best on Windows’.”

The design has to scale. When you think about software that needs to look and work correctly on 4-inch phones, 8-inch tablets, and 13-inch (or bigger) PCs (and the web) and everything in-between, it’s hard to imagine a single UX that works everywhere. The answer, sort of, is responsive design, but scaling this much still requires some fine-tuning.

Too many cooks? Because of the wide number of people involved in the process—over 300 of them, across multiple teams in multiple locations, one of which was in India—this particular project was pretty complex. How Bell and his team overcame this issue makes for good reading. Seriously, read the original article. And be surprised to discover Microsoft is no more complex than any of the other big companies Bell has worked with.

And the design they arrived at was … After testing various designs, Bell’s team arrived at something that worked well everywhere. It incorporated aspects from Windows phone, from Office, and from non-platform-specific design explorations. And it worked well on Android and iOS, too, though the Android team initially felt the design wasn’t “Android-y enough.” (This was in the days right before Material Design was a thing.) “Android moves the most units, iOS makes the most money, and Windows Phone is Microsoft’s own OS,” he notes. “So we all had reasons to fight hard for our own platform point of view.”

Don’t forget tablets, PCs, and web. On bigger screens, Office Mobile can of course look and work more like “real”/”full” Office. This means a ribbon at the top with “hero actions” up in the top right and a familiar File menu instead of a hamburger menu. (I will skip over his discussion of the hamburger menu since it was such a big part of the previous post on this topic.)

Office Mobile also has to support contextual menus. This type of “Object UI” is what happens when you right-click or, on a mobile device, tap-and-hold on an onscreen object. Making these menus work on small phone screens was obviously a challenge, involving decisions related to visual design and usability as well as knowing what’s important to keep, and what isn’t.

Success. Microsoft ended up delaying Office Mobile so they could get it right. So late, in fact, that Mr. Bell had by then left the company. But the results were solid. Looking at the apps across Windows phone, Android and iOS, you can see clear familial similarities, and clear nods to the underlying platform on each.

This is a fascinating article, folks. Please, again. Read the original.

 

Tagged with

Share post

Please check our Community Guidelines before commenting

Conversation

There are no conversations

Windows Intelligence In Your Inbox

Sign up for our new free newsletter to get three time-saving tips each Friday

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

Thurrott © 2024 Thurrott LLC