Designing a Scaleable Integration Interface

Client: Fiserv
Role: Product Designer and Researcher
Date: May 2021

Summary

For this project I sought to design an experience that could both increase the user’s efficiency and allow an increasing number of integrations to display seamlessly in the product. Working with stakeholders and developers I gained insight into the product roadmap and the database that it was built on. I conducted a discovery test to understand the user’s journey, a usability test to identify pain points, and an additional usability test to determine whether or not the new design was successful.

Problem

Users found it difficult to understand what their next step was, where to find it, and how to complete it. Current solution  doesn’t scale to accommodate future integrations. The current design also had accessibility issues that needed to be solved to meet WCAG 3 standards.

Users

The users primary role is to review and open applications. Their goal is to review as many applications as possible so they can empty their queue. They want to avoid having an application being under review for more than 5 days in order to keep their customers satisfied.

Goal

Improve hierarchy so users can identify their next steps and work more efficiently. Create a solution that will scale for future integrations.

Research

3 Different types of tests:
• Discovery Test
• Preference Test
• Behavior Test

To begin this research I started off with a discovery test and a preference test from UserTesting.com. The insights gained from the participants' responses helped drive the questions that were asked in the usability test. In the usability test I asked the users to complete a task and asked them about their preferred workflow.

The criteria for the users taking part in each test were as follows:

• Age 18-65+

• Employed in Finance & Financial Services

• Answer “yes” to the question “In your current role is one of your responsibilities to review, approve, and/or open accounts for applicants?”

Results

When testing none of the participants successfully reviewed the response, review the respective document, and come back to the modal to make the decision. Decisioning the application is the primary action, but was one of the smallest elements on the screen. The design of the profile page was overwhelmingly well received by all testers. Users mentioned the profile page was “efficient”, “intuitive”, and “straightforward”.

With many users commenting on the “dullness” of the profile page, I decided to revisit how color, typography, and iconography, impact the overall hierarchy of the profile page. The profile page was primarily white and it was difficult to determine the visual and actual hierarchy of the page. Based on these findings I looked to add elements to better visually guide the user through the profile page.

Solution

The final design came from collaborating with stakeholders and developers. I worked with stakeholders to understand the product roadmap so that I could design something that could scale to accommodate unlimited integrations. I worked with developers to understand how the database was structured so that I could design the interface in a way that could pull from the directly database.

Tiles allow for unlimited integrations because they can be responsive and utilize endless scrolling. With the new tiles users were able to review the response from the integration, and the respective document without going between screens. After a usability and preference test it was clear that the new design met the project goals.