Designing a New Feature: The Cloud app visibility 

 
 

Project Summary

 
  • Project Name: Cloud app visibility
  • Target Audience: IT and security professionals 
  • Project Goal: Enabling IT and security professionals to have deep visibility over cloud applications that are being used in their
  • My Role: Information architect, User experience designer, Interface designer
 
 
 

Research

 
 

I reached out to a number of our customers for 30 minute interview. My goal was to understand  their current process in evaluating security risks associated to each cloud application being used in their networks and find out about the metrics that play a critical role in their assessment. 

 
 
 

Challenge

 
 

Once I organizing my interview notes I realized the trick in this project is the information architecture.  How to elegantly present all the necessary data in a way, so it requires the least amount of cognitive stress from the user to make the right decision and take action.

 

 
 
 

Task Flow & Paper Prototype

 
 

After analyzing the interview insights and presenting them to the project managers in charge, I created the map and task flow for this new section of the dashboard. Once both the IA map and the task flow were approved by the stakeholders I moved on to create something more tangible.

I came up with a number of paper prototypes for a quick demonstration of different layouts that we could present the necessary data in the dashboard. Below is an early task flow and paper prototype.

 
map-1.png
 
paper prototype-2.jpg
 
 

Interactive Wireframe

 
 

Considering the user‘s objective for leveraging the cloud app visibility feature, one of the prototypes made the most sense.  Having the the paper prototype the next step was to create an interactive wireframe so I could see if all the elements would work well together and if it would make sense to the users. I used Illustrator and Invisionapp to create the  interactive wireframe.

 
 
 

Testing

 
 

Given that the cloud app visibility was in its early stage, it was the best time for user testing of the low fidelity interactive wireframes.

The objective for the user testing was to find out the efficacy and efficiency with which users can achieve their goals. Below are a few examples:

  1. Are the critical alerts the first things that take user’s attention.
  2. How fast the user can dig into an alert?
  3. Are the task flows and navigation intuitive for the user?
  4. Is the provided information enough for the user to asses the situation and make a decision?
  5. If the user chooses to, how easy it is for him to navigate into the deeper layers of information?
 
 
 

Development

 
 

Since we already had an established UI framework for the dashboard, the engineers started developing the UI based on my interactive wireframe. In the mean time, I worked on defining the new interactions and transitions, specific to this the cloud app visibility.

The series of images below demonstrate  the IA , UI and interactions.

 
 
 
Click on thumbnails and navigate through
 

 
The full width screenshot the early UI
 
arrow.png
 

Now, this was just the beginning of the ongoing cycle of testing, iteration, and adaptation that underlies every successful design.