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.
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:
- Are the critical alerts the first things that take user’s attention.
- How fast the user can dig into an alert?
- Are the task flows and navigation intuitive for the user?
- Is the provided information enough for the user to asses the situation and make a decision?
- 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
Now, this was just the beginning of the ongoing cycle of testing, iteration, and adaptation that underlies every successful design.