NICE abc
원청 PM웹서비스 고도화 · 2023~2024

NICE abc

매출채권·전자어음 유동화 플랫폼 고도화

돌아가고 있는 금융 서비스를, 멈추지 않고 갈아끼웠습니다.

클라이언트
NICE abc
기간
13개월 (2023.06–2024.06)
포엠 역할
원청 PM · 기획 · 디자인
산출
165개 화면
The Problem

이미 돌아가고 있는 금융 서비스를 멈추지 않고 갈아끼우기

NICE abc는 기업이 보유한 매출채권과 전자어음을 온라인에서 유동화하는 플랫폼입니다. 돈이 필요한 기업은 받을 돈을 미리 현금화하고, 투자자는 그 채권에 투자해 수익을 얻습니다.

새로 만드는 일이 아니었습니다. 이미 운영 중인 서비스를 전면 개편하는 일이었습니다. 그래서 첫 산출물이 디자인 시안이 아니라 AS-IS 메뉴 대응표였습니다. 기존 메뉴 하나하나를 새 구조의 어디에 넣을지 대응시키는 작업부터 시작했습니다.

그리고 금융 서비스에는 일반 웹사이트에 없는 것이 따라붙습니다. 약관 동의, 실명 인증, 계좌 인증, 서류 제출, 투자 비밀번호. 버튼 하나를 누르면 다음 화면이 아니라 분기가 열립니다. 성공했을 때, 실패했을 때, 확인이 필요할 때가 전부 다른 화면입니다.

Complexity

버튼 하나 뒤의 14단계

투자자가 상품을 하나 사는 데까지 거쳐야 하는 화면입니다. 전부 따로 그렸습니다.

투자 실행 플로우

상품목록검색·필터상품 상세차입자 정보주상환의무자 정보투자자 유의사항담기금액 입력약관 동의즉시 투자확인 팝업투자 비밀번호 인증완료실패

상품 상세 안에서만 세 종류의 정보 화면이 갈립니다. 투자 비밀번호 인증은 상태별로 세 화면을 따로 그렸습니다.

회원가입 플로우 — 개인 투자회원

약관 동의회원 정보계좌 인증실명 인증추가 정보서류 제출가입 완료

각 단계마다 입력 → 확인 → 오류 세 상태를 별도 화면으로 설계했습니다. 법인 투자회원은 사업자 확인 단계가 더 붙고, 대출회원은 또 다른 흐름입니다. 회원 유형만 세 갈래입니다.

펀딩박스 — 담아둔 상품 처리

상품담기 내역약관 미동의 건 처리투자금액 변경투자 실행비밀번호 인증 팝업

장바구니에 담아둔 상품 중 약관에 동의하지 않은 건이 섞여 있을 때를 위한 별도 흐름입니다. 이런 예외가 금융 UX의 실제 분량입니다.

Process

13개월

  1. 2023.06.14
    개발 일정 논의

    핀테크 기술을 가진 웨인과 서비스 고도화 일정을 잡으며 시작했습니다.

  2. 2023.07–08
    WBS · 요구사항정의서 · AS-IS 대응표

    작업 분할 계획을 세우고 요구사항을 정의한 뒤, 기존 서비스의 메뉴를 새 구조에 하나씩 대응시켰습니다.

  3. 2023.09
    메뉴 구조 확정 · 브랜드 가이드

    CI·BI 로고, 컬러 배리에이션, 타이포그래피 가이드를 정리했습니다. 화면을 그리기 전에 기준부터 세웠습니다.

  4. 2023.10–11
    WBS 2판 · 화면 목록 · 디자인 일정

    그릴 화면을 전부 목록화한 뒤 디자인 일정에 붙였습니다.

  5. 2023.12
    화면 목록 작업현황 3판 · 리뉴얼 시안

    사흘 간격으로 작업현황을 갱신하며 마무리 구간을 관리했습니다.

  6. 2024.01
    투자화면 가이드 · 퍼블리싱 수정요청

    개발사에 넘길 화면 가이드를 만들고, 퍼블리싱 결과를 검수해 수정 요청을 정리했습니다.

  7. 2024.02–03
    사용자 매뉴얼 · 푸터 텍스트

    전자어음 할인신청 매뉴얼과 회원가입 매뉴얼을 만들었습니다.

  8. 2024.04–06
    매출채권 화면 · USER GUIDE 2종

    매출채권 유동화 화면을 추가하고 사용자 가이드를 만들어 마무리했습니다.

Scope

우리가 한 일

무엇을 어떻게 만들지 정하고 설계하는 일은 포엠컴퍼니가 했습니다. 화면 디자인은 레디가, 개발은 핀테크 기술을 가진 웨인이 맡았습니다.

분석 · 설계
  • AS-IS 메뉴 대응표 작성
  • 요구사항정의서
  • WBS 2판 · 화면 목록 · 디자인 일정
  • 메뉴 구조 2회 개정
디자인 · 시스템
  • CI · BI 로고 (RGB / CMYK)
  • 컬러 배리에이션 가이드
  • 타이포그래피 가이드
  • 화면 디자인 165종 (레디 협업)
UX 플로우
  • 투자 실행 14단계
  • 회원가입 3유형 (개인 · 법인 · 대출회원)
  • 펀딩박스 예외 처리 흐름
  • 상태별 화면 (입력 · 확인 · 오류)
개발 연계 · 문서
  • 투자화면 가이드 전달
  • 퍼블리싱 검수 및 수정요청
  • 사용자 매뉴얼 2종
  • USER GUIDE 2종
  • 푸터 링크 텍스트 원문
Result

165개 화면, 하나의 규칙

화면이 많아질수록 흔들리기 쉽습니다. 브랜드 가이드를 먼저 세워두고 그린 이유입니다.

165
화면 (PC 143 · 모바일 22)
3유형
회원 구조 (개인 · 법인 · 대출)
4
사용자 매뉴얼 · 가이드
먼저 세운 기준
CI · BI 로고컬러 배리에이션타이포그래피2023.09 · 화면 작업 전

출처 — 폴더 내 「NICEabc서비스고도화-ASIS메뉴대응표」, 「WBS」 2판, 「화면목록 및 디자인 일정」 3판, Logo·Color·Typography 가이드

Deliverables

결과물

화면에 표시된 기업명·금액·계정 정보는 실제 서비스 데이터이므로 가림 처리했습니다.

투자하기 (PC)
투자하기 (PC)
마이페이지 · 투자관리 (PC)
마이페이지 · 투자관리 (PC)
회원가입 (모바일)
회원가입 (모바일)
투자 약관 동의
투자 약관 동의
계좌 인증
계좌 인증
투자 완료
투자 완료
Team

함께한 파트너

포엠컴퍼니
기획 · UX 설계 · 화면 정의 · 문서 · 검수 총괄
웨인
개발 — 핀테크 기술 기반 플랫폼 구현
레디
디자인 — 화면 디자인 및 브랜드 가이드 적용