L u c i o  C a m p a n e l l i
  • Portfolio
  • UX PROCESS
  • BIO

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.
Picture

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.
Picture

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. 

USER WORKFLOWS

This below is just a sample of userflows used for reorganize the UI 
  1. User enters system workloads values manually, or automatically through cloudoscope  and the sizing tool displays the applications list 
  2. 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 
  3. User can customize the configuration using the "manual configuration tool-tip" on the top left side of the page
  4. 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
  5. ...
Picture

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 
Picture
Picture
Graphic design Iteration 1
Picture
Graphic design Iteration 2
Picture
Graphic design Iteration 3 
Picture

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 
Picture

CASE STUDIES:

Picture

NIMBLE PRE-SALES SIZING TOOL 

Picture

NIMBLE CLOUD VOLUMES  

Picture

DATA PROTECTION UI

Picture

DIAMANTI CONTAINER INFRASTRUCTURE

Picture

CLUSTER ORCHESTRATION MOBILE PLATFORM  

Picture

CORAID CENTRALIZED CONTROL PLANE 


 © LucioCampanelli. 2020,  All rights​ reserved. 


-



o

-


  • Portfolio
  • UX PROCESS
  • BIO