Platform to Platform Data Management

Role: Primary UX/UI Designer

Length: August 2020 - March 2021

Tools: Figma

📔 Project Overview

As Capital One begins to modernize their internal finance applications for associates, it’s important to evaluate where we can streamline and combine experiences for more efficiency. I was the lead designer on a team dedicated to modernizing our reference data experience, and expanding its capabilities to support a wider range of users. Due to changing data privacy requirements, we had to eventually migrate our experience over to another platform, creating the first ever cross-platform data experience at Capital One.

✏️ Responsibilities

  • Wireframing, designing, and prototyping an internal reference data table spreadsheet experience

  • Constructing user journey flows and generative research to direct design strategy decisions in meetings with stakeholders from a variety of teams

  • Championing design and Finance Platform user needs in meetings with both product and designers from other internal data teams

Frame 335 (1).jpg

Problem Space

 

⚡️The Challenge: How do we help users register, publish, and manage reference data across platforms?

 

Reference Data (otherwise known as Look-Up tables), are generally static data tables that finance associates append or join to other datasets. Both the Finance Platform and Enterprise Reference Data Management (ERDM) had users who were uploading and managing their reference data on two separate experiences. With ERDM shutting down, we wanted to evaluate how similar the ERDM and Finance Platform reference data journeys were to potentially combine them. Additionally, we needed modernize the Finance Platform’s 1.0 experience, as the UI elements were very outdated. The existing experience had issues with:

  • Clarity of table elements, conflicting call to actions

  • Wasted real estate removes focus from the table

  • Placement of UI elements creates confusion for users

The current state of reference data on the Finance Platform

The current state of reference data on the Finance Platform

Project Process

Project Process - Reference Data.jpg

 INITIAL RESEARCH

User Journey Maps

We conducted generative research interviews with both Finance Platform and ERDM users to determine whether or not we could migrate the ERDM users over to the Finance Platform user experience. From the findings of these interviews, I created two user journey maps in order to evaluate the state of each experience and see how similar they were.

Reference Data User Journey — Finance Platform (2).jpg
Reference Data User Journey — ERDM.jpg
Steps (1).jpg

When looking at the experiences side-by-side, it is evident that both user groups interact with reference data in similar ways. After some discussions with product and tech teams on both platforms, we decided that migrating the ERDM users over to the Finance Platform was not only doable, but the best way to move forward from a user experience POV.

DESIGN

User Flows

Once we had decided ERDM users would move to the Finance Platform, I began creating box and wire flows for our current state and future state. We showed these flows to our product partners so we could align on what features we wanted to bring to our MVP. These box and wire flows are also super helpful in mapping interactions and giving me a head start in actually designing screens.

What I was focusing on initially was this “Modify” step, where users are viewing and manipulating their reference data tables. This was the area of most of our current users’ pain points.

Screen Shot 2021-08-13 at 2.41.56 PM.png

I also created this flow, which incorporated slightly more visuals to the experience. Providing these to our product and tech partners really helped them start visualizing what our end-to-end user experience would look like.

Screen Shot 2021-08-13 at 2.48.01 PM.png

 INITIAL RESEARCH

Competitive Analysis

I began by looking at other table experiences, from AirTable to Google Sheets to gather inspiration and see what other companies were doing right in regards to filtering and sorting their tables.

Some of the most important insights I gathered were:

  • ✅ Interacting directly with the columns was a common way to filter and sort

  • ✅ Having easy ways to clear or reset the table was useful

  • ❌ Many experiences opted to leave the search box under each column out

DESIGN

Wireframes and Sketches

I created wireframes for different filter and sort scenarios, both outside of the table as well as nested within the columns. I also sketched out some solutions for editing a record (or row). I find it really important to flare out during your initial design wireframes to make sure you aren’t overlooking a solution!

Frame 340.png
Frame 341.png
Screen Shot 2021-08-13 at 3.01.09 PM.png

DESIGN

High Fidelity Table Design

After the sketches, I began pulling in our design system components to build out higher fidelity table designs. Building out the table was definitely an interesting Figma exercise for me! Organizing the row layers and figuring out how I wanted to structure the table was almost a whole design challenge in itself 😅. This design had several principles behind it:

  • Allowing users to filter per column, keeping a lot of the same functionalities that Excel and Google Sheets have

  • Creating an easy to use editing system, clearly showing what cannot be changed on each row

  • Highlighting actions that a user needs to take to complete the task they are here for (submitting, adding, or rejecting records).

CHALLENGE

Curveball! ⚾️

While I was working on the table designs, new data requirements caused our project to pivot. We were now required to onboard our reference data through another data platform at Capital One, called the Exchange. Suddenly, I had to onboard a whole team of Exchange designers to the reference data work, as well as begin to modify the table experience I created to fit their design systems and language. I also had to learn about data standards and onboarding at Capital One, and the different requirements the Exchange has.

I represented the Finance Platform, working with a team of three designers from the Exchange. We had to almost start back at square one, creating basic user flows to outline the different screens we needed to create.

High Level Flow for Registration of Refernce Data (1).png

 DESIGN

High Fidelity Reference Data Flow

Luckily, many of the Exchange onboarding screens had already been created, since the onboarding experience for other types of data was already live. We began dropping in screens where we could, and I took initiative to create some of the screens that we were missing such as file upload and the connection points between the Finance Platform and the Exchange

A very high-level look at our flow - it’s pretty massive!

A very high-level look at our flow - it’s pretty massive!

Finance Platform -> Exchange Connection Point

When connecting users from one platform to another, it is important to make sure the transition is not jarring or confusing. It was also important to let the users know that the Finance Platform would not be supporting reference data onboarding at a certain date. I wanted to create an entry point that was

  • Seamless, making sure the user knows where they are and where we are taking them

  • Informational, letting users know the important platform-wide changes that were happening to reference data

Frame 577 (2).png
Select Component.png
Select Component (1).png

Uploading your Data Table

After you fill out some metadata for your reference data, you can upload your data table. I created a simple single file upload for the Exchange, since their data upload pattern allowed users to upload multiple files. You are only allowed to onboard a single reference data table at a time, so I wanted to ensure that that language was clear to the user.

RefDataUpload1.png
RefDataUpload2 (1).jpg
RefDataUpload3.png

Table Experience

Once you have uploaded your data table and defined your schema, you can view and modify your table before submitting it for approval. I skinned the table to fit the UI of the registration process, and allowed users to expand the table to see more information about their records.

expand table.gif

Prototyping the Table

Prototyping this table was an absolute beast. There were so many functionalities I had to bake in to get the table ready for user testing. I definitely leveled up my Figma prototyping skills putting this together! Learning how to use overlays was super fun. You can see a quick video of how the prototype worked below.

Holy connections Batman! 😰

Holy connections Batman! 😰😰😰

RESEARCH

PURE Method and Usability Testing

We first conducted a PURE Method to catch any general usability issues before gathering real users for a user test.

Screen Shot 2021-08-13 at 4.35.32 PM.png

Most of the issues had to deal with the Finance Platform entry point, but this was a pretty good usability score for such a complex and lengthy experience. We made some adjustments based on the feedback, and we took our prototype into user testing with nine actual reference data users, some from the Finance Platform, and some who used the old EDRM tool.

Overall, most users liked the designs and felt that while it would be a transition from how things are done today, it was a pretty intuitive experience.

Frame 581.png

Recommendations

While the entire experience was viewed favorably, and there were no major usability issues with the process, users had some suggestions around the functionality of the table. The largest of these being

  • Using a different icon for expanding the table

  • Having a “freeze pane” option instead of pinning columns like Excel

  • Allowing inline editing of the table instead of the drawer format

Post-Testing and Reflection

We presented our work and findings to several groups of stakeholders across the Data design world at Capital One. Since this was the first cross-platform data experience, many teams were interested in how we collaborated and the designs we built. Sadly however, due to product swirl this work has been de-prioritized and I was moved off of the project.

Throughout this project, I demonstrated my flexibility and teamwork, having to constantly shift goalposts due to product needs, and onboard designers who weren’t familiar with the work I was doing was a challenge, but one that I completed successfully. It was fun working with designers from other platforms, and I learned a lot about data privacy at Capital One. I challenged myself with creating some of the most complex user flows and prototypes that I have made since joining the team, and it definitely showed me the importance of visual storytelling when communicating with tech and product partners. Thanks so much to Dustin, Shasta, and Emily for being an amazing team to work with ☺️

Screen Shot 2021-08-13 at 4.56 1.png