Modernizing Word Online’s UX platform

Christian Gonzalez
Aug 29, 2018 · 6 min read

Introduction

Early in 2017, our design team proposed a pretty significant visual refresh of Word Online. While many of these changes were quick CSS tweaks to change some colors and padding, there were also some significant visual updates that would require core changes to the code in our UX framework. The most prominent of these visual changes were targeted at the primary commanding surface at the top of Word Online, commonly referred to as the Ribbon.

Current visuals on the left. New visuals on the right.
Overflow menu gives access to less frequently used commands.

Time for a rewrite?

The Word Online codebase is over 11 years old. At that time, the JavaScript ecosystem was also not as mature it as it is today, with a growing sentiment that raw JavaScript did not scale to large applications. This led to a rise in the use of Script# (a transpiler from C# to JavaScript) for large web applications within Microsoft. Script# was a vital tool that helped our code base scale to our growing engineering team and played a key role in getting us to the point where we are able to confidently ship new versions of Word Online multiple times per week. Over the past few years TypeScript has emerged as Microsoft’s public facing solution to large scale JavaScript development. This has led to Script# usage declining across the company, as the developer experience offered in TypeScript is far superior to that experienced by Script# developers.

The parts outlined in red would be in scope of the rewrite, the parts in green would not be rewritten

Building a new UX platform

Since many teams at Microsoft were already using TypeScript, we saw this as a great opportunity to connect with other web app teams to learn from their experiences. We reached out to our friends on the Outlook Web team, who at the time had just started an effort to move a significant portion of their Script# code base to TypeScript. During these conversations we learned that they, like many other popular web applications, were using React for their user interfaces. Our initial prototype of the Single Line Ribbon was written in React, so we were very eager to use some of the components that they had built for our real implementation. After getting more details on Outlook’s UX platform, we found out Outlook wasn’t the only team at Microsoft using React and that many teams had started building their app using components from a Microsoft owned open source library called Fabric React.

Comparison of PNG (left) vs SVG (right) icons on high DPI screens

Try it out today!

The new visuals are enabled by default for Word documents hosted on OneDrive. Please try it out today and let us know your thoughts on the new experience by leaving feedback in the app!

Web Dev @ Microsoft

A place for developers from across Microsoft to share ideas and best practices

Christian Gonzalez

Written by

Software Engineer working on Office Online

Web Dev @ Microsoft

A place for developers from across Microsoft to share ideas and best practices

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade