[온스탕탕ep.4] 선물하기 UX 개선

CJ온스타일 tech
CJ 온스타일 기술 블로그
7 min readMar 25, 2024

온스탕탕💜 온스타일 IT 담당자들의 우당탕탕 비하인드 스토리

CJ온스타일의 선물하기 서비스가 개선되었어요. 선물 발송부터 수락, 배송 완료되기까지, 고객이 거쳐가는 과정에서 발생할 수 있었던 불편사항들을 개선하였는데요. 앞으로는 편리하게 온스타일의 선물하기 기능을 이용해 보세요 :)

🎁 CJ온스타일의 ‘선물하기’ 이렇게 바뀌었어요

  1. 장바구니 페이지 안에서 여러 상품에 대해 한꺼번에 선물 주문이 가능해요.
  2. 선물 수락 과정에서 거쳐야 하는 페이지와 입력해야 하는 정보들을 최소화했습니다. 회원인 경우 로그인을 통해 기존 배송지 정보가 연동돼요.
  3. 선물함 신설! 온스타일 회원인 경우 선물 주문 내역과 배송 현황을 조회할 수 있습니다.

선물하기 UX 개선 프로젝트 담당자들의 비하인드

길고 복잡한 과정 속 숨은 pain point 찾기

🎤선물하기 서비스 기획자 최규진님 Says

선물하기 서비스는 일반 주문과는 달리, 상품을 구매한 사람과 실제 상품을 인수하는 사람이 발송자/수신자로 나눠져 있고 전달된 선물받기 메시지 링크를 통해 많은 페이지 및 입력 단계를 거쳐야 하므로 길고 복잡한 과정에서 발생하는 고객의 페인포인트가 많았던 서비스였어요.

1. 기존 선물하기 주문 프로세스 Analysis

고객 경험 기반의 관점으로 당사의 선물하기 서비스를 면밀하게 분석해본 결과, 일반 주문과는 달리 선물하기 주문의 경우, 하나의 주문번호 내에서 상품을 주문한 사람(발송자)과 실제 배송 된 상품을 인수하는 사람(수신자)이 나눠져 있으며 그 과정에서 많은 페이지와 입력 단계를 거쳐야 하므로 도중에 어려움을 겪거나 이탈할 가능성이 높은 서비스였어요.

  • ☹ 윤봉길 : 여러 개의 상품을 선물 주문 하려면 주문을 여러 번 해야하는 거잖아!
  • ☹ 홍길동 : 선물을 받아야 하는데 왜 이렇게 입력 해야하는 정보가 많은 건가요?
  • ☹ 이순신 : 선물은 받았는데 어디서 확인할 수 있어요..? 배송은 잘 되고 있는 건가요?

2. 타사 Bench-marking

그에 비해 경쟁사의 선물하기 주문 서비스는 고객의 사용 편의성 측면에서 여러가지 편의 기능을 제공하고 있었어요.

  • A사 : 동시에 여러 개를 선물하고 싶다면, 선물상자에 담아 한번에 선물하세요
  • B사 : 입력 해야하는 정보가 많죠? 로그인하시면 배송지 정보를 불러올 수 있습니다.
  • C사 : 선물을 수락한 후에도 선물 이력은 마이존 받은 선물함에서 확인이 가능하지요.

기존 프로세스를 분석하고 타사 벤치마킹을 통해 고객 관점에서 불편한 사용성을 개선하는 것을 최우선 목표로 개선해 보았습니다.

사용자 경험을 개선하기 위해 Back-end 개발자가 고민한 것들

🎤선물하기 서비스 Back-end 개발자 JoonBae님 Says

이 프로젝트를 진행하면서 가장 중요하게 고려한 점은 프로젝트 타이틀처럼 ‘사용자 경험: UX’ 이에요.

1. 기존 코드와의 호환성 유지

기존 선물하기 서비스가 이미 운영 중이었기 때문에, 새로운 기능을 추가하면서 기존 코드와의 호환성을 유지하는 것이 매우 중요했는데요, 이를 위해 우선 기존 코드를 분석하고 이해하는 시간을 많이 할애했어요.

기존 코드의 구조와 동작 방식을 파악하여 새로운 기능을 추가할 때 어떻게 통합할 지에 대한 전략을 세웠고, 기존 코드의 수정을 최소화하고 새로운 기능을 모듈화하여 확장성을 고려했어요.

2. 기존 페이지와의 일관성 유지

단건처리에서 다건처리로 변경됨에 따라 각기 다른 상품들이 함께 처리되면서 각 상품들의 옵션들에 따라 달리 처리되어야 하는 복잡성이 발생했어요.

그래서 다건처리를 위해 장바구니에 선물하기 기능을 적용하면서 또, 상품상세의 선물하기 가능 기준을 동일하게 적용하면서 기존 페이지와의 일관성있는 처리가 이루어 지도록 고려했어요.

3. 사용자 경험의 편의성 증대

사용자가 새로운 기능을 쉽게 이해하고 사용할 수 있도록 기획팀과 디자인팀에서 설계해준 내용을 이해하고 그 의도가 명확히 전달되도록 화면 및 데이터 처리를 했는데요, 선물 알림톡을 통해 앱설치/회원가입을 유도하고, 이후 로그인정보를 토대로 선물 받기에 대한 고객 동선을 줄이는 등 고객 편의성에 중점을 두고 개발을 진행했어요.

때론, 새롭게 만드는 것보다 더 까다로운 고도화

🎤선물하기 UX 디자이너 Bora Shin님 Says

이번 프로젝트에서는 디자인적인 큰 변화보다는 주로 기존 선물하기 서비스의 기능을 고도화하고, 주문 편의성을 강화하여 완성도를 높이는 것을 목표로 삼았어요.

완전히 새롭게 만드는 개편이 아닌 개선 작업이었기에 예상보다 까다로운 문제들이 많았어요. 선물하기 기능이 새롭게 추가된 장바구니를 살펴보면, 기존 목적과 기능을 유지하면서 선물하기를 조화롭게 녹이기 위한 많은 고민이 필요했어요.

특히 상품 특성 상 선물이 불가한 경우가 있어 기능과 위치가 고정적일 수 없는 어려움도 있었어요. 이에 대응하여 선물하기 버튼이 없더라도 안정적인 그리드를 유지할 수 있도록 버튼을 우측 정렬로 변경했어요.

더불어, 새로운 선물 가능 상품 필터링 기능과 함께 기존 버튼의 클릭성도 강화하여 장바구니의 사용성을 높였어요. 또한 아이콘을 활용하여 옵션 변경, 구매하기 버튼과의 시각적 차별화를 주었어요.

주문서로 페이지가 이동할 때 해당 아이콘을 활용한 로딩 인터랙션을 도입하여 선물하기의 아이덴티티를 강화하고 동시에 사용자에게 소소한 재미를 선사하고자 했어요.

앞으로도 이러한 사소하지만 점진적인 변화를 통해 선물하기 서비스의 완성도를 높여 나아가겠습니다.

마치며,

PM 최규진님 ) 이번 팀 프로젝트를 진행하며, 담당자 간의 의견 불일치를 최소화하는 것이 개인적인 지향점이었어요. 중간에 발생하는 여러가지 이슈들을 빠르게 커뮤니케이션하고 내용을 복기하기 위해 모든 협의 과정을 요청 및 처리자로 구분하여 기록/공유하는 과정을 매번 진행했어요. 덕분에 과제 진행 과정에서 큰 이슈사항이나 일정 지연이 발생하지 않았던 것으로 생각됩니다.

그리고 선물받기 페이지를 거쳐 온스타일에 신규로 가입하는 고객이 늘어나고 있어요!

그렇게 신규로 회원 가입한 고객들의 주문 금액도 늘어나고 있답니다.

또, 이번에 오픈한 기능인 다건 주문 건수 비중을 보며, 하나만 선물할 수도 있었던 고객들이 여러 개를 선물하게 된 효과로 볼 수 있을 것 같아요.

편리해진 선물하기 서비스를 더 많은 고객들이 이용하실 수 있도록 아직 선물하기가 불가능한 상품 유형도 추가할 수 있도록 비즈니스적으로 고려해 볼 예정입니다.

온스타일 상품 상세 구조개선 프로젝트 IT 담당자들의 우당탕탕 비하인드 였습니다 👋🏻온스탕탕 ep.4 끝

[Team 선물하기] CJ ENM COMMERCE DIV. PM & 서비스 기획 최규진 / UXUI 디자인 Bora Shin / Back-end 개발 JoonBae

--

--