디자인 스쿨 33기/스터디

[제로베이스 UIUX스쿨] 5주차 레퍼런스 분석 스터디 : 공차

cherry25 2025. 1. 5. 06:08

 


- 공차 서비스 간단소개

지난 주 스터디를 진행했던 스타벅스와 동일하게, 최근에는 대중적으로 이용되고 있는 프랜차이즈 공차의 모바일 어플로,

기능 역시 꽤나 유사하게 쉽게 모바일오더를 진행 할 수 있거나, 어플만의 쿠폰, 적립 시스템이 있는 서비스이다.

 


- 공차 어플의 화면 구성

* 사용하면서 불편함이 느껴졌던 항목의 넘버표시를 회색으로 표시해두었다.


1. 홈 화면

1-1. 홈 상단

  1. 좌측 메뉴가 등장하는 버튼 (주문 화면에 상세)
  2. 알림 버튼

1-2. 홈 메인

  1. 오더, 주문하기 버튼
  2. 스탬프 확인 버튼
  3. 현재 보유하고 있는 쿠폰을 조회하는 버튼
  4. 나의 모바일 공차카드 확인 버튼
    1. 상단 바코드 모양 버튼(핸드폰을 흔들어도 등장) 과 동일 화면 출력

 

2. 주문 화면

2-1. 매장 선택 상단

  1. 뒤로가기 버튼
  2. 홈화면 1-1, 1번과 동일 역할 버튼
  3. 홈 버튼

2-2. 선택 리스트

  1. 주문할 수 있는 매장의 리스트, 선택 시 이미지 상 우측 매장 소개 팝업 등장

3-1. 오더 상단

  1. 뒤로가기 버튼
  2. 2-1, 2번과 동일 역할 버튼
  3. 장바구니 버튼

3-2. 추천 메뉴

  1. 최근 주문한 메뉴가 표시되는 영역
  2. 공차가 추천하는 메뉴 영역
    1. 개인 맞춤이 아닌 공통 추천 리스트
    2. 신경 쓰였던 부분은 리스트의 수를 나타내는 아래의 표시가 두 줄로 표시된다는 점이였다.

4-1. 메뉴리스트

  1. 주문할 수 있는 메뉴가 표시되는 리스트

5-1. 정보 상단

  1. 주문 수량을 늘리거나 줄이는 버튼
  2. 주문 음료의 컵 종류를 결정하는 버튼들
  3. 주문 음료의 당도 선택 버튼
  4. 추가옵션 추가로 이동되는 버튼

5-2. 정보 하단

  1. 해당 메뉴를 찜리스트에 넣는 버튼
  2. 장바구니에 추가하는 버튼
  3. 해당 메뉴만 주문할 수 있는 주문창으로 이동되는 버튼

6-1. 장바구니 메인

  1. 현재 메뉴가 주문될 매장 안내
  2. 전체선택 버튼
  3. 선택삭제 버튼
  4. 메뉴 삭제 버튼
  5. 주문 수량 변경 버튼

 


- 체험 감상

스타벅스 어플은 메인 기능인 모바일 오더 기능 이외에도 자체 상점, 배달 주문, 실제 카드 등록 및 자체 카드 충전/발급 등 꽤나 어플 내에서 다루는 각종 기능이 있었던 것과 다르게, 공차 어플은 정말 모바일 주문에만 초점을 맞춘 느낌이였다.

기능 자체가 적다 보니 크게 불편함을 느낄만한 부분은 없었으나, 사소한 요소들에서 불편한 부분을 조금 느낄 수 있었으나

어플의 사용량이 그렇게 많지 않은 건지 앱스토어 리뷰도 적고 다른 사람들의 감상을 확인하기 어려워 지인들에게 사용을 부탁했고, 불편함을 느끼는 부분이 비슷했기에 의견을 바탕으로 AS_IS를 생각해보았다.

 


- AS-IS

 

1. 메뉴 정보

우선 메뉴 정보 페이지의 버튼들이였다. 어플 내에서 수량 버튼들, 추가옵션 버튼들 모두 회색으로 표시 되어있는데,

어플 내에서 주문하기나 실제로 동작하는 다른 버튼들은 모두 빨간색을 사용하고 있음에도 해당 색으로 표시 되어

마치 수량은 조절할 수 없거나, 추가옵션을 선택할 수 없는 음료로 보이는 듯한 느낌이 든다고 생각했다.

 

선택 가능한 버튼들의 색상을 변경하는 것만으로도 해당 느낌을 지울 수 있지 않나 싶었다.
(또한 의도인지 모르겠으나 수량 버튼의 모양이 정원이 아닌 미묘한 달걀형으로 되어 있기에 해당 부분도 수정해보았다.)

 

2. 장바구니

장바구니 상단 주문 매장을 표시하는 버튼은 타 UI에서도 동일한 아이콘을 사용하기에 마치 수정이 될 것 같지만 되지 않는 상태였는데, 일단 이 부분이 확인의 기능만 한다는 것이 불편하게 느껴졌다.

또한 공차의 주문 시스템은 매장별로 장바구니가 저장되기에, 어느 루트에서든 주문 매장을 변경하려면 다시 음료를 담고, 상세 정보를 수정할 필요가 있다는 것 또한 주문을 불편하게 하는 요소라고 느껴졌다.

그래서 이런 식으로 매장을 수정하더라도 플로우를 재반복할 필요가 없게끔 장바구니 항목을 공통 적용되도록 변경하고, 언제든 돌아가는 플로우를 밟지 않도록 수정되면 어떨까 생각하여 플로우를 작성해보았다.