Credit Card Portalクレジットカード・ポータル
A bank's credit card portal, rebuilt on a design system.銀行のクレジットカード・ポータルを、デザインシステムから作り直した。
Challenge課題
The portal had grown piece by piece for years: the same account data in three-plus places with different patterns, a five-screen process to make a payment, no shared components. Customers couldn't self-serve, so service calls climbed — in an interface where you are asking people to move their money.ポータルは何年もかけて継ぎ足されてきた。同じ口座情報が 3 か所以上に別々の形で出てきて、支払いには 5 回以上のクリックが要り、共通の部品はひとつもない。自分で済ませられないから、問い合わせの電話が増えていく。お金を動かしてもらう画面なのに。
Solution解決
A discovery audit showed the cause wasn't cosmetic: there was no design infrastructure at all. So the fix ran on two levels — rebuild the four flows that hurt most (account setup, login, summary, payments) and build a 125+ component system in three layers. The decisive move was treating the system as the deliverable. The mobile team adopted it, and by 2023 it was the org-wide standard.調べてわかったのは、原因が見た目ではなく、デザインの基盤そのものが無いことだった。だから直し方を 2 段にした。いちばん痛い 4 つのフロー（口座開設、ログイン、概要、支払い）を作り直し、125 超の部品を 3 層でまとめたシステムを組む。決め手は、フローではなくシステムを成果物として扱ったこと。モバイルチームが採用し、2023 年には全社の標準になった。
Impactインパクト
For First PREMIER (via Concentrix Catalyst) I rebuilt four flows and a 125+ component system adopted org-wide.First PREMIER（Concentrix Catalyst）向けに四フローと 125 超部品の DS を再構築し全社標準になった。
What I handled担当フェーズ
- Researchリサーチ
- Business / Strategyビジネス／戦略
- Conceptコンセプト
- UX / UIUX／UI
- Design Systemデザインシステム
- Prototypeプロトタイプ
- Build実装
- Launch / Growthローンチ／グロース
Four flows out of ten, chosen by frequency × pain 10 のフローから 4 つ。頻度 × 痛みで選んだ
The audit mapped ten end-to-end flows; four were rebuilt first because they were used most and hurt most. Setting up online access went from a multi-page form to a short onboarding. Login got simpler credential recovery and clearer error states. The account summary — the highest-traffic screen — pulled balance, recent transactions and quick actions into one view. And making a payment, the top reason people called, went from a five-screen process to three steps. 監査では端から端まで 10 のフローを洗い出し、よく使われて、しかも痛い 4 つから作り直した。オンライン利用の登録は、何ページもの入力から短い手順へ。ログインは、パスワードを忘れたときの戻り方とエラーの見せ方をわかりやすく。いちばん見られる口座の概要は、残高、最近の取引、よく使う操作を 1 画面にまとめた。問い合わせの電話の最大の理由だった支払いは、5 画面を 3 ステップにした。
The system was the deliverable: tokens, components, patterns 成果物は画面ではなく仕組み。トークン、部品、型
Every feature had been designed on its own, so fixing screens alone would have let the mess grow back. The design system came in three layers, each built only from the one below. Foundation: colour tokens — the primaries Confident Orange, Bold Purple and PREMIER Green and the secondary Sage Green, each with tints, plus neutral and semantic colours — a seven-level type scale in Prompt, a 4px spacing base, a 12-column responsive grid, and elevation. Components: form elements with every state (default, filled, active, hint, info, error), navigation, data display, feedback — dialogs, alerts, error summaries — and actions. Patterns: authentication, transactions, account management, error recovery and onboarding, each specified for desktop, tablet and mobile. 125+ components in all, behind 105 high-fidelity screens and 14 prototypes tested with stakeholders. 機能はそれぞれ別々に設計されてきた。画面だけ直しても、散らかりはまた戻ってくる。だから 3 層のデザインシステムを組み、どの層も一つ下の層だけでできるようにした。土台はトークン。主色の Confident Orange、Bold Purple、PREMIER Green と、補助色の Sage Green。それぞれの淡い段階と、無彩色・意味色。Prompt で組んだ 7 段の文字サイズ、4px 単位の余白、12 列のグリッド、影。その上に部品。入力欄は通常・入力済み・選択中・ヒント・情報・エラーまで全部の状態をそろえ、ナビゲーション、データ表示、ダイアログや警告などの通知、操作ボタン。さらに型。ログイン、取引、口座管理、エラーからの戻り方、はじめての利用を、デスクトップ・タブレット・スマホの 3 サイズで決めた。部品は合わせて 125 超。それが 105 枚の精細な画面と、関係者と検証した 14 本の試作を支えた。
3
layers: foundation tokens, components, patterns層。土台のトークン、部品、型
125+
modular components部品の数
7
type levels, set in Prompt段の文字サイズ（Prompt）
4px
spacing base, on a 12-column grid余白の単位。12 列のグリッドの上に
From one portal to the bank’s standard 一つのポータルから、銀行全体の基準へ
The test of a system is whether people who didn’t build it choose it. The library held up beyond the portal: the mobile app team, a separate team, built its 2022 v2.0 release on it, and by 2023 it was the design standard across the bank’s digital products. That adoption is the real outcome here — four rebuilt flows were the first use of the system, not the point of it. 仕組みの出来は、作っていない人が選ぶかどうかでわかる。部品集はポータルの外でも通用した。別のチームだったモバイルアプリは、2022 年の v2.0 をこの上に組んだ。2023 年には、銀行のデジタル製品全体のデザインの基準になった。本当の成果はこの広がりのほうだ。作り直した 4 つのフローは、仕組みの最初の使い道にすぎない。
4 / 10
card-portal flows rebuilt first, on the systemカードポータルのフローのうち、この仕組みで最初に作り直した数
2022
the mobile app team’s v2.0 release built on the same libraryモバイルアプリのチームが、v2.0 を同じ部品集で組む
Org-wide全社標準
the design standard across the bank’s digital products by 20232023 年までに、銀行のデジタル製品全体の基準に