INTRODUCTION
DocX (Docs relationship explorer) is an inquiry tool for Accounts payable clerks, to easily and quickly locate all related documents across types within Procure-to-Pay process based on visualized document relationships.
ORGANIZATION
D365 Finance team: AP Automation
PPMG Design Studio
TOOLS USED
Figma, Balsamiq, Xmind, Whiteboard,
Teams, Office Word + Excel + PowerPoint
PROJECT TEAM
UX designer: Me (0-1 build a feature)
1 PM, 3 SDEs, 1 QA
​
Design studio lead: Kevin Honeyman
Program manager: Zezhang Zhao
Principal group manager: Kacper Rzepecki
Mentor, Sr. UX designer: Alina Lin​
PROBLEM
No shortcuts and unclear document relationships make it time-consuming and troublesome to locate, review and compare all related documents across types. Each query session usually costs more than 3 min.
SOLUTION
![MS-public.png](https://static.wixstatic.com/media/f305cf_a6cefac89e5143a39704a621304baf1b~mv2.png/v1/fill/w_416,h_229,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MS-public.png)
DocX is a centralized panel to
-
filter and access all types of related documents
-
visualize their matching relationships
​
It covers more than all use cases (20+) and adapts to 4 edge cases.
DESIGN PROCESS
![Gantt chart.png](https://static.wixstatic.com/media/f305cf_755b05fad81444d0b68d00596853d32d~mv2.png/v1/fill/w_943,h_468,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Gantt%20chart.png)
*During 3 months in MS, I was responsible for 2 projects. Here I only take the main one to elaborate.
C H A L L E N G E
CHALLENGES
Design universal interaction patterns for all use cases.
​
​
Different use cases have multiple variables, this requires a consistent pattern to adapt to them.
MY APPROACHES
![Sitemap.png](https://static.wixstatic.com/media/f305cf_866ef78baead434f8396190d0ea7d2af~mv2.png/v1/crop/x_2,y_2,w_793,h_462/fill/w_512,h_298,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Sitemap.png)
Creating sitemaps and discussing with engineers (pilot tests) to be aware of edge cases and frequency.
​
Start with the simplest cases and add on incrementally to keep the tool adapting to fit all cases.
Facilitate user onboarding to new concepts.
​
Elaborating on new features requires self-explanatory UIs and interactions to lower the learning cost.
![A_B doc.png](https://static.wixstatic.com/media/f305cf_159a55ebf8bb4a42855f319406a817ac~mv2.png/v1/crop/x_2,y_2,w_794,h_410/fill/w_513,h_265,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/A_B%20doc.png)
Using Fluent UI design language, and iterating interactions based on A/B tests feedback.
​
Work cross-functionally to tweak and find a "just-enough" balance from info insufficient to info overload.
R E F L E C T I O N
Why do we reduce the prototype fidelity when testing?
-
Prototypes used for testing do not necessarily need super high fidelity (such as mimicking all data and business cases). Otherwise, it is easy to shift their attention to feedback on business rather than experience.
​
-
Coding qual and quant data from testing: Qual data needs to be better analyzed and synthesized (excel sheets to organize user feedback would be helpful). For quant data, it requires users to give straightforward scores on different metrics (ex. likeability, confidence, and value scores).
​
-
Moderate and control the conversation: The very beginning is to set the tone of the user test and emphasize to the user that it is not to test the person but to test the tool which makes users relax.
Having more self-drive and collaboration made my project a greater impact.
-
By discussing with interns in the upstream and downstream business, I found that we could string together a story. So they helped me develop some workable design concepts, and I helped them apply my design framework's interface design.
​
-
The collaboration supports me to onboard myself on the project better, as well as cook a nice storytelling of the whole flow from both the engineers' perspective and the user experience designer's perspective.
MY ULTRA-HAPPY TIME AT MICROSOFT X)
![IMG_3537.JPG](https://static.wixstatic.com/media/f305cf_a9d83f428c5941c4a6fca4b64a33e244~mv2.jpg/v1/fill/w_423,h_459,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_3537_JPG.jpg)
![IMG_3540.JPG](https://static.wixstatic.com/media/f305cf_2efe40f52e3e46c5bfae45366be52606~mv2.jpg/v1/crop/x_0,y_0,w_1080,h_1744/fill/w_291,h_470,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_3540_JPG.jpg)
![IMG_3538.JPG](https://static.wixstatic.com/media/f305cf_b4cea077c62046a494dc4eeb67daf430~mv2.jpg/v1/fill/w_423,h_459,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_3538_JPG.jpg)
![IMG_3539.JPG](https://static.wixstatic.com/media/f305cf_3573126d1f9c4e6994558d7fb854deb5~mv2.jpg/v1/crop/x_0,y_0,w_1080,h_1158/fill/w_271,h_291,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_3539_JPG.jpg)
![IMG_3539.JPG](https://static.wixstatic.com/media/f305cf_3573126d1f9c4e6994558d7fb854deb5~mv2.jpg/v1/crop/x_0,y_1744,w_1080,h_1409/fill/w_271,h_354,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_3539_JPG.jpg)