OFFICE ADD-IN DESIGN TOOLKIT

2016 - 2017

Disciplines

Interaction Design | User Experience Design

Skills

Design Research | Design Consulting | Wireframing

Media

Publication: Github

Design Components: Office UI Fabric 

Graphics: Photoshop and Illustrator

Wireframing: PowerPoint, Adobe XD 

Prototyping: HTML, CSS

 
prototypeFlow.png
addin_template.png
addin_client.png

Designing, prototyping and developing an Office Add-in requires an extensive knowledge of all the moving parts that exist in the Microsoft ecosystem. 

An add-in can potentially be in all formats and platforms: desktop, mobile, and web applications.

As an UX designer for add-ins, my main task was to provide holistic design consultancy to internal and external groups developing add-ins. 

From user discovery to productivity my involved look at the entire add-in user experience.

Initial work in the development of a design system kit that increases the production of Add-in prototypes involved:

-User pattern identification and documentation

-Identifying user entry points and interactions

-Cataloguing the common sizes of the side pane.

Further work involved identifying common roadblocks in the path to designing an add-in.

-Simplifying experiences like Authentication, on-boarding, and add-in/app interactivity.

-Design flows for icon design and implementation

 

 
scriptlabPosterBig_Light.png

Exhibit A : Script Lab

Script Lab was conceived and developed to offer developers a tool that allows them to experiment with the Office API's within Office itself.

My role involved the interaction and visual design of Script Lab. I was required to spec user flows, wireframes, and generate graphic assets like command icons, branding, and tutorials.

Script Lab is available for free as of April 18 2017 at https://aka.ms/getscriptlab

 

 
 

I joined the Office Add-In Quality team at Microsoft to help leverage the potential of Office Add-ins and empower developers to create compelling add-ins that complement the Office user.

The Add-in Design Toolkit helps in-house designers deliver uniquely tailored design recommendations to Microsoft partners as well as give UX guidance to the developer community as a whole.

My role requires me to:

  • Have a solid understanding of Office API's
  • Know the Microsoft's design languages
  • Quickly assess add-ins and create design recommendations following strict guidelines
  • Work with other designers and developers
  • Research and document design patterns
  • Contribute in delivering code samples to the developer community