Purpose
Microsoft wanted to improve the quality of Office Add-ins while enhancing developer engagement.
Challenge
The quality of Office Ad-ins (Office apps) was all over the board. Some developers had created Add-ins that were useful, but far off the Microsoft branding. Our goal was to create a toolkit that would work well for both developers and designers on multiple platforms.
Solution
Our team created templates as well as brand design guidelines to help developers and other designers to more quickly develop their add-ins.
We created PowerPoint, Excel and Word templates for both desktop and iPad; and then added design guidelines and pattern templates to illustrate how one might design an Add-in. We also helped one of the engineering teams with the UI of some Add-in examples that they were working on. College Budget Tracker illustrates some design and icon options for them to choose from.
Outcome
Created a library of common UX design patterns and best practices for Office Add-ins using Office UI Fabric components and styling. Publicly available on github.
https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns
Learnings
As a team of four, we were each given a piece of the project to work on. After we'd all created initial designs and iterated, we found that we needed to backtrack in order to integrate our work into one consistent deliverable. We should have started the project with a day or two of a design workshop; creating scenarios, use cases and establishing design guidelines. Doing so would have saved us time, created a plan and aligned us towards our goal.
Selected Screenshots
