Skip to main content

Take a look at how the Office Mobile apps for Windows Phone were designed

William van Hecke, who lead the design team at Microsoft for the Word, PowerPoint and Excel Office apps on Windows Phone, has revealed a ton of details on that process in a new paper.

The paper was written as part of the online design school UX Launchpad's 'Design Explosion' series. In this case, van Hecke, who has since left Microsoft to work at Twitter, wrote about the three different design concepts the Office Mobile team came up with. One, which had a Windows Phone-based look, was code-named "Norma", while the second, which mostly used the regular Office UI, was called " Tabitha", Finally, there was "Solana", which had its own look that did not use elements from either "Norma" or "Tabitha"

Office Mobile UI

van Hecke wrote:

"After much discussion, and to the surprise of no one, we decided we liked components of all three designs. We liked how Norma felt at home on the system. We liked how Tabitha scaled. And we liked how Solana deferred to the content, leaving behind just a tiny little touch target for getting into the multiple palettes to edit content."

The article also touches on the hamburger menu, which has been the subject of much discussion on the Windows Phone front. In his paper, van Hecke takes the position that even aliens from outer space might need to use such a design if they wanted to fit app options in a small display size:

"Maybe it's not drawn with three horizontal lines, but I guarantee a design pattern that says "touch this button to see more options" is in use across the galaxy. And I don't even know if aliens exist. But if they do, and they have something resembling software, they have realized that responsive design is the only way to translate a design from a small canvas to a large one. I believe this is as significant a discovery as fire or shopping malls."

The lengthy online paper is definitely worth a read if you are interested in the choices Microsoft made in the UI design for Office Mobile.

Source: William van Hecke (Medium)

40 Comments
  • Designed to kinda look like Android and iOS versions, only with less functions, and published a few months later.
  • I love this positive and happy community!
  • It was positive for too long. Kinda like when you realized you jumped ship for another job years after you should've. (Still on W10m)
  • It's never been a positive place. Nor any fan based site. Or any news website with a comment section. Hell, even r/windowsphone isn't a positive place. The nice thing is, you can leave whenever you want. ^^
  • I totally agree with you, completely negative site.
  • Can you show me Word, and some examples of where iOS and Android does more? Serious question. I hear this argument made alot , iOS/Android is faster or got more features. But it seems a bit like a stock rant, than reality (no offence) I'd really like to understand where the MS apps are behind on Windows Mobile versus iOS or Android. I have Android and iOS right here, so I can check your theories when you post them. Thanks :)
  • While I have no reason NOT to believe that IOS and Android Office Apps are mature (further developed), I too would like to hear something other than the mantra about how much "better" they are.  So I will be lurking to see if anyone can\will get real specific to your request. :)
  • I use office Mobile on iOS, Android and Windows 10 Mobile but I just don't have the time to make a video or even take screenshots about them. I prefer the apps on Windows 10 Mobile as the UI is clean and consistent with the Outlook app for desktop. The Office Mobile apps on iOS and Android feel more like "mobile" apps instead of refined desktop apps due to integration of design elements from iOS and Android. I havne't noticed any missing features in my usage or anything that makes the iOS and Android versions "better".
  • Deaconclgi,   THANK you for that response. I'm both happy to hear your seemingly legitimate opinion, AND not surprised that it reflects a bit different view than the mantra.  Cheers!
  • Check Outlook mail app for iOS and Android
  • LOL! Funny but true.
  • Basically the story of W10M.
  • Yeah.. The final design language from combining the three ladies looks more like Medosa, Hira, or the witch from Gingerbread house...
  • Oh Microsoft. Stop fueling the fire. Posted via the Windows Central App for Android
  • How are they fueling fire with this? Not to mention the author doesn't even work at MS anymore.
  • It's raining explanations
  • It's raining raining comments...
  • This guy's last sentence is so pretentious! Is he seriously comparing this to the discovery of fire?
  • I don't think it's pretentious. Rather a "tap here for more options" is synonymous in importance. From a design perspective it is true, however the placement of such a button and it's functionality are the topics of discussion and rightly so. In my opinion it's poorly placed for phones, but correctly placed for monitors as we read top down. Never the less with advent of larger phones, that discussion is slowly becoming irrelevant as you will have no choice but to use two hands to operate the phone.
  • He said "fire in a mall". Aka burning platform.
  • I'm glad they used the third option. The name of the native-like appearance brings back bad memories. If you know me personally, you'll know what I'm talking about.
  • This van Hecke guy is full of himself. I'm more interested in why they did not listen to the insider users who hated and still hate the hamburger menu, its placement, and its behavior. The only thing interesting in the article is how disjointed the "Windows" team is from the "Office" team for something as critical across the operating system like copy and freaking paste, two of the most basic functions that should work and behave the same within Office and outside of Office on Microsoft's own OS.
  • Android and iOS users are used to these poor design choices. On the iPhone it worked until Apple released larger phones. However I do agree there alot of UX inconsistencies.
  • Sry to disappoint you but I do like the hamburger menu if it's implemented thoughtfully. Please don't speak for all insiders.
    When we are talking about design inconsistencies I am completely with you. They should work hard to get that fixed.
  • Actually, pretty much no one has problem with some sort of menu button. Major issue for most (including me) is the placement. Baconit does it right IMO and groove with swipe from left is very nice implementation
  • The Office Mobile sucks at some points. Older Office for WP8.1 can open protected files while the "new, revamped and universal" can't. You cannot create a custom margin for pages and does not accept some basic formulas.
  • John, those Office apps are for Windows 10 Mobile and not Windows Phone. A factual and consistent message does matter as users that have a devce that runs Windows Phone may think the Office apps are for their device when they are only available for devices that run Windows 10 Mobile as thsoe are two different OSes. I "know" you know this and "we" know this but not everyone knows that the is a factual differnce between the Windows Phone OS and Windows 10 Mobile OS and if a person is referring to a phone that runs Windows it is factually "a Windows phone" with a lowercase "p" and even then, we have to be specific about what type of Windows phone it is, whether it is a Windows phone that runs Windows Phone 7.x/8.x or a Windows phone that runs Windows 10 Mobile. You aren't they only person that I see using the incorrect capitalization or terms so this isn't a personal attack but rather an effort for more clarity for all readers and not just those of us "that know what you mean". I was always told "Say what you mean, mean what you say", that way, what is said reduces the chance for misinformation. :) Thanks for all the work that you do for the site.  
  • Of course aliens exist. No way humans are the most superior beings in all of space.
  • I agree given the vastness of space, it seems very unlikely that we would be the only "intelligent" species (depending on how you define that) but fact is, we don't know.
  • @Gatanui and @920walker. It would be improbable to say they don't exist.
  • Of course we're the most superior beings, just ask us.
  • Fermi paradox. Ever heard of it?
  • This should make for an interesting read.
  • This is a must read for anyone trying to design universal apps.
  • I actually think that the office mobile apps have some great design. Not because of the hamburger menu, but because of the ribbon. I actually love how they took the ellipsis menu, which was insufficient for a full office experience, and used it to launch the ribbon, as a common piece of UI that works on other platforms. Now I just wish they would bring the same idea to OneNote mobile!
  • Even aliens would agree the placement of the hamburger menu in the upper left hand corner would be stupid. MS designers are hooked on stupid pills.
  • It's only stupid if you are right-handed and prefer cheeseburgers.
  • Office for Windows 10 mobile is the best thing that has happened to Windows Phone since Windows 10 has launched. Appreciate the designers to have brought such a big service to mobile level. Let's do this for other important apps too. Skype team, you listening?
  • Great apps. Looks like I'll have to get an iPhone or Android to fully experience them.
  • .rar file not working