Financial App

WEB / DATA DESIGN

SENIOR UX DESIGNER

NETFLIX

Abstract

Financial apps became an important part of my work at Netflix as our finance teams needed to transition from manual data entry in Excel to a web app solution. Transitioning from paper to digital is natural in creating enterprise applications, but the challenge to do so was heightened as I dove into the complexities of financial recording and understood the needs of my users.

Role & Responsibilities

  • Lead/sole designer, researcher, and front-end developer
  • Coordinated with back-end engineers
  • Created components and patterns for Studio Design System

Design Objectives

  • Prioritize and restructure massive amounts of financial data
  • Create an intuitive information architecture to improve readability
  • Develop the front-end UI utilizing HTML/SASS/JS and Ember.JS and Bootstrap frameworks

UI Assessment - Payments Dashboard

  1. Action Items: Priotizes payments pending in the approval process, sorted by payment due date.
  2. New Payments: Upcoming payments that have not gone through the approval process.
  3. Approved: Summary of payments that have been finalized in the approval process.

Users did not find dashboard infographics useful as they were more distracting than helpful, and graphs were unnecessary to their workflow.

Information Architecture

A simplified architecture started with the three main functions

Even though all three functions are related, users worked on each process separately separately so it made sense to keep it this way. I did plan on possibly re-working the architecture to be centered around Contracts.

Payments arrow Payment Details arrow Payment Approval

Contract arrow Contract Details arrow Contract Approval

Accruals arrow Accrual Details arrow Accrual Approval

UI Assessment - Contract Details

Layout for creating, editing and reviewing contracts, showing payment terms, accruals, reports, and contact info

UI Assessment - Accrual Details

This view shows the layout for reviewing accruals. An accrual could have several sub sections and large groupings of payment data with different status for each line. The design of this layout had to take in account the amount of real estate required for the table.

  • Contract Details: Placed Overview Info component on the left
  • Accrual Details: Placed Overview Info component on the top
  • Sub Navigation: Same treatment and placement for both Contract and Accrual Details

In order to maintain context on which contract or accrual the user was working on, the Overview Info was positioned next to the details. This was a huge improvement from reading long rows of data on an Excel sheet.

UI Assessment - Approval Worklow (1st Design)

This view shows the layout for reviewing Payment details

UI Assessment - Approval Worklow (2nd Design)

This view shows the layout for reviewing Contract details

The problem with these early iterations of the approval process is they were disjointed from the submit action and they behaved differently than each other. We needed a better consensus for this UI that matched to how users worked in real life.

  1. Commenting in Payments: At first we were told that comments were treated more as an optional note and therefore we left this in the details section. Users later mentioned that it felt odd to select Reject/Approve in the details before selecting the Submit action. I realized that the users were putting these notes in their Excel sheets as part of their review process, but Excel has no explicit review workflow. With this layout, we were creating that workflow with the Submit action, so tying the comments and the accept/reject status to the Submit CTA made more sense.
  2. Commenting in Contracts: This example shows the approval design for Contracts. Unlike Payments, there was not enough space to put the commenting component in the body. Here, the user would select the status label which shows comments and history in a slidedown component. Again, this interaction felt weird because all the elements felt disconnected and it was awkward to select the status to leave a comment before taking the Submit action./li>

UI Assessment - Approval Worklow (3rd Design)

Users responded positively to this design, but it was missing a history of exchange between accountant and reviewer.

UI Assessment - Approval Worklow (4th, Final Design)

The final design included a timeline component to track the complete history of reviews

Visual design and iconography for showing approval status and their iconography, label, and color indicators.

Visual design and iconography for choosing a contract type.

Users responded well to green and red circles to indicate status, but they conflicted with approval status colors. Opted for filled and unfilled icons to indicate a signed and unsigned contract.

Priority at a Glance: Included a due date countdown for payments and accruals that need to be approved by a certain day.