[뱅카우] 전환율 400% 이상 달성시킨 2D 그래픽 디자인 시스템 제작기

뱅카우 프로덕트 디자이너 윤현우 캐릭터

안녕하세요, 뱅카우 프로덕트 디자이너 윤현우입니다.

작년 7월 업로드한 뱅카우 디자인 시스템 글에 이어 이번 포스팅에서는 디자인팀이

뱅카우 앱에서 2D 그래픽 디자인 시스템 1.0을 구축하고 유의미한 A/B 테스트 결과를 얻은 경험을 공유하고자 합니다.

 

이 글에서는 뱅카우 앱에서 일관된 그래픽 디자인 시스템을 구축한 경험을 공유하며, 이를 통해 얻은 유익한 교훈과 그래픽 디자인 시스템이 제공한 가치 있는 결과를 소개합니다.

뱅카우의 디자인 시스템 작업 과정이 궁금하다면

[뱅카우] 프로덕트 완성도는 높이고 투입 리소스는 줄이는 디자인 시스템

 

 

 

---

#00 | 2D 그래픽 디자인 시스템이 필요한 이유

뱅카우에서 2D 그래픽 디자인 시스템을 구축한 이유는 다음과 같습니다.

1. 적은 리소스를 사용해 작업 시간을 줄이기 위해
2. 어려운 금융 지식을 쉽게 표현하고 전달하기 위해
3. 3D 그래픽이 사용되지 않는 콘텐츠를 표현하기 위해
4. 디자이너들 간의 협업을 강화하기 위해

 

뱅카우는 앞으로 한우 투자 상품을 자주 출시할 계획입니다. 이는 투자 상품의 핵심 역량과 특징을 그래픽으로 자주 설명해야 한다는 뜻입니다.

 

기존 뱅카우의 핵심 비주얼은 3D 그래픽으로 표현되었습니다. 3D 그래픽은 사실감과 몰입도 표현에 효과적이지만 작업에 많은 리소스가 필요하고 변형이 어렵습니다. 그래서 빠르게 작업할 수 있고 다양한 변형이 자유로운 2D 그래픽이 추가로 필요했습니다.

그래서 뱅카우 3D 그래픽과는 별개의 가치와 개념을 가진 2D 그래픽 디자인 시스템을 만들게 되었습니다.

 

뱅카우 2D 그래픽 디자인 시스템 1.0 예시

 

---

#01 | 전체 가이드라인 만들기

뱅카우 2D 그래픽 디자인의 전체 가이드라인은 간결하고 직관적인 디자인을 추구하며, 사용자들에게 신뢰감을 전달하기 위해 실제 데이터를 적극적으로 활용합니다. 예를 들어, 한우 판매의 목표 가격 등의 정보를 그래픽 요소로 사용하기도 합니다.

 

상품의 특징을 표현하는 내용과 방법은 커뮤니케이션 전략에 따라 매번 바뀌겠지만, 핵심 역량은 자주 바뀌지 않습니다.

 

따라서 일관된 그래픽 경험을 제공하면 사용자에게 상품의 매력을 어필하는 것은 물론 핵심 역량을 명확하게 각인시킬 수 있습니다. 또한, 반복적인 디자인 작업 시간을 줄일 수 있고, 여러 디자이너가 작업해도 결과물의 일관성을 유지할 수 있으며, 각자 전문성을 살려 업무를 분담할 수 있습니다.

 

1. 공간감을 표현할때 2.5D를 사용하기도 합니다
2. 간결하고 직관적으로 표현합니다
3. 실제 데이터를 활용합니다
4. 기존 일러스트와 톤 앤 매너를 지킵니다

 

그래픽 디자인 전체 가이드라인 일부

 

---

 

#02 | 캐릭터 그래픽 가이드 만들기

뱅카우에서 가장 많이 사용될 그래픽은 송아지입니다. 그다음으로 많이 사용될 그래픽은 소통을 대신할 사람 캐릭터입니다.

 

먼저 사람 캐릭터는 젊고 부지런한 에너지와 희망찬 이미지를 나타내도록 디자인했습니다. 이는 새로운 시대의 축산업을 선도하는 모습을 담아내고 싶은 마음에서 비롯됐습니다.

 

뱅카우 캐릭터 그래픽

 

뱅카우의 사람 캐릭터 그래픽은 총 4개의 가이드라인을 기준으로 디자인하고 있습니다.

가이드라인은 디자인의 일관성을 유지하면서도 뱅카우 디자인팀이 창의성을 발휘할 수 있도록 최소한으로 설정했습니다. 너무 많은 가이드라인은 디자이너의 창의성을 제한하고 유연성을 떨어뜨릴 수 있기 때문입니다.

따라서, 필수적인 요소들만을 포함시켜 팀의 모든 디자이너들이 더 자유롭게 작업할 수 있도록 하면서도, 뱅카우 캐릭터의 그래픽이 일관된 모습을 유지할 수 있도록 하였습니다.

 

 

1. 비율

-  다양한 행동 표현을 위해서 캐릭터의 비율은 7등신을 사용합니다

 

2. 변형

- 상황에 따라 물건을 들거나 앉거나 다양한 행동과 동작을 수행할 수 있도록 변형이 가능합니다

3. 색상

- Color-Blue-200: 큰 영역에 컬러로 사용합니다
- Color-Netural-400: 중간 영역에 컬러로 사용합니다
- Color-Netural-100: 작은 영역에 컬러로 사용합니다

4. 복장

- 대표적으로 작업복, 모자, 장화를 착용합니다
- 여러 명이 등장할 경우 다채로운 복장은 가능하지만 색상 구성은 그대로 유지합니다

 

뱅카우 캐릭터 그래픽 가이드라인 일부

 

---

 

#03 | 한우 그래픽 가이드 만들기

다음으로, 뱅카우 서비스의 핵심인 송아지는 건강하게 자라는 모습을 표현하기 위해 다양한 크기와 색상으로 디자인했고, 뱅카우의 사육 목표인 1++(B) 등급, 467kg로 키운다는 핵심 메시지를 쉽게 이해할 수 있도록 텍스트를 넣을 공간을 마련하고, 둥글고 통통한 모습으로 표현했습니다.

 

뱅카우 한우 그래픽

 

한우의 캐릭터 그래픽은 총 4개의 가이드라인을 기준으로 디자인하고 있습니다.

1. 비율

-  머리의 끝은 뿔의 시작점입니다. 5등신으로 한우의 비율을 디자인합니다

 

2. 변형

- 한우 비율을 유지한 채 앉거나 사료를 먹거나 다양한 행동을 취할 수 있습니다

3. 개월 수에 따른 형태 변화

- 송아지, 한우 두 가지의 형태의 디자인이 존재합니다
- 송아지는 크기, 뿔의 유무, 꼬리 길이, 둥근 모양 등의 변화가 있습니다

4. 색상

- 색상을 갈색에 국한되지 않고 주제에 따라 다채롭게 사용해 사용자들에게 메시지를 전달합니다

 

뱅카우 한우 그래픽 가이드라인 일부

 

---

 

#04 | 한눈에 이해할 수 있는 일러스트로 A/B 테스트 전환율 400% 이상 달성

그럼, 그래픽 품질을 높이는 이 작업이 어떤 성과를 거두었을까요?
뱅카우는 2024년 6월 20일부터 7월 17일까지 출시한 한우 투자 상품(가축 투자계약증권 1-1호와 1-2호)의 핵심 역량과 특징을 표현하는 투자 팁 공간에서 A/B 테스트를 진행하고 분석한 결과를 소개해 드리겠습니다.

 

투자 팁은 조각 투자나 한우 투자에 관심 있는 고객이 '회사', '서비스', '상품'에 대한 신뢰를 가질 수 있도록 돕는 역할을 합니다.

하지만 기존 투자 팁의 디자인은 (그룹 A안) 텍스트와 관련이미지 모두 해석이 필요해 쉽고 빠르게 이해하기 어려웠습니다.

 

따라서 디자인팀은 그래픽 디자인 시스템을 활용해서 그룹 B안과 같이 뱅카우 상품의 강점을 쉽게 이해할 수 있도록 디자인한 뒤, 프로덕트에 업데이트 되길 제안했습니다.

그러나 내부 회의 결과, 기존의 그룹 A안 디자인도 의미를 이해할 수는 있으며, 가로 스와이프보다 세로 스크롤이 더 편리하다는 주장도 나왔습니다. 이에 따라 디자인팀은 A/B 테스트를 진행하고, 결과가 150% 이상 차이가 나면 그래픽 요소를 전면적으로 도입하기로 협의했습니다.

 

 

 

뱅카우 투자팁 A/B 테스트 결과

 

테스트 조사는 6월 20일부터 7월 2일까지 진행되었으며, 총 4,850명을 대상으로 각 그룹(A/B) 별로 약 2,400번의 이벤트를 발생시켜 이루어졌습니다.

그 결과, 기존의 그래픽이 없는 A 안보다 그래픽을 활용한 B 안이 더 효과적이라는 가설이 입증되었습니다. 사용자들은 B 안의 그래픽과 텍스트를 통해 조각 투자와 한우 투자에 더욱 관심을 가지게 되었으며, 1인당 평균적으로 15번 클릭할 정도로 정보를 적극적으로 탐색하는 결과를 보였습니다.

 

※ 조사 당시 투자 팁은 그룹 A안과 B안 모두 총 8개의 콘텐츠가 같은 정렬순서로 나열.

 

B 그룹의 사용자들이 투자 팁을 38,369번 클릭한 반면, A 그룹은 7,058번 클릭했습니다. 이를 통해 B 그룹의 투자 팁 전환율이 A 그룹 대비 446% 더 높다는 것을 확인할 수 있었습니다. 또한, 노출 1인당 평균 클릭 횟수에서도 큰 차이가 나타났습니다. A 그룹은 평균 2회 클릭한 반면, B 그룹은 평균 15번 클릭하여 새로운 디자인이 사용자들의 관심과 참여를 훨씬 더 많이 끌어냈음을 알 수 있었습니다.

이 결과로 뱅카우 그래픽 디자인 시스템이 사용자 경험을 크게 향상시킬 수 있음을 증명했습니다.

 

A/B 테스트 중

그래픽 디자인 시스템을 활용한 투자팁 일러스트

---

 

#05 | 그래픽 디자인 시스템 회고

뱅카우 2D 그래픽 디자인 시스템을 만들면서 느낀 점은 다양한 동작을 미리 만들어두는 것이 중요하다는 것이었습니다. 비율 가이드가 있더라도 앉거나 숙이는 등의 다양한 동작은 필요할 때마다 많은 편집이 필요했기 때문입니다. 그래서 앞으로는 다양한 동작을 추가하고, 여성 캐릭터, 농장주 캐릭터, 농장, 뱅킹 등 뱅카우를 표현하는 다양한 그래픽 요소들을 추가할 계획입니다.

A/B 테스트를 통해 그래픽 디자인으로 커뮤니케이션을 더 효과적으로 표현할 수 있다는 점을 증명한 만큼, 추후 뱅카우 그래픽 디자인의 업데이트 과정에서 공유하고 싶은 내용이 많아진다면 새로운 글로 찾아뵙겠습니다. 긴 글 읽어주셔서 감사합니다!

 

---

 

#06 | 다음 편 예고

다음 편에서는 뱅카우 계좌 송금 플로우 개선 작업에 대해 소개하겠습니다. 투자 신청 과정에서 10명 중 8.8명이 이탈할 만큼 큰 문제가 있었는데, 이를 UX/UI 만으로 개선하여 하루 만에 10명 중 9.4명이 투자 신청을 완료하도록 바꾸었습니다. 이 유의미한 성과에 대해 다룰 예정이니 많은 기대 부탁드립니다!

---