SicPama Diner QR Ordering

다중 사용자 Checkout 플로우에서 인지 부하 줄이기

다중 사용자 Checkout 플로우에서 인지 부하 줄이기
Product Design · Checkout & Payment UX · Usability
Product Design · Checkout & Payment UX · Usability

SicPama는 한국과 동남아시아의 레스토랑이 운영 효율을 높일 수 있도록 돕는 서비스를 만듭니다. 그룹 QR 주문 시스템은 SicPama의 서비스 중 하나로, 장바구니에서 결제까지 이어지는 경험 개선이 필요했습니다. 이번 리디자인의 핵심 목표는 인지 부하를 줄이고 사용성을 높이는 것이었습니다.

내 역할:

Product Designer

Product Designer

회사:

SicPama

SicPama

핵심 결과:
25%
Checkout 단계까지 이동하는 시간 감소
40%
interaction cost 감소
그룹 주문 탐색이 더 명확해지고 인지 부하가 낮아짐

일부 세부 내용은 NDA에 따라 생략했습니다.

문제 맥락

기존 플로우의 문제점

주문 플로우는 비교적 단순했지만, 사용자들은 장바구니에서 결제(checkout)로 넘어가는 단계에서 반복적으로 어려움을 겪었습니다.

사용성 테스트와 session replay 분석 과정에서 반복적으로 나타나는 문제를 발견했습니다:

사용자들은 계산서를 어떻게 나눌지 선택하지 않은 채 결제로 이동하려고 했습니다

무엇이 잘못됐는지 이해하려고 화면을 위아래로 스크롤하고 너무 많은 탭을 반복했습니다

몇 번 실패한 뒤 앱을 닫거나 도움을 요청했습니다

프로세스와 방법
프로세스와 방법
리서치

관찰사용성 테스트경쟁사 분석

종합

사용자 행동 분석User Journey Map가설

아이데이션

디자인 전략User FlowWireframes

디자인

디자인 반복디자인 시스템 업데이트최종 UI

결론

테스트개발 핸드오프

리서치 결과

기존 디자인의 문제점

초기 플로우는 한 테이블에 앉은 여러 사용자가 레스토랑에서 빠르게 주문하고 결제할 수 있도록 설계되었습니다.

하지만 사용자 경험 분석에서 중요한 문제가 드러났습니다:

~24

최대 탭 수

Checkout 단계로 이동하기까지

Checkout 단계로 이동하기까지

13с

결제 단계까지의 평균 소요 시간

재방문 사용자 기준

재방문 사용자 기준

4-5с

선택 전 머뭇거린 시간

계산서 분할 방식을 선택하기 전

계산서 분할 방식을 선택하기 전

session replay 분석에서 사용자 여정의 명확한 문제 지점이 드러났습니다:

종합

문제의 원인
  1. 오해를 부르는 affordance 요소

사용자 아바타는 인터랙티브해 보였지만 실제로는 그렇지 않았습니다.

사용자 아바타는 인터랙티브해 보였지만 실제로는 그렇지 않았습니다.

결과: 높은 주의 비용과 interaction cost
결과: 높은 주의 비용과 interaction cost

사용자들은 반응을 기대하며 아바타를 여러 번, 때로는 반복적이거나 강하게 탭했습니다.

  1. 숨겨진 필수 행동

결제 방식 선택은 필수였지만:그룹 결제는 새로운 경험이라 사용자가 장바구니 화면에서 이를 예상하지 못했습니다결제 선택 영역은 화면 맨 아래에 배치되어 있었습니다

결과: 혼란과 높은 interaction cost
결과: 혼란과 높은 interaction cost

  • 사용자들은 어떻게 계속해야 할지 이해하려고 화면을 위아래로 스크롤하며 혼란을 겪었습니다.사용자 수와 주문 항목이 늘어날수록 interaction cost는 기하급수적으로 증가했습니다.

  1. 한 화면에 놓인 두 가지 핵심 과제

  • 그룹 전체가 주문한 항목 확인누가 어떤 방식으로 결제할지 결정

결과: 인지 과부하와 높은 주의 비용
결과: 인지 과부하와 높은 주의 비용

“의사결정에 필요한 시간은 과제와 선택지의 수가 늘어날수록 증가한다”UX 법칙: Hick의 법칙

추가 관찰

계산서 분할 방식을 선택한 뒤에도 일부 사용자는 결제 과정을 이탈했습니다.

가설:
가설:

장바구니 단계에서 계산서 분할 방식을 선택해야 한다는 점이 명확하지 않아 혼란과 이탈을 유발했습니다.

비교 관찰:
계산서 분할 방식 선택이 없는 플로우에서 소요 시간 50% 감소

이를 통해 장바구니와 checkout 구조가 문제의 핵심 원인임을 확인했습니다.

UX 리서치와 분석을 바탕으로 분명해진 점:

핵심 인사이트:

장바구니 구조와 사용자 기대 사이의 불일치가 혼란, 불필요한 탭, 지연의 핵심 원인이었습니다

아이데이션

디자인 전략
제 전략은 인지적으로 다른 과제를 사용자의 기대에 맞는 순차적 단계로 분리하는 데 집중했습니다. 각 화면에 하나의 핵심 인지 과제만 남도록 플로우를 재구성했습니다.

아이데이션

Low-fidelity wireframes

디자인

최종 디자인 솔루션
  1. 기능형 사용자 탭

사용자 아바타를 기능형 탭으로 전환했습니다. 사용자는 아바타를 탭해 그룹 내 각 참여자의 주문을 확인할 수 있습니다.

예상 효과:
예상 효과:

  • 아바타 탭이 사용자의 기대와 일치참여자별 주문이 시각적으로 명확하게 구분됨interaction cost 감소: 다른 사용자의 주문을 한 번의 탭으로 확인

  1. 새로운 Checkout 화면

  • 장바구니는 이제 주문 확인 용도로만 사용됩니다Checkout은 그룹 주문의 계산서 분할 방식을 결정하는 데 집중합니다

예상 효과:
예상 효과:

  • 의사결정 지점의 인지 부하 감소스와이프와 탐색성 클릭 반복 감소사용자가 장바구니에서 결제 방식으로 이동하는 방법을 이해

  1. Checkout의 주문 요약

Checkout 화면 하단에는 계산서 분할과 결제 결정을 돕는 주문 요약이 표시됩니다.

예상 효과:
예상 효과:

  • 결정을 내리기 쉬워짐사용자가 상황을 더 빠르게 이해함

  1. 명확한 결제 세부 정보

  • 선택한 결제 방식은 누가 얼마를 결제하는지 명확하게 보여줍니다. 비인터랙티브 요소는 시각적으로 단순화하고, 펼침형 컴포넌트에는 화살표를 추가했습니다.

예상 효과:
예상 효과:

  • completion rate 향상checkout 단계의 drop-off 감소

검증

테스트
테스트 결과:
-25%

과제 수행 평균 시간

-40%

최대 interaction cost

+40%

응답자 10명 중 9명이 오류 없이 목표를 달성했습니다

2→1

핵심 의사결정을 한 단계에 모아 경험을 단순화

업데이트된 플로우는 한 단계를 추가했지만, 최악의 경우 발생하던 interaction cost를 크게 줄였습니다. 최대 상호작용 수가 40% 감소했다는 것은 혼란과 탐색성 행동이 줄었다는 의미입니다.

현재 프로젝트는 QA 테스트 단계에 있으며, 다음 단계로 아래 항목을 계획했습니다:

출시 후 확인할 지표:
주문 완료율(completion rates)
이탈률(drop-off rates)

결론

회고

주문 확인과 계산서 분할 선택을 서로 다른 단계로 나누면서, 업데이트된 플로우는 사용자 경험을 개선하고 인지 부하를 줄였으며 그룹 주문에 더 예측 가능하고 확장 가능한 Checkout 경험을 만들었습니다.

배운 점:

두 가지 과제를 한 화면에 묶는 방식은 프로세스를 빠르게 만들기 위해 자주 쓰입니다. 하지만 그룹 시나리오에서는 인지 부하와 오류를 늘립니다. 그래서 한 화면에는 하나의 핵심 인지 과제만 남도록 설계하는 것이 중요합니다.

두 가지 의사결정 과제를 한 화면에 묶는 방식은 프로세스를 빠르게 만들기 위해 자주 쓰입니다. 하지만 그룹 시나리오에서는 인지 부하와 오류를 늘립니다. 그래서 한 화면에는 하나의 핵심 인지 과제만 남도록 설계하는 것이 중요합니다.