OFFICE LENS preface

Office Lens trims, enhances, and makes pictures of whiteboards and documents readable. You can use Office Lens to convert images to PDF, Word and PowerPoint files, and save to OneNote, OneDrive, or your local device. Scan and upload all your notes, receipts, and documents. Increase your productivity by eliminating time spent looking for documents or business cards. Sketch your ideas and snap a picture for later. Whether you're using it for business or education, Office Lens will help you save and share your documents in OneNote and OneDrive so you can all work together.

User PROBLEMS:

Customer/User obsession - Some example user problems:

I need to take clear photos of whiteboards in conference rooms at work and use them later.

I need to be able to take a series of whiteboard photos quickly and confidently.

I want to take an image of a whiteboard and annotate on it later.

I need to take photos of documents that are readable.

I need to take a photo of a form and sign and date it.

My challenge:

Design challenges and Deep Dives:

Design the UX for a smartphone capture application that creates content for Microsoft Office documents. First thing, learn as much as possible about the proposed product and the reasoning behind its creation. Along with using competitive analysis, I asked what specific problem or problems this product will address and how it would help our customers be more productive and efficient in the Microsoft Office ecosystem.

Some difficulties:

It was challenging to take the lead and own a product in this organization. The team of about 60 to 70 people was mostly Developers and Project Managers. They had a twenty-year reputation for the ability to rapidly create the backend systems and services need by Microsoft’s Office products. The team had been without any UX Designers since its creation with just three UX Researchers. I was one of two UX designers to join the team. Wanting to create customer-facing products having UX Designers was very new to the team. At the same time, I was being encouraged to take the design lead and evangelize design teams voice by the team's executive director.

Ownership

from product Icon to shipping the product.

While I did not make the final decision on the product Icon, I did design it, as a specialized team does all the final asset creation.

GETTING to the UX Outline

My approach:

Lead by example:

I created a series of recurring meetings and standups with the product stakeholders. In these meetings all the stakeholders could share and discuss their thoughts, ideas, concerns and solutions. This way, I could get started immediately and help set a level of leadership and expectation throughout the design process.

I engaged with my UX Research partners to address the individual customer problems and set the initial priority levels. Taking what I had quickly learned about our customer's user problems, pain-points, and levels of priority, I was able to start designing potential UX flow quickly.

Design test and iterate:

I used flash feedback and small in-office usability studies to gauge how well my solutions were solving the customer's problems and engagement to help me quickly iterate. This approach worked very well in each design sprint. I also used Microsoft’s MVP program (Most Valuable Professionals") to internally vet early prototypes of Office lens.

I made large printouts of my UX designs and or wireframes for the entire team to look at and give feedback. I encouraged my team to marc up the printouts with their inputs and also to directly come to me with questions or concerns.

Working towards the UX blueprint:

Thinking big:

This product was based entirely on technology and services; some were available the time, but others were not quite ready yet. I tried not to limit my design by technological restraints. Instead, I wanted to make sure that I was thinking big enough. I wanted to make sure that my UX designs would scale with time, technology, and across all platforms.

Also, the visual design language was in the process of a substantial update, and I did not have access to it during this first design cycle.

Results:

This process and level of ownership enabled me to make a UX outline for the design and flow that was used to create Office Lens on all existing platforms. The design outline is flexible and is easy to update, with new user scenarios and technology as they become available. It raised the bar to a higher level of leadership for both myself and the design team in general. Office Lens would go on to become one of Microsoft's most successful stand-alone cross-platform apps ever.

the UX Outline

Below is a snapshot of one of the UX outlines I created for Office Lens. It is not the actual final version, as I believe I am not allowed to share it. At the time I was designing Office Lens, there were almost no prototyping tools available by today's standards. The outline served its purpose as a design system agnostic way of communicating the UX flow to assist all the stakeholders in understanding how it worked. It also was used as the primary tool for designing Office Lens on many different design systems and platforms.