UX & Product, Service Design & Strategy
Citibank@3x.png

Citibank | Supply Chain Finance

UI Design, UX Design

CitiBank Supply Chain Finance

UX & UI Design

 
Overview

Overview

CitiBank Supply Chain Finance connects three parties in a transaction— buyer, seller and the bank — in order to lower financing costs and improve business efficiency. Supply Chain Finance provides short-term credit that optimizes working capital for both the buyer and the seller.

I collaborated with the client's marketing and product management teams to streamline information architecture, usability, brand identity and UI design.

Award: Global Finance World’s Best Supply Chain Finance Providers 2019

Duration: 5 weeks for phase 1

Design year: 2017-2018

My Role: UX & UI Designer

My Design Process

My Design Process

I followed IDEO’s Human-Centered Design Thinking process to make sure that my design decisions were supported by understanding the users and feedback from usability testing.

Process@2x.png
 Based on the study of manual provided by the client and discussions with the teams, I gained a better insight about the end users, including their main tasks, needs, pain points and imperatives to deliver a better user experience.

Based on the study of manual provided by the client and discussions with the teams, I gained a better insight about the end users, including their main tasks, needs, pain points and imperatives to deliver a better user experience.

persona.png
Current Sitemap & User Flow

Current Sitemap & User Flow

By looking into the current sitemap and user flow, I gained a better understanding of the main features that needs to be delivered, and found out the deficiency in the current design.

Identifying Problems

Identifying Problems

By sorting out the current site, I defined the problems that we would need to solve:

Problems.png
Competitor Analysis

Competitor Analysis

I conducted a concise feature analysis of the competitors of Citibank's Supply Chain Finance platform in order to get an insight into the common practice and identify their strengths and weaknesses.

Affinity Map

Affinity Map

I categorized the features in an affinity map and summarized that all the competitors' features fall into these five categories: Dashboard/Summary Page, Financing Request, Notifications/Alerts, Account Management and Customer Support.

Feature Brainstorm

Feature Brainstorm

We started a round of brainstorming and came up with potential features to solve the problems and achieve the design goals.

Brainstorm.png
New Sitemap

New Sitemap

We created a new sitemap by sorting the information and features. This gives a clear picture of the navigation and information structure of the site. 

New Task Flow

New Task Flow

The new task flow focuses on user completes the tasks of quick funding, dynamic discounting and discounting request.

Wireframing

Wireframing

I created hi-fi wireframes in order to test the prototype and user interface design.

Wireframing.png
 The objective of the test is to identify  ● whether users can quickly learn the new features of the site  ● whether users are able to navigate the site  ● whether the users are able to smoothly complete the tasks of quick funding, finance request, c

The objective of the test is to identify

● whether users can quickly learn the new features of the site

● whether users are able to navigate the site

● whether the users are able to smoothly complete the tasks of quick funding, finance request, check status and reconcile receivables.

Result

Result

The usability study showed the following problems:

● Some of the terminologies have led to confusion

● some of the features should be rearranged/redesigned to improve the efficiency of the fund request

The team had another discussion based on the study and came up with a few ideas to improve the terminology, navigation and feature adjustments. 

Space.png
Style Guide

Style Guide

I finalized the color palette, fonts, icons, input fields and other miscellaneous elements based on the Citibank's brand and its current existing products.

Introducing Citibank Supply Chain Finance

Introducing Citibank Supply Chain Finance

mockups V2.png