DISCOVERY
I started analyzing the existing UI. The interface consisted in a long page full of data and toggles hard to use and understand. Furthermore the recommendation system would return too many details in one page. It was hard to make decisions.
UX RESEARCH
From surveys and interviews I assessed that users were often losing context, hardly took advantage of the capabilities of the tool, and often they would not come back to the platform. To validate the findings and collect ideas I organized focus meetings with sales, partners and clients. I also worked with the internal development team including project management, engineering and the data scientists to refine the requirements and roadmap. We also aalyzed the existing UI in details using tracking tools. We explore user clicking and attention diagrams.
IDEATION
STAKEHOLDERS REQUIREMENTS
Refresh the UX and UI to enhance usability
Reduce the amount of information displayed and number of clicks
Leverage real-time predictive analytics to stimulate interest and adoption
Provide sizing estimates using interactive visualization and animations
Design flexible interaction tools to manage the amount of information needed for sizing
Allow users to collect their submissions to enhance predictive performance.
Create a centralized platform including a TCO calculator and comparison tables.
Reduce the amount of information displayed and number of clicks
Leverage real-time predictive analytics to stimulate interest and adoption
Provide sizing estimates using interactive visualization and animations
Design flexible interaction tools to manage the amount of information needed for sizing
Allow users to collect their submissions to enhance predictive performance.
Create a centralized platform including a TCO calculator and comparison tables.
USER WORKFLOWS
This below is just a sample of userflows used for reorganize the UI
- User enters system workloads values manually, or automatically through cloudoscope and the sizing tool displays the applications list
- User customizes application details clicking one application in the list ( application tab turns white and open a customizable tool-tip) . Then the user click "save" and the system returns a set of recommendations displayed in a graph with 3 axis: Capacity, CPU, and Flash
- User can customize the configuration using the "manual configuration tool-tip" on the top left side of the page
- User clicks the top recommended solution ( displayed in green in the 3D graph) . This will turn-on in real-time the circular graph for workload validation
- ...
DESIGN
Together with the graphic designers, we started drafting the design guidelines and prepare all the detailed pages to handout to the development team. We work in an agile environment where designers, engineers and UX sometimes work all together in one room to speed up the development cycle and ship faster more efficiently
Early high fidelity UX design
Graphic design Iteration 1
Graphic design Iteration 2
Graphic design Iteration 3
VALIDATION
After development take full control of the process, we created several prototypes to validate the experience. Not all the time prototypes will be transformed in product feature, but when it happen the developer teams will have a clear idea on how to stream line the code, libraries and structure transforming this painful process into a nice ride to production.
below is a screenshot from the final prototype
