Technology Governance

Visa’s Core Governance Technology

Client
  • Visa
Date
  • 2020-2021
My Role
  • Lead UX Designer
Target Audience
  • Visa Internal Employees

Project Summary

Technology Governance, to simplified and automate core governance, security, and legal processes to empower the developer to identify, deploy and manage secure and resilient technology.

Register technology at Visa to protect it’s brand, comply with key controls, support rationalization of technologies, and ensure the operational integrity of Open Source Software.

Core Governance Processes

Technology Search – Enables the “Shift Left” paradigm for optimized selection of Open Source. Intelligent Search results based on vulnerability, license type, release date and such factors to enable best selection.

Technology identification – Integrated processes and automated scanning capabilities are used to identify Open Source libraries associated with Visa’s services.

Technology Registration – Automated and streamlined processes for registering technologies improves identification of Security vulnerabilities,
tracks License type and Operational risks related to Open Source at the point of selection.

Managing Technology Standards – Point and click options via a single window simplifies the lifecycle Management of Technology Standards for the Technology Owner to ensure the accuracy of Visa’s Technology Roadmap.

Reconciliation – Identify unapproved technologies and provide real time reporting by Service and Technology Product Group.

Business Problem

Technology Governance wanted to redesign their portal to be a premiere application at Visa. They wanted the application to be modern and sleek. They also wanted the application to be easier to use. Redesign application to make it easier to use for new and existing users. Revisit current search and register process and narrow down the search results so that user can select right technologies.

Search and register single technology – guided search helps the user to find technologies they are looking for. If not registered already then user can register technology with quick and easy registration process in a few steps.

Bulk registration – a very streamlined workflow to allow registrations of multiple libraries for scanned repository in a single registration. User can enable auto bulk registration configuration (one time) that triggers automatic registrations post scan.

Contribute to open source – this feature allows you to register code contribution to public/external repositories on Github.

View Technology Standards – list of existing technology standards in Visa. User can download the list of standard for reporting purpose. User can register/download existing standard from this page as well.

Release Bundle Compliance – Perform Compliance Check on Release Bundles (deployable artifacts)

Reporting – A deeper look into registrations. Users can choose the data they want to see within registered technologies, apply filter for specific search and generate reports as well as download reports as excel sheet.

Vulnerability management – map vulnerability to projects or find vulnerability for projects

Global site code – Site codes to data centers around the world

Business Solution

Redesign the workflow for each entire application. To create a better user experience for the user. To simplified the user interface and make it intuitive and easy to use.

Redesigning user interface. Creating better user experience and a better user flow each category.

Dashboard (requestor)
Dashboard (approver)
Dashboard (admin)
Email
My Registration
Single Registration
OSS Contribution
Implement Star Rating for Search and Register
All Technology Standard
My Approvals

OSS Repo
Reports
Global Site Codes
Release Bundles
Onboarding New Users
User Guide
CVE Management
Bulk Registration Enhancement
Navigations and data table

Reconciliation

Impressive Result.

It’s a lot more user friendly, users easily understood how to use the application and love how easy it was to use. Complicated terminology was broken down into language that was easy to understand. Technology Governance new landing page is visually stunning and captivating.

The new landing page, gives users all the information they need to know that’s related to them. The homepage is easy to use, and broken down into different eight categories and also 3 different views. There’s a onboarding tour guide that helps the users understand the new application. The sub categories all have icons that defines them.

The left side navigation helps navigate the site. The application has reduced the number of clicks from multiple clicks to a single click. There’s contextual help, that helps the user understand key points of the applications.

There’s a carousal banner to let the user understand the different aspect of Technology Governance. A design system was used to unified the look and feel of Technology Governance. The new data grid helps streamline the information and made it easy to search for information. Documentation was easier to fill out, there was a lot less restrictions.

@Hoang Dang has been recognized by @Archi Taparia for

“Recognized for “We Excel with Partners”

❝I’d like to recognize and thank Hoang Dang for his amazing work regarding Technology Governance redesign initiative. He was able to deliver clean and good UX Designs not only in defined timeframe but also with ad-hoc changes that we have requested after various reviews. Hoang has very good UX Design skills as well as communication skills. He always communicated effectively regarding the blockers and suggestions during the design process. We were having a few challenges to implement some of the designs due to technical limitations but Hoang listened to our requirements carefully and provided innovative solutions that helped us to achieve our goals. Hoang makes it easier to work while maintaining strong relationships with peers. I would love to work with him in the future for various initiatives. Thanks once again Hoang for your partnership with Technology Governance.❞


Design Process

Discover

• User Research
• Usability Study
• Affinity Map

Define

• User Persona
• Surveys
• Empathy Map

Ideate

• Ideas
• User Flows
• Information Architecture

Design

• Low Fidelity Wireframes
• Prototypes
• Design System
• 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

Research Overview

I did 15 user interviews and card sorting with non-admin users (requestors, approvers) and admin users.

Affinity Map

Navigation/UI

Key finding #1

Though participants like the overall idea of the portal and certain features within the portal, they have issues with navigation to the portal, within the portal, and from the portal to other relevant connected tools. This needs to be simplified along with adopting a cleaner, more intuitive interface.

Participants are happy that such a portal exists and like certain features such as customizable reports, bulk registration, vulnerability mapping.

P7 “They have made adaptions in the last six to eight months, they have really listened to us and modified multiple things. They’ve made their more intuitive, easy, easier to answer, and the process much easier to follow. So for me, it’s not just the questions, but also the emails that are generated and the process that goes downstream. So I do like the tech governance workflow and questions better (than other tools like CloudView, KMR).”

P5 “(Good to see) some other groups are using (the technology) or doing POCs on that. I can just go and talk to them, instead of me experimenting all over again. So instead of me also doing a POC, while he is also doing a POC, might as well use each other’s information.”

Participants like seeing action items on logging in to AskNow (Service Now) and like the look and feel of CloudView and ShiftLeft. Participants expressed the need for better integration of TG with other tools such as ShiftLeft. Participants think that it is difficult to find and navigate the TG website, and they had to go through serveral people/ links to find it.

P8 “The functionality inside ShiftLeft is a lot cleaner. I guess just the certain UI aspects of it. And now certain pop ups happen. It’s just a little more visually pleasing.”

P3 “The ideal for me, would be to have end a tool or an application like this one, that or I can place relevant information, and then use that as the one single source to keep all the updates. There’s too many different ones.”

P1 “If there were a control setting that allowed me just to click on ITDR and went directly to the window I have to work with (Approval window), it would be much easier.”

P2 “It’s kind of clunky, and that it doesn’t give you a whole lot of info like ongoing feedback about where you’re in the process.”

Action Items

• Improve email structuring to help users find TG

• Clear indications of when TG intersects with other tools/ portals and helping users go back and forth seamlessly

• Less cluttered, cleaner UI

Content

Key finding #2

Content inside the portal such as search results, forms, labels and instructional are not super clear or easy to understand. Users need a better on-boarding experience and in-context guide.

Participants dislike:

• Jargon / technical terms

• Unclear instructions and labels

• Deeply nested actions

• Too many clicks

• Format of search results

• Lack of guidance

Terms participants found confusing:
Commercial (3 participants), Open Source (3 participants), Visa Open Source Download (3 participants), Bulk Reg for scanned project (2 participants), and Technology standard (3 participants).

P1 “They changed the design that you used to be able to click on a record and it would just open up. Now you have to click on a plus, to the right of the record. Just clicking on the record itself worked fine. I had to reteach myself to go open up every record with the plus side.”

P3 “Even though my result is hiding somewhere in the search record, I’m always tempted to add a new registration so that I can save myself trouble to review the existing registration standard or stuff like that.”

P7 “I think it does a very good job of cataloging prior versions as well, because again when I type in a title, I may get 20 titles on all of the history of the past registrations.

P5 “I think there should be a way to look at categorization or guideline about what technology is falling into what category like a hint, like a question mark, or something – this category means these things, these are some of the examples that go into this, which one makes sense for this particular item and easier for us to use.

Action Items

• Reduce number of steps needed to finish task

• Simplify jargon to more human language

• Provide better onboarding guidance, step-by-step guidance and tool tips

• Make search results more consumable

Communication

Communication needs to be improved both between people holding different roles (eg: approver-requestor), and between the portal and users in all roles, through succinct and limited email notifications.

Most participants dislike receiving numerous emails which also contains too many links. They prefer to have less emails, and have ability to manage/record communication in TG portal.

Participants dislike:

• High dependencies on one approver.

• A lot of information was exchanged offline.

• Insufficient sharing of information

• The number of emails

• Too many links/info noise in the email and there is no priority

P2″ [For OS Registration] I have to work with essentially our IT guys to get this put in all manually. And you know, God forbid, she leaves or he goes on vacation, because then it just completely stops the process.”

P5 “There was a lot of this offline things happening. If it was happening from the application seamlessly, it would have been much easier. Like if I write a comment, somebody responds, so that way it is recorded.”

P4 “I guess it would be kind of nice, if from the email, if it went straight into that and did the search automatically rather than me, because I’m doing is cutting and pasting from the email into the search box.”

P1 “We get thousands of emails to this mailbox. These are good for records and they are all useful, I wouldn’t remove these.”

Participants prefer:

• Manage communication in the system where it’s easier to track and is visible for all parties.

• Have the due date mentioned in the email.

• A single link to direct them to their task.

• A consolidated email or some sort of inbox/ alerts in the portals where they can go back or remind them to go back.

Action Items

• Reduce number of emails

• In app notification/ inbox

• Better email format with due date and a link

• Request confirmation with status

• Lifecycle management

Role Based Dashboards

There are different types of roles and responsibilities on the portal, and participates expressed the desire to have personalized role based dashboards to cater to individual needs.

Participants want better bucketing (colored tags by status, new requests, overdue requests etc.) and only filtered relevant request to show up on their home screens.

Participants want a personalized role based dashboard where they can manage their tasks more efficient and effectively. They can take a quick glance at requests easily and on the go.

P1 “It would be really nice just to see the new items. Because rather than have to scroll through, I can find the things that still need to be addressed. New items come in as pending. Or if I asked for information, it will show up as information. And it’s nice to see those, but I don’t need to see it again until they responded. So only really seeing and tracking things that I have to pay attention to , as opposed to scrolling.”

P2 “I think role based or context based UI is generally more intuitive to us. And you know, honestly, folks like us, we’re lazy, and we don’t want to sit there like, actually read every single word on the page, scans. That make sense, I got to go do that.”

P3 “The new site should be mobile friendly. So that if I have a request, especially for approver, they should be able to approve on their mobile. So they are not logged in the laptop and having lunch and want to approve something, they should be able to do it on their mobile.”

Action Items

• Personalized dashboard with quick links

• High level statistics and visualization

• Filter for request list

• Colored tags & badges

• Dialog box & updates

• mobile

Empathy Map

Non-Admin User Approver

Says

• P7 I want to correct bad data
• P5 Requests are not automatically bucketed
• P9 I would like to have bulk approvals for group based on
license type
• P7 Questions should be more intuitive
• P2 The labels are not very clear
• P7 Alerts, pop-ups, Skype messages would be nice to
declog inbox
• P5 No sharing of information amongst the members
• P6 TG team should review and then assign items to approvers

Thinks

• P5 Why was this not approved?
• P2 Context based contents reduces the noise
• P1 Would be nice to see just new items
• P5 Should I categorize this as this kind of technology?
• P2 Why do I need to do security check, or get a ticket?
• P1 There’s a lot of stuff on the left hand side that I don’t know
• How do we communicate what we want in a way we
understand what we’re getting and they understand what
we’re asking for?

Does

• P1 Cleans up email noise
• P5 Interacts with requestor
• P7 Confirms tech registration was filled out correctly
(vendor spelling, tool spelling, version, category)
• P9 Click around a little bit in email without certainty to
find my approvals
• P5 Approves Technology
• P1 Reviews open source licenses, use cases, Intellectual
Property considerations
•P1 Scrolls down list to find the next record to deal with if
it’s buried in the middle somewhere
• P6 Reviews Access Management controls, data classifications,
the technology itself (security).

Feels

• P6 A lot of offline communication is happening
• P9 It was always a little bit clunky
• P7 Pained (if they don’t know answers to form questions)
• P7 Burdened (with emails)
• P1 Frustrated (TG changed the design for opening a record
to a plus sign)
• P9 It’s frustrating because they (requestors) haven’t completed
all of the required fields
• P2 Insufficient info about process
• P6 Overwhelmed (as only approver in their lane)

Admin User Approver

Says

• A3 The UI, the color scheme, everything looks so old
• A1 I would like to see the personalized dashboard
• A3 I want to know that confirmation when I submit a request
and details where I can track status
• A4 I like the vulnerability mapping functionality
• A4 I like the CloudView portal
• A3 I want the portal to be mobile friendly
• A3 We have a good program, our program is to maintain key
compliance in Visa. We have a good number of standards
• A3 So much jargon

Thinks

• A2 Mobile friendly for request status checking or approving
• A3 “My view” where I know that status of my request
• A3 It doesn’t matter how long you are writing an email and how
much steps you are providing, no one is going to read it
• A2 It’s not that straightforward when I register, you have to do your
due diligence first. Too many names and versions.
• A3 For approver, we are not doing a good job to give notifications.
Because it is really hard to track one request.
• A4 We’ve got to make the registration very simple.
(for non tech folks as well)
• A2 The date that I see on my screen. If it can be faster rather
taking some time
• A1 On the registration page, some users have a hard time to
understand why they need to register

Does

• A3 View open source download, getting reports and
lifecycle management
• A1 Give demos, show people how to search and register
• A3 Search, register, and customizable report
• A4 Use Customizable report frequently, QA testing
• A2 Generate report for tech standards
• A2 Support users for lifecycle management
• A3 Give demos for registering and approving
• A1 Support users with registration

Feels

• A5 The portal is very difficult to navigate
• A5 Search is slow
• A5 Labels are unclear
• A4 Overwhelmed information to read through
• A4 Too many emails
• A2 Too many clicks to finish a task
• A3 UI Buttons are confusing
• A5 Hard to make edits

Interview Questions

• What is your role at Visa?
~ What do you do, what is your day like?
• How did you hear about Technology Governance portal?
~ How often do you use the portal?
• What are you looking to accomplish when you use this portal?

• What features do you think the TG portal has?
~ Can they compare it to some other Visa product?
• Can you walk us through the last time you used the TG portal?
~ What did you do?
~ How did you feel about the experience?
– Positives?
– Pain points / Frustrations

• What did you like about the TG portal?
• What do you dislike about the TG portal?
• If you had a magic wand, how would you change the TG portal?
• Questions, comments, suggestions?

Wireframes

Key Finding #1

Though participants like the overall idea of the portal and certain features within the portal, they have issues with navigation to the portal, within the portal, and from the other portal to other relevant connected tools. This needs to be simplified along with adopting a cleaner, more intuitive interface.

Key Finding #2

Content inside the portal such as search results, forms, labels, and instructional are not super clear or easy to understand. Users need a better on-boarding experience and in-context guide.

Key Finding #3

Communication needs to be improved both between people holding different roles (eg: approver-requestor), and between the portal and users in all roles, through succinct and limited email notifications.

Key Finding #4

There are different types of roles and responsibilities on the portal, and participants expressed the desire to have personalized role based dashboards to cater to individual needs.

Admin Dashboard

User Dashboard

Onboarding

Current Technology Standards

Approver Dashboard

Global Site Code

Customizable Report

Search and Register

Contact

Let's Work Togehter.

Let’s find out how to work together and create something meaningful or valuable.

123-456-789

Contact