Duration: ~2 weeks
To envangelize Microsoft Machine Learning and Stream Analytics, field sales personnel were creating one-off, end-to-end demos specific to customers, populating the set-up of each demo with domain-specific data that became time consuming. To make the experience simpler and efficient, Southworks tapped me to create visual designs of the Demo Set-up UI, an internal-facing site that would enable field sales personnel to easily and quickly create and launch customer demos in a clean, simple and easy-to-use interface.
Starting out, the Southworks project manager shared past comp examples of similar projects and provided a rough task flow sketch of a 5-step linear process for setting up a demo to ensure and improve the chances of people going through and filling out the form fields.
Based on the task flow and discussing requirements with the team, I began designing higher fidelity comps to enable us to visually see the flow through a wizard-like experience. Visual progress indicators below each page title were added to give people a clear understanding of where they were in the UI. To align with the Microsoft Azure brand, I leveraged colors, form elements and design patterns from the Azure site to create visual hierarchy and order in the UI.
Feedback response from these early comps were that while the look and feel was better and consumption of information was clear, there was the suggestion that perhaps steps could be combined given the minimal amount of tasks the users needed to perform to set-up a demo.
Alternatively, we considered a possible concept to place all steps onto one page to expedite the set-up process. I injected a branded look and feel by adding colors and illustrations inspired by the Azure site along the left side of the page. This also helped to create structure by drawing the eye top to bottom.
While having all of the tasks sequentially placed onto one page from top to bottom made it transparent on what the user needed to do downstream, we discovered through internal hallway tests that this UI made it prone for users to skip required fields and sections, or appeared cluttered and cumbersome to have all form sections displayed in one page.
After iterating on concepts, we landed on a 3 step guided process. Our rationale for this approach was to break out the UI into a series of chunks, or groups of operations, that put related choices together. The new task flow became:
This made the demo set-up experience more approachable and streamlined, enabling users to make quick, informed decisions.
For the final look and feel of the site, the first page was treated like a landing page to give people a clear starting point. The hierarchy of content is concise and balanced using color and typography. The site's colors, form elements and design patterns were leveraged from the Microsoft Azure site to create brand unity.