MX Manage External Accounts

UX/UI Design

STYLE GUIDEs

DESIGN SYSTEMs

Motion design

Transfers / MX Manage External Accounts

Redesign the web and app interface for Discover’s “Manage External Accounts” function on the Transfers page of their banking website. MX is a third-party provider that allows users to link outside institutions to Discover so that they can initiate money transfers in between internal and external accounts.

The Problem

The previous “Manage External Accounts” flow did not use MX as an API. Part of the task was to analyze the current MX interface and incorporate it into the existing Transfers flow.

Tools

Sketch

zeplin

Miro

After effects

User Flow

Users can connect their external accounts to Discover by using 1 of 3 methods: Open Authorization, Screen Scrape, or EWS. Method of linking will vary upon users.

Wireframes

This project was organized into 10 smaller user flows:

1. Search
2. Verification
3. Tokenized OAuth
4. Screen Scrape
5. EWS
6. Trial Deposits
7. Edit Nickname
8. Delete
9. Relink
10. Generic Errors
‍
Wireframes were created for each possible journey for both web and app.

Search & Verification

Users can first search for their institution. If connection is unsuccessful, users will be prompted to connect via other methods.

Open Authorization

Open Authorization allows users to log into an external institution in order to connect their external bank accounts.

Screen Scrape

Users can access their account by sharing their login details with MX. They will need to answer a series of security questions in order to gain access. Developers can identify dynamic areas with magenta copy.

EWS (Manual Entry)

Users can connect to their external institutions by manually entering their account details.

Discover Style Guide

Here is a small peek into the Discover brand style guide.

Our designs are mainly comprised of Midnight blue and its range of Midnight tints. Discover Orange and Discover Yellow are mainly used as accents, although Discover Orange is typically applied as a signifier of urgency or call-to-action to users.

The web interface specifically uses the brand typeface, Discover Sans. The app primarily uses SF Pro Display & SF Pro Display Text.

The Results

By reworking the MX API into the user experience, users can now link their external institutions to Discover with ease. This change grants users multiple ways to access their account, while also feeling secure when entering sensitive information. Discover customers can now safely transfer their money between internal and external bank accounts.

home