CASE STUDY:
ContractWeb – Microsoft
Overgrown and under-serviced internal contracting tools: a tale as old as Microsoft
Vendor agreements are an essential part of Microsoft's day-to-day business. Long-term contracts serve established business partners. Those contracts need to be consistent between vendors. When individuals manage multiple corporate agreements, they must be standardized. Accountants and attorneys fulfill contract requests after resources are approved.
The problem
The tool used to create consistency for contracting across vendor partners had evolved into a tangle of unprioritized confusion, which was apparent when I joined the team. My experience told me that this would be an ambitious project without more information. I met with contract stakeholders representing accountants and attorneys and interviewed users via Skype to understand the architecture which I suspected was the source of their confusion.
Architecture and navigation audit with notes and edits
I met with project managers managers and frustrated content owners while working offsite to get my head around the problem. I had an ally in one of the managers who was more familiar with the content. Together we managed a spreadsheet of the architecture and content issues that had become obviously problematic during our investigations.
Production mockups on surface and windows phone
The solution
I quickly matured designs for the reorganized content. The dual aspect of content management and redesign could have stalled the project, but we maintained a positive attitude and kept at it. I conducted 22 user interviews via Skype with international subject matter experts who work with ContractWeb regularly to test our emerging solution. The framework helped narrow our options regarding navigation. We tested three different systems and landed on a pivot interface that also became the most prominent UI in adjacent solutions.
User research findings for stakeholder review
User testing revealed clear architectural preferences, and a survey of the landing page layout presented a clear preferred hierarchy. I created a prototype to confirm that this was the right interactive direction.
Completed designs depicting breakpoints
I redesigned all of the site's sub-pages at each responsive breakpoint with established hierarchy and edited content. There was a lot of production, but it helped the off-shore development team know what to build. I led quality assurance and testing. I would overlay the coded product with designs to compare and identify discrepancies in the front-end development to ensure that we aligned to the Universal Web Platform standards.
Layout discrepancies bearing callout with redlines
My contract dashboard details
Mobile dasboard details
I designed a dashboard for authenticated users to view their active projects in an organized way. This responsive solution was viewable on a mobile device and would allow them to check items' status when they were not in front of their computer. I felt like this would give them a bit of freedom from their desk.
In the end, there was a little time on my contract, and I was able to create the search experience that was out of scope for development so that they would have a consistent end-to-end experience when resources became available.
Additional assets
Submit a request landing page - desktop
Submit a request landing - mobile
Search query form - mobile
Search query form - desktop
My role
I was an offsite user experience design lead for this contract. The pace was fast. I had to manage content development while keeping stakeholders in the loop as details emerged. I scheduled and led all content-related meetings for the team over Skype. I captured notes to relay details to stakeholders as I gathered insights.
I worked in Sketch exclusively to create designs and I shared redlines with developers using Zeppelin including front-end code to incorporate into the product for accuracy. When discrepancies presented themselves, I created additional design materials to call attention to the difference between design and coded front-end.