Completed in 2016
To envangelize Machine Learning and Stream Analytics, Microsoft field 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 help design the demo set-up of an internal-facing site that would enable field personnel to easily and quickly create and launch customer demos in a clean, simple and easy-to-use interface.
Starting out, the team 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.
Alternatively, we considered a possible concept to place all steps onto one page to expedite the set-up process. 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.
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.