Docs preface

Docs.com, was a social network UGC website where users could discover and view, upload, download, and share Office documents in high fidelity while connecting and sharing with other users and manage the copyrights of their content. Supported file types include Word documents, Excel spreadsheets, PowerPoint, Mix video, Sways, and imagery. Users could also upload blog content, PDFs, and Web links to their customized profiles as well.

There was an incredible amount of UX and UI problem-solving to be done to create this site. The size and scope of this project were enormous. Our entire Tokyo Office team was working within the weekly agile sprint process to move the project forward a fast as possible.

As UX/UI Design Lead, I created multiple UX and UI flows based on a previous team's UX research. I designed the entire site to fit our updated goals and user features. It was very challenging in the visual side of the design process. At the same time, I was designing the UI for Docs the Office Design Teams were beginning to work towards a new cross-product web-based design language, so there was a lot of confusion on page styles and elements.

With the help of our UX researchers and PM's, I was able to A/B flight test multiple designs, conduct user interviews to help improve user acquisition, user engagement, and usability. Armed with this valuable research, I was able to know when and where to make adjustments, add features, and effectively acquire new users.

It was a tangible success with a growing user base of 12% per month with 70+MM users in just one year. However, the site ran into some legal issues that were out of my scope when it was introduced into the Office 365 Enterprise ecosystem. Unfortunately, docs was shut down due to the acquisition of LinkedIn.

Content tiles

A tile for everything

Tile Design challenges:

Tiles must be capable of showing all content types, Is responsive and scalable, Is customizable by the user, can convey the user's message, support multiple functionality, is visually pleasing and use our design language.

Tile Design Solution:

Below are a few examples of my final output. I solved the problem in a few ways using a responsive grid layout. Giving the user the choice of how much customization they wanted to include. I used the different actions depending on who was viewing the tile i.e viewer vs owner. I used our design language and Iconography. Microsoft patented the final tile design and user interaction.

Other design iterations

Hub Page

user acquisition

 Hub Design challenges:

I did a lot of Docs home page flighting to try and determine what it would take to get Office customers to use our new Office product. The metric for this success was the numbers users that landed on the home page and signed in with a Microsoft account and successfully uploaded and shared a document.

Hub Design Solution:

From the A/B flight test flighting data, I found the solution was to simplify the amount of information given to the user before they try the product. I learned that simple imagery and messaging combined with the requirement logging in with a Microsoft Account before you could interact with the product improved the conversion rate and recurring users.

Some A/B flight test flighting data:

Hub with highest conversion rate:

Hub with user logged in.

A few images of the final hub page with the user logged in and top navigation user interactions. We did continue to flight different versions of this home page in rotating the hero image and different CTA text strings.

Profile pages

You and your content live here

I think the profile page was both the most fun and the most challenging design areas that I created as it combined two critical design elements. We did a lot of internal research studies with Microsoft MVP's to try and gauge how much our users wanted to share about themselves or not. We also did site visits to middle schools and universities to get feedback and show potential features and options that might help them. I feel that I balanced it out thoroughly with the choices that I designed. But it is a space that is always evolving.

It was a challenge to keep the content area page customizable and flexible enough to help our users express their work in the way they wanted it to be seen by their audiences. Also, I need to make sure that it could accommodate both a considerable and diverse amount of content but still be approachable and easy to manage.

Profile Page Design Challenges:

Is easy to create and manage, is easy to customize the look and feel, Is easy to manage large amounts of content, can seamlessly fit in the into the Microsoft Office ecosystem.

Profile Page Design Solutions:

I approached the design profile page in a few different ways using competitive analysis, working with our user researchers and MS MVP's so that it would work for a wide variety of users. I decided to use inline editing for almost all of the user setting, instead of a global setting panel and it was aligned with my competitive analysis of other sites. In my first iterations of the content area, there were no tabs to help manage content. During research studies, precipitants verified what we also thought, and I added the content tabs. I also added ways to expand, collapse, and filter the content tiles to further lower cognitive load.

Publish and Share

Share your stuff with the world.

One of the central tenets of Docs was for our users to publish and share documents easily and see the results in hi-fidelity immediately. The first file types we supported were PowerPoint and Word documents. Our main competitors were Slideshare and Medium. We wanted to promote the Authors' ability to share their content with a variety of copyright options. By default, documents uploaded were set to Creative Commons license, were downloadable, and visible to anyone. We found that this model worked very well for people to get their content noticed and liked. It was equally essential that our users understood the different types of copyrights that were available to them.

Document Publish problems:

Users need to be able to publish and share documents.
Users need to be able to customize the attributes during publishing.
Users need to be able to control how their published content will be utilized.
Users need to be able to control who can see their content.
Users would like commenting and or feedback from other users.
Users need to be able to choose and understand copyright types.

Document upload solutions:

I created multiple CTA's for users to publish and or share documents. I needed the upload process to be simple and easy and approachable so that anyone would feel comfortable in what they were doing and had complete control. I used a modal dialog window to walk the user through the steps. I used callout links for common questions to help users understand the available options. After the users had published a document, I used the same UI to make it easy to adjust the document or its settings.