빅인 UX/UI 팀의 Bigin Ads 리디자인 이야기
안녕하세요. Bigin UX/UI 디자인 팀입니다.
이번 글에서는 2022년 Product Unit의 가장 큰 프로젝트 중 하나인 <Bigin Ads의 리디자인>에 대해 이야기하려고 합니다. 글의 쉬운 이해를 위해 프로젝트의 큰 배경부터 설명해 드리겠습니다.
빅인사이트는 2017년부터 CRM 마케팅 자동화 솔루션 Bigin CRM(구 빅인)을 제공하고 있는 솔루션 기업입니다.
빅인은 마케터의 업무를 효율화한다는 미션 아래 고객 유입 후 단계에 특화된 솔루션을 제공했습니다. 하지만 이 단계에만 집중한 솔루션에 끊임없이 물음표를 던지며, 마케터들에게 진정으로 필요한 서비스가 무엇인지 깊이 고민했습니다.
긴 고민 끝에 내린 결론은 ‘마케터에게 가장 필요한 건 고객 여정 전반에서 필요한 메시지를 제공하는 것, 이른바 풀퍼널 마케팅(Full-funnel marketing)'이었습니다.
풀퍼널 마케팅이란 새로운 미션을 세운 빅인사이트는 마케터에게 필요한 솔루션 제공이란 목표 아래 퍼포먼스 마케팅 자동화 솔루션을 공급하는 T사를 인수했고, 리브랜딩을 거쳐 Bigin Ads 솔루션을 출시했습니다.
그 결과, 현재는 국내 유일 풀퍼널 마케팅 자동화 솔루션을 제공하는 SaaS 솔루션 기업으로 거듭나게 되었죠.
이 과정에서 UX/UI 디자인 팀은 Bigin CRM, Bigin Ads 두 솔루션을 불편함 없이 실무에 활용할 수 있도록 사용성을 통일하는 프로젝트를 진행했습니다. 하지만 정체성을 지키면서 서로 다른 솔루션을 통일하는 작업은 결코 쉽지 않았습니다.
이번 글에서는 Bigin CRM, Bigin Ads의 사용성 통일을 목표로 기존 고객에겐 개선된 사용성을 전달하고, 새로운 고객에겐 직관적인 편리함을 제공하기 위해 고민한 과정을 담아 보았습니다.
1. UX와 UI 개선점 찾기
2. UX/UI 개선하기
직관적인 이해를 위한 모션
명확한 문장으로 사용자의 혼란 최소화
3. 고객사 피드백
UX와 UI 개선점 찾기 (1)
디자인을 시작하기에 앞서 가장 큰 문제점은 퍼포먼스 마케팅 분야에 대한 이해도가 낮다는 점이었습니다.
기본적인 용어, 퍼포먼스 마케터가 일하는 방식, 마케팅이 진행되는 전체적인 흐름 등 CRM 마케팅과 비슷하면서도 다른 퍼포먼스 마케팅의 기본적인 지식이 부족한 상태였습니다.
이를 보완하기 위해 관련 도서와 자료를 기반으로 팀원들과 스터디를 진행하고, 시장조사를 하며 실제 마케터 들이 불편함을 느끼는 지점에 대한 배경지식을 쌓아 갔습니다.
기초 지식을 쌓은 후에는 T사의 솔루션을 직접 사용해보며 일반 사용자와 프로덕트 디자이너의 관점에서 솔루션을 뜯어보기 시작했습니다. 분야에 대한 이해와 함께 기존 레거시, VoC, 내부 직원의 피드백을 참고하여 아래 네 가지를 기준으로 디자인의 방향성을 잡았습니다.
유지해야 할 것
개선되어야 할 것
삭제되어야 할 것
새롭게 추가해야 할 것
UX와 UI 개선점 찾기 (2)
Bigin Ads는 퍼포먼스 마케팅을 처음 시작하는 초보 마케터, 혹은 SMB를 운용하는 기업을 위한 솔루션입니다. 즉, 퍼포먼스 마케팅이 아직은 익숙하지 않은 사용자가 타겟이라는 의미인데요.
그래서 솔루션 내에 표기된 마케팅 용어를 쉽게 설명하고, 선택지에 대한 안내를 직관적으로 하는 것을 목표로 프로젝트를 진행했습니다. 이런 방향성은 세 가지 부분에 녹여낼 수 있었습니다.
기존 T사의 솔루션은 데이터와 함께 설명되지 않은 전문 용어가 노출되고 있었습니다. 퍼포먼스 마케팅을 이제 막 시작하는 단계의 마케터라면 직관적으로 대시보드를 이해하기 어려웠지요.
이를 개선하기 위해 툴팁을 활용하여 용어에 대한 설명을 추가했습니다. 그 결과, 솔루션을 처음 사용하는 마케터는 전문 용어에 대한 이해도가 낮아도 데이터를 쉽게 이해할 수 있게 되었습니다.
게다가 솔루션 입장에서는 단어 검색 등의 이유로 고객이 이탈하는 가능성도 최소화할 수 있었습니다.
기존 T사 솔루션의 문제점은 캠페인 항목이 Card UI 형태로 구성되어 캠페인당 4가지 데이터만 확인 가능하다는 것이었습니다. 비효율적인 UI 때문에 그 이상의 데이터를 보기엔 어려움이 있었지요.
이런 비효율은 한눈에 확인할 수 있는 데이터의 종류가 제한적이라는 문제점을 초래했습니다. 캠페인 결과를 분석하여 예산을 재분배하는 등 성과에 맞추어 기민하게 대응해야 하는 퍼포먼스 마케터에겐 치명적인 문제점이었습니다.
이를 개선하기 위해 캠페인 항목을 리스트 형태로 바꾸고 최대 16가지 데이터를 직관적으로 볼 수 있게 하여 복합적인 성과 분석이 가능하도록 리디자인 했습니다.
퍼포먼스 마케팅이 익숙하지 않은 마케터는 용어뿐만 아니라 매체별 캠페인의 형태와 작동 방식도 낯설 것이라 생각했습니다. 페이스북, 구글, 카카오비즈 등에서 어떤 형태의 캠페인을 집행할 수 있는지 하나하나 파악하는 것은 이미 많은 업무를 하는 마케터에겐 쉽지 않은 일이기 때문입니다.
이런 문제점을 해결하기 위해 두 가지를 개선했습니다. 먼저, 기존 T사에서 제공했던 광고 유형 미리보기 모션을 새로운 톤앤매너에 적합하도록 수정했습니다. 그리고 이것을 한눈에 볼 수 있도록 영역의 넓이도 확장했습니다.
이를 통해 솔루션을 사용하는 마케터는 자신이 만들고자 하는 캠페인이 *엔드 유저에게 어떻게 노출될 것인지 미리 파악할 수 있게 되었습니다.
*엔드 유저(End User): 생산자가 만든 상품을 가장 마지막 단계에 소비하는 사용자
UX/UI 개선하기 (1) 직관적인 이해를 돕기 위한 모션
슬라이드 이미지, 컬렉션 광고, 카탈로그 슬라이드, 비즈보드, 네이티브 디스플레이…
모든 캠페인이 어떤 식으로 고객에게 노출되는지 자세히 알고 계신가요?
이번 챕터에서는 위에서 언급한 ‘캠페인 유형 미리보기’에 대해 조금 더 자세히 알아보려고 합니다.
Bigin Ads에서 마케터가 캠페인을 생성할 때 선택해야 하는 것은 ‘캠페인 유형’입니다. 하지만 숙련된 퍼포먼스 마케터가 아닌 이상 캠페인의 이름과 간단한 설명만으로 어떻게 동작하는지 파악하기란 매우 어려운 일입니다.
따라서 사용성을 높이기 위해서는 마케터가 대시보드에서 캠페인 유형을 직관적으로 파악할 수 있어야 한다고 생각했습니다.
직관적인 캠페인 유형을 보여주기 위해 미리보기 영역을 넓게 확보하여 캠페인이 보이는 방식을 모션으로 제작했습니다.
직관적인 모션을 만들기 위해 3단계로 나누어 프로젝트를 진행했습니다.
[1단계] 엔드 유저의 관점에서 캠페인 유형 분석하기
가장 먼저 각각의 캠페인 유형이 엔드 유저에게 어떻게 보이는지 파악했습니다. 이후 PC, 모바일, 태블릿 등의 디바이스에서 공통적으로 나타나는 작동 방식을 정리했습니다.
[2단계] 통일된 경험 제공하기
단독으로 사용될 모션이 아니기에 솔루션의 전체적인 톤과 스타일을 맞추는 작업을 진행했습니다.
[3단계] 가장 중요한 것은 사용자의 편리함
마지막으로 제작된 미리보기 모션은 마우스 오버로 재생되도록 설정했습니다. 사용자의 편의성을 고려하여 클릭과 같은 사소한 행동도 최소화해 다양한 캠페인 유형을 더욱 빠르게 파악할 수 있도록 유도했습니다.
이런 과정을 통해 간단한 설명으로도 캠페인 유형을 직관적으로 파악할 수 있는 UI를 제작할 수 있었습니다.
UX/UI 개선하기 (2) 명확한 문장으로 사용자의 혼란을 최소화하기
솔루션의 사용 편의성을 높이는 마지막 핵심은 무엇일까요? 바로 ‘텍스트’입니다.
서비스를 제작하는 maker는 모든 프로세스를 자세히 알고 있고, 사용법 또한 충분히 인지하고 있기 때문에 고객에게 설명하는 문장을 다소 불친절하게 작성할 가능성이 높습니다. 내가 알고 있는 것을 사용자도 당연히 알고 있을 거라고 착각하기 때문이죠.
이를 방지하기 위해 빅인의 UX/UI 디자인 팀은 UX Writing의 큰 규칙을 정의했습니다.
특정 행동을 통해 고객이 얻을 수 있는 가치와 이를 위해 해야 하는 행동에 대해 작성한다. 그리고 이 문장을 한눈에 읽히도록 문장을 다듬는다.
고객에게 꼭 전달해야 하는 내용을 문장으로 구성하니 미사여구 없이 가독성 좋은 텍스트를 작성할 수 있었습니다. 이런 규칙을 기반으로 솔루션 내의 모든 텍스트를 검수하였고, 그 결과 명확한 안내를 통해 사용자가 주도적으로 사용할 수 있는 서비스를 출시할 수 있었습니다.
고객사 피드백
약 두 달이라는 시간 동안 유관 부서와 함께 머리를 맞대고 고민한 결과, 고객사의 반응은 매우 긍정적이었습니다.
이번 프로젝트는 50번 이상의 회의, 10,000번 이상의 대화들이 모여 비교적 짧은 시간 내에 좋은 결과물을 만들 수 있었다고 생각합니다. 물론, 이전에 탄탄하게 구축해 놓은 디자인 시스템도 큰 역할을 했지요.
*빅인 디자인 시스템이 궁금하다면?
‘빅인 디자인 시스템, 당연하던 불편함을 개선하다.’ 콘텐츠 보러 가기 (클릭)
좋은 사용성이란 사용자가 어려움 없이 물 흐르듯 서비스를 이용하는 것입니다. 그래서 처음 솔루션을 사용하기 시작한 마케터가 그 누구의 도움도 받지 않고 혼자서도 잘 활용할 수 있는 솔루션을 만드는 것이 이번 리브랜딩 프로젝트의 가장 큰 목표였습니다.
이러한 목표를 이루기 위해 고객의 편의성과 사용성에 집중해 프로젝트를 진행했고, 그 결과 빅인 UX/UI 팀만의 색으로 Bigin Ads를 재탄생시킬 수 있었습니다.
기존 사용자와 신규 사용자 모두가 어색함 없이 Bigin Ads를 사용하도록 만든 이번 프로젝트는 국내 최초 풀퍼널 마케팅 자동화 솔루션의 첫걸음입니다.
앞으로 Bigin Ads는 Bigin CRM뿐만 아니라 타 솔루션과 더욱 강력한 연계를 통해 국내 유일 풀퍼널 마케팅 자동화 솔루션으로 입지를 다져나가겠습니다.
오직 빅인에서만 제공할 수 있는 풀퍼널 마케팅 자동화 솔루션에 많은 기대와 관심을 부탁드립니다.
쉽고, 간편하게 디지털 광고를 시작하고 싶은 마케터라면?
>> 지금 바로 Bigin Ads에 문의하세요. (클릭)