Interaction Design for VISA Code Table Management


I created interaction designs for projects based on business requirements including user cases documents provided by the client teams. The Code Table Management project was one of these projects.

Background: The VISA data team asked our UX team to build wireframes based on its document of user cases. The wireframes needed to show the flow of multifunctions such as login, search, filter, subscribe, request, approve request and manage users. Additionally, interfaces for different types of users were also required. These interfaces included general employees, data experts and admins.

Challenges: The document was not so clear for us since it included unfamiliar terms. Different types of users have different privileges and interfaces. Furthermore, the client team was even uncertain about some technology issues which would impact design flow.

Research and Strategies: I reviewed the document carefully and discussed each case with the client team. I found some user cases were mixed whereas others were unnecessarily separated. After clearing up the user cases, I created wireframes through Balsamiq Mockups. In addition, because of unsure technical issues, I created two possible flows.

Samples of Design:

  • Code table search results page for general employee.
  • Table filter page which can add/edit/remove logic filters.

Image 1: search results page

Image 2: adding filter page

Image 3: overview of user cases design

Result: The client team used these wireframes to show its stakeholders how this website should be and received its desired budget to develop this system.