쿠폰 에셋 디자인 개편기

지난번에 [사용하기 어려운 마케팅 디자인 시스템]에 대한 글을 썼었는데, 이 글의 초입에는 어느 디자인 조직장 님이 당시 쿠폰 시스템의 불편한 점에 대해 얘기한 부분이 있었다. 그리고 글 마지막에 [쿠폰 에셋 업데이트에 대한 썰은 나중에 풀어보겠다]고 했는데 드디어 풀어본다. (매우 늦어서 죄송합니다...)

이번에 작성한 글은 10월 초 패스트캠퍼스에서 진행한 세미나의 일부 내용을 좀 더 자세히 풀어보는 글이다. 겹치는 내용이 많을 수 있지만, 당시 시간상 더 얘기하지 못한 것도 추가해서 넣어보았다.

쿠폰 개편의 이유, 문제점 발굴하기 그리고 개편 방향 정하기

모든 개편 프로젝트의 첫 시작은 이 프로젝트의 이유를 찾는 것, 즉 [뭐가 문제여서 이걸 고쳐야 할까]를 정의하는 것이다. 문제를 정의하는 것은 어렵지 않았다. 그동안 마케터와 디자이너들에게 항상 문의받은 사항들 중 가장 자주 받은 것을 모으면 되니까. 크게는 2가지의 문제가 있었다.

첫째, ATF 영역 내에서 최대한 많은 혜택을 보여줘야 하는데(이는 스크롤을 최소화하고자 하는 니즈도 포함) 기존의 쿠폰은 영역을 많이 차지한다.

둘째, 현재 가이드상 안 되는 것이 너무 많다. 현재 마케팅 정책 및 사업 방향에 맞지 않은 가이드도 있는데 이것이 반영되지 않은 구버전 가이드로 운영되고 있다.

이 문제점을 기반으로 개편 목표를 잡았는데, 이미 이전 글에서 쿠폰 개편의 목표를 크게 3가지를 뒀다고 했다. 이 목표들을 위의 문제점에 맞춰서 더 구체적으로 정리하자면 아래와 같다.

이번 개편에서는 [생산성]에 집중한다. 즉, 디자이너가 쉽고 빠르게 이 쿠폰 에셋으로 페이지를 만들 수 있게 한다.

- 생산성에 가장 큰 걸림돌이 되는 빡빡한 가이드를 많이 오픈한다. 디자이너가 해당 에셋을 활용하는 것은 어느 정도 열어 놓는다.
- 마케팅은 변화가 너무 잦다.(서비스 추가 등등) 이 변화에도 충분히 대응 가능한 유연한 가이드로 바꾼다.

디자인을 전반적으로 콤팩트(compact)하게 조정한다.

- 디자인 요소들(텍스트 크기, 썸네일 크기 등) 크기를 줄여서 높이값을 최소화한다. 계속해서 스크롤 최소화, 영역 내 최대한 많은 쿠폰을 보이고자 하는 니즈가 있는데 이를 위해서라면 디자인 요소 크기를 줄여야 한다.
- 쿠폰 on/off 등의 운영에 불편한 요소는 과감히 빼거나 조정한다.
- 가이드 오픈을 위해서 현재 여러 개로 나눠져 있는 쿠폰 에셋 개수를 크게 줄인다. 공통으로 가져갈 디자인을 찾아서 모든 종류의 쿠폰에 적용할 수 있게 한다.

어떻게 보면 사용성보다 공급자(마케터, 디자이너)를 위한 개편이라고 할 수 있다. 쿠폰 디자인은 사용자에게 이미 잘 학습된 상황이라 여기서 더 디자인을 바꾸면 오히려 반감을 살 것 같았다. 그래서 쿠폰 디자인이 크게 바뀌지 않는 선에서 사용 가이드나 정책을 바꾸는 방향으로 개편을 진행했다.

이렇게 쿠폰을 바꿔보았다

디자인상의 개편은 어렵지 않았다. 이번 개편에서 가장 큰 것은 "이건 열어놓을 건데요, 이건 정말로 못 바꾸는 사항이에요!"라고 정책을 변경하는 것이었다. 그래서 어떻게 바뀌었냐면...

왼쪽이 기존 버전, 오른쪽이 개편 버전의 쿠폰이다. 쿠폰 금액이나 다운로드 버튼 등의 크기가 전반적으로 줄었다. 이 크기를 줄인 이유는 위의 문제점 중 [높이값 줄이기]가 가장 컸다. 마케터들이 항상 요구했던 부분이었다. 물론 마케터와의 미팅에서 "여기서 유의사항이 1줄 더 추가된다면 어쩔 수 없이 높이값이 늘어납니다"라고 미리 얘기했고, 마케터는 이를 바로 OK 했다. 일단 기본 형태에서 높이값이 줄어든 것이 마케터에게는 가장 크게 와닿았던 것 같다.

그리고 기존 버전을 보면 어떤 것은 상단에 로고가 있고 어떤 것은 정방형 썸네일이 있는데, 이는 우리 서비스에서 제공하는 쿠폰과 프랜차이즈/커머스 셀러에서 제공하는 쿠폰을 구분 짓기 위함이었다. 근데 오히려 이렇게 구분되어 있어서 관리도 너무 어려웠다. 그리고 사용 비중은 브랜드/셀러 쿠폰이 압도적으로 높았다. 굳이 2가지로 나눌 필요가 없었다.

그래서 디자인을 하나로 합쳐버렸다. 모든 쿠폰에 정방형 썸네일을 추가했다. 쿠폰 왼쪽부터 썸네일 - 쿠폰 정보(서비스명/쿠폰혜택/유의사항) - 다운로드 버튼(+그 위에 강조배지) 이 레이아웃은 절대 뺄 수 없는 구조로 고정시켰다. 이 구조 외에는 정보영역 등에는 자유롭게 텍스트를 쓸 수 있게 했다. (아 물론 최대 글씨 수 제한은 있습니다)

이 디자인 하나로 모든 쿠폰을 커버할 수 있게 했다. 별도 컴포넌트로 운영하던 쿠폰과 쿠폰팩도 이 기본형태 하나로 만들었다. 푸드/픽업/커머스 서비스도 모두 이 쿠폰 하나로 커버 가능했다. 막상 내가 컴포넌트를 세팅할 때, "서비스별로 나누지 않아도 될 것 같은데??"라고 생각이 들 정도였다.

참고로 개편은 아래 과정으로 진행했다.

1. 푸드/커머스별 페이지를 모두 모아서 근래 1달간 쿠폰 사용 현황을 파악한다. (마케팅 방향 변화가 잦아서 최대 1달간의 이슈만 파악)

2. 이를 토대로 시안과 정책을 변경해 본다. (+ 팀 내 N번의 피드백)

3. 어느 정도 시안이 확정되면, 푸드/커머스 서비스의 마케터와 디자이너에게 공유하고 추가 반영사항을 받는다. (+ 마케터의 N번의 피드백과 요청)

4. 최종 시안이 나오면 이를 토대로 정책과 컴포넌트를 고치고 배포한다.

그래서... 개편 후에 좀 더 나아졌나요??

그렇게 개편된 쿠폰으로 공식 배포한 지 2달 정도가 지났다. 이후에 피그마의 [라이브러리 애널리스틱(Library Analystic] 기능을 이용해서 수치를 매달 봤다.(물론 이 기능으로 보기에는 한계가 있을 수 있다) 의도하진 않았지만, 이전 컴포넌트는 이 통계 기능을 사용하기 어려울 정도로 에셋 개수도 많고 구조가 엉망이었는데 이번 개편 이후로 이 통계 기능으로 충분히 사용 현황을 볼 수 있었다. 다행히도 페이지 에셋들 중에서도 쿠폰이 상위권을 항상 유지할 정도로 많은 사람들이 잘 사용해 줬다.

여기서 중요한 점은, 이렇게 많이 사용함에도 불구하고 쿠폰 관련 문의 횟수가 많이 줄었다는 것이다. 라이브러리를 처음 만들고 나서 슬랙의 서포트 채널을 통해서 에셋 관련 문의를 받았는데, 개편 전보다 문의 횟수가 많이 줄었다. (서포트 채널 말고 다른 채널, 심지어 DM으로 오는 문의도 많이 줄었다) 물론 작업자(디자이너와 마케터)끼리 "이게 쿠폰에서 돼? 안돼?"를 의논하기도 하겠지만, 이럴 때 나를 찾지 않고 그들끼리 정책을 확인 후 적용한다는 것만으로도 나에게는 큰 성과였다. 물론 [쿠폰 개편 이후로 정말 많이 좋아졌다]고 데이터로 명확하게 얘기하기에는 한계가 있다. 하지만 쿠폰을 이용해서 작업하는 사람들 입장에서 보자면 나는 적어도 이전 쿠폰 에셋보다는 나아졌다고 생각한다.

내가 생각하는 쿠폰 에셋의 Next Step은?

쿠폰이나 메뉴 소개 카드 등의 페이지 에셋을 개편하고 나서 든 생각은 "이다음에는 단순히 디자인이나 정책 변경이 아니라, 제작 프로세스 자체를 엎어야 할 수도 있겠다"는 것이다. 지금의 개편은 [이미지 기반으로 쿠폰을 제작하기 위한] 기존 시스템 개편이었다. 하지만 이다음에는 더 큰 개편을 진행해야 하지 않을까? 하면서 고민 중이다.

마케팅 디자인은 점점 제작 속도가 중요해지고 있다. 퀄리티 높은 이미지를 만드는 역할은 어느새 AI가 담당하고 있다. 그렇다면 마케팅 디자이너의 역할은 이제 없는 걸까? 이는 절대 아니고, 마케팅 디자이너의 역할이 [퀄리티 높은 디자인을 빠르게 제작해서 마케팅 니즈에 대응할 수 있는 시스템을 만들기]가 될 것이다. 현재 주먹구구식(?)으로 운영되는 디자인 프로세스에 [체계]를 도입하는 역할은 [이 과정을 경험한 디자이너]만 할 수 있다. 만약 이다음에 페이지 에셋을 개편한다고 하면, 아예 이 디자인 프로세스 자체의 개편을 목적으로 진행하지 않을까 생각한다.