CloudView
Visa’s Cloud Computing Platform
Client
- Visa
Date
- 2020 - 2021
My Role
- Lead Product Designer / User Experience Designer / User Interface Designer
Target Audience
- Visa Internal Employees, Partners, Clients, Developers, DevOps, Product Owners, Engineers
Project Summary
CloudView is Visa’s Private Cloud Computing platform. Offering power, storage automation, middleware, database, network, compute and other functionality to help Visa’s applications scale and grow. Using CloudView helps developers innovate faster and become more agile. CloudView lets users leverage various infrastructure automation and solutions to build sophisticated applications with increased flexibility, scalability and reliability.
Visa’s Cloud is a comprehensive evolving cloud computing platform that includes a mixture of infrastructure as a service (IaaS), platform as a service (PaaS) and Software as a service (SaaS). CloudView has on demand infrastructure technologies like compute, storage, network, and databases. Developers use CloudView to make their applications faster, easier and better.
Business Problem
Visa wanted to build a premiere Cloud Computing platform that could rival Amazon AWS, Microsoft Azure and Google Cloud.
The existing homepage was outdated, barely had any useful information that can guide or help a new user. A lot of the applications on their platform were built by different teams and different developers. It didn’t follow a design system, the platform wasn’t unified, it was difficult and hard to use.
Tribal knowledge was needed to understand how to use the platform and applications. To understand how an application worked, help with needed from colleagues. People had a hard time creating a project, finding projects, and knowing the status of a project.
Business Solution
The goal is to create a premiere innovative Visa Cloud Computing platform. A unified Design System ecosystem, needed to be created to unified the platform applications and services.
A new help system needed to be created to help users understand the platform, applications and services. A landing is needed to help users understand what CloudView is about.
The dashboard needed data and metrics that was important to the user. The dashboard needed to help users find applications, projects and their approvals, fast and easy. The entire platform needed to be remapped and reorganized to easily understood categories.
Results
With the new CloudView Cloud Computing platform, there are now over 14000+ unique active users on CloudView monthly. New landing page, has sleek look, offers information about CloudView. Driving traffic and new users to site. Dashboard is user driven, all metrics and data are related to the user, including my projects, my environments, my virtual machine, decomm, my request, quota management, and my approval.
New users were onboarded with a tour guide on how to use the dashboard works. The dashboard had a new sleek left sidebar navigation, with new icons for each section, the users liked how they could always find what they’re looking for. The user could also add their favorite applications to the dashboard.
The “All CloudView Services” showed all the information architecture, which could be open or collapse. There is also a search bar included to help find any resources, services or documents. A lot of icons are used to help established a face to each application and service. All hidden applications and services were surface to the top of CloudView and Tribal knowledge is no longer needed for help.
The users liked how easy it was to find their favorite application and add their favorite applications to the dashboard. The users also loved the new help system and it’s features, which help them understand and learn easier. A unified Design System help gives CloudView a consistent design across the ecosystem (Applications and Services)
Users understand, and familiarized themselves with the new Cloud platform quickly through Design System. The new CloudView cloud computing platform is sleek, beautiful and easy to use. New data grid system that keeps data information, organized and concise, along with a new action tool bar. Applications were surfaced to the top and found easily on the dashboard. Created CloudView app store, that shows all the apps and services. There are currently over 50 applications and more being added each month. Rebranded CloudView, new logo, and design system gave the platform an identity.
FY22 (Q1-Q4) Visa Cloud Platform – By The Numbers
72k Scalable Run Requests Completed
15k Virtual Machines Provisioned
24.8k Day 2 Operations Completed
73.5k Certificates Provision
3.6k Standalone Physical Servers Provisioned
88.84k Containers Builds
656.85k Deployments Completed
8.7k Load Balancers Configurations Completed
187.05 Inflow Requests Completed
132k Compliance Scans Executed
1179k Patches applied in VVMS
Visa Cloud Platform
CloudView
Cloud Fabric
Developer Portal
Infrastructure as Code (IaC)
Visa Vulnerabilities Management System (VVMS)
Platform as a Service (PaaS)
Container as a Service (VCaaS)
Load Balancer as a Service (LBaaS)
Language / SDK Offerings
MW/ DB Day 2 Operations Service
VM Provisioning
Red Button as a Service
Web Service Offerings
Firewall as a Service (FWaaS)
Single Instance Database Offerings
Certificate Management
VM Operations
App Server Offerings (incl. Kafka-as-a-Service)
Messaging Offerings (Incl. Caching-as-a-Service)
Clustered Database Offerings (incl DBaaS)
External Connectivity as a Service (ECaaS)
SOI/SOE Management
Infrastructure as a Service (IaaS)
Physical Server Provisioning
Scalable Run
Shields Up
Tech Refresh
Hypervisor
Inflow
Switchport App
Capacity Optimization Portal (COP)
Subnet Workflow
Storage Services (NAS, SAN, S3)
Decom
Infrastructure Security & Compliance
Compliance Turnover
Compliance Scanning
Compliance Lifecycle Management
Observability
Opera
Logging Pipeline
Ping Check Monitor
Logging Platform (Humio)
Log Onboarding
Monitoring Tools
Log Shipper (Fluentbit)
@Hoang Dang has been recognized by @Richard Powell for“We Enable and Inspire”
❝Hoang has been a fantastic asset to the Cloud Product Team in respect of knowledge transfer to enable us to create design work. More crucially the many designs that Hoang has created for CloudView and Cloud applications, especially the homepage, environments, dashboard, CI/CD etc.. is second to none. Hoang’s attention to detail, capabilities and quality of designs has already brought some significant changes and improvements to CloudView, with many more already completed.
Hoang is always approachable, professional and easy to work with and certainly an individual who turns ‘ideas’ into artwork!
Looking forward to continued working with Hoang.❞
Design Process
Discover
• User Research
• Usability Study
• Competitive Analysis
Define
• User Persona
• Surveys
• Empathy Map
Ideate
• Initial Ideas
• Task Flows
• Card Sorting
• Information Architecture
Design
• Color Scheme
• Typography
• Low Fidelity Wireframes
• Prototypes
• High Fidelity Designs
• Final Designs
Developer
• Stake Holder Review
• Development Team Review
• Development Team Hand Off
• Pixel Perfect Designs
Recollect
• Takeaway
• Impact
• What I learnt
User Research
User Survey
The survey consisted of 20 questions, divided into 2 sections. The users who have used CloudView before and the users that haven’t used CloudView before. The survey help me gain user knowledge into CloudView platform.
What is the biggest issue with CloudView?
Usability Study
This study was to analyze the user journey. It was to find the natural product interactions with the platform. Observing firsthand how the user
used CloudView. Gain clarity on what worked well for the user and what didn’t worked well for the user. I did usability testing on developers
and new users.
• Users had to click two to three levels of clicks to find their virtual machine.
• Users had to click several steps to find applications they were working on.
• Users had to click multiple times to find help.
• Users had a hard time finding approvals.
• New users couldn’t create a project.
• New users had a hard time navigating.
• New users didn’t know where to go for help.
• New users weren’t exactly sure how activity tracker helped them.
Insight
The user research helped me gain insight into CloudView platform. Survey’s help me understood the user’s pain point and frustration with
the platform. Usability study’s using test scenarios I found the platform was very hard to use for most users and it needed a major redesign
overall. Users couldn’t find what they needed or find the help they need. Usability studies made me realize that new users couldn’t navigate
in the current platform without tribal knowledge.
Competitive Analysis
The three big premiere Cloud Computing Platform is Amazon AWS, Microsoft Azure and Google Cloud. These three platform had a lot of
similarities.
• All three platforms had a user dashboard.
• They all followed a Design System.
• They had a data grid with organized information.
• Each of their applications had it’s own icon to identify it by.
• Complex information were easy to understand.
• Clean user interface designs.
• They had a unified design ecosystem.
• The help system was very helpful and friendly.
• Applications and services were broken out into different categories.
Task Flow
This flow diagram outlines all the needed functionality, it’s the main task the users can do. The flow is to help understand how the dashboard
works overall and how it can lead to many different flows.
Card Sorting
Persona
I created two different personas, one was the regular active user and the other one was a new user. This will help me understand each individual
need for CloudView. I can design CloudView to accommodate both users.
Empathy Map
User Journey
The user journey map is to help me identify pain points and the feelings the users have while using CloudView. I added solutions to the problems.
In this User Journey study we will use Jessica as a persona.
Goal – To be able to navigate from homepage to application, find project and work in it.
Information Architecture
Wireframes
High Fidelity Designs
Design System
Developer
• Collaborate with Developers to implement Pixel Perfect Designs.
• I have a meeting with Developers on a weekly basis.
• Use Jira to check off the completed task items and sprints.
• Use Scrum for daily standups, work agile and move fast.
• All project files, HTML & CSS and assets are delivered to developers.
• I work hand in hand with the developers to implement components and designs.
• I keep the developers in the loop throughout the Design Process.
• I also send my UX research data to the stakeholders and developers.
• I send interactive prototypes to the developers so they know how the designs interacts.
Takeaway
Impact
• More traffic was driven to the site, there are 14000+ unique users on the Cloud platform
• Users spent an estimated time of 45 minutes on the Cloud platform
• With the Redesign, users quickly understood how the platform worked.
• Users saved valuable time with new navigation system, people are using more applications on CloudView, finding what they need
• A lot of happy users and positive feedback on the new Redesign
What I learnt
• I learned that design system if implemented from the start can have a huge impact on the user experience in a positive way
• I learned to take my time to understand the cloud platform, the users and the overall endgame goal.
• The most important takeway from this project is focusing on creating a positive experience for the user, finding solutions and solving the problem through research, and keeping the main goal in sight.