뱅카우 2.0 홈 화면에 엄청 큰 송아지 캐릭터가 등장한 이유

안녕하세요, 뱅카우 UX/UI 디자이너 최가영입니다.

 

2024년 1월 11일,

24년을 1++로 가득 채우자는 의미를 담아서

23년 반년동안 정책을 다듬고 리디자인하고 재설계한 뱅카우 2.0의 오픈베타서비스를 출시합니다.

 

오늘은 저희가 곧 선보일 뱅카우 2.0의 UX 콘셉트와 이를 반영한 홈 화면 디자인 과정에 대해 소개해드리겠습니다. 

뱅카우 3.0 홈 화면

---

#00 | 뱅카우 2.0 탄생 배경_ 태초에 사용성 이슈가 있었다

 

뱅카우는 2021년 5월에 처음 출시되었으며, 이후 2년 동안 여러 번 업데이트되었지만 전반적으로 사용성이 크게 개선되지 않았다는 의견이 많았습니다.

 

그래서 뱅카우 팀은 이 문제를 해결하기 위해 뱅카우가 탄생하고 받은 전체 문의내역을 분석했고 총 2,032건의 사용성 이슈를 발견했습니다.

 

그리고 MECE(Mutually Exclusive and Collectively Exhaustive) 기법을 활용하여 서비스와 기능이 사용자에게 어떤 이익을 제공하는지, 콘텐츠가 매력적인지, 원하는 정보를 쉽게 찾을 수 있는지, UI(User Interface)가 사용자에게 쉽게 인식될 수 있는지 점검하며 문제를 정의하였습니다.

문제 1. 내가 키우는 송아지 정보를 찾을 수 없어요.
문제 2. 내가 키우는 송아지가 잘 크고 있는지 모르겠어요.
문제 3. 언제 수익 정산되는지 알고 싶어요.
문제 4. 용어가 어려워요.

 

---

 

#01 | 홈 화면에서 내 송아지와 투자 과정을 한 눈에 

 

뱅카우 팀은 여러 불편 사항 중에서도 고객 문의가 다수 발생했던 이슈 3가지에 집중했습니다.

 

특히 문의가 많았던 이슈 Top 3
펀딩 과정의 전체 프로세스를 알기 어렵다 / 출하·판정·경매 등 자세한 일정을 알고 싶다 / 내 송아지를 빠르게 찾고 싶다

 

그리고 개인화와 다양한 서비스와의 연결성을 고려하여, 유저들이 홈 화면에서 가장 원하는 정보를 쉽게 찾을 수 있도록 뱅카우 2.0 홈 화면을 다음과 같이 개선했습니다.

• 키우고 있는 송아지를 바로 확인해요.
• 수익 실현까지 남은 시간을 바로 확인해요.
• 투자 금액과 수익률을 바로 확인해요.

 

그러나 뱅카우 팀은 유저가 원하는 정보가 구체적으로 무엇인지, 명확한 세부 근거를 찾을 수 없었습니다.

간단하게 생각하면 모든 정보를 제공하는 것이 가장 이상적이지만, 홈 화면의 제한된 공간과 비용 등의 제약 때문에 모든 정보를 표현하기엔 어려움이 따랐습니다. 그래서 어떻게 하면 한눈에 이해하기 쉽게, 최대한 많은 정보를 효과적으로 홈 화면에 담을 수 있을지 고민했습니다.

 

유저가 키우는 송아지와 관련하여 보여줄 수 있는 정보 
- 송아지 식별정보 (이력번호, 이름, 사진, 캐릭터)
- 송아지 생애주기 (입식, 사육, 출하, 판정, 경매, 사고)
- 송아지 돌봄정보 (사료, 관리)
- 송아지 건강정보 (백신, 건강검진)
- 송아지 유전정보 (대표유전능력, 냉도체중, 배최장근단면적, 등지방두께, 근내지방도)
- 송아지 출하정보 (예상출하일)
- 송아지 판정정보 (육질등급, 육량등급, 도체중)
- 송아지 경매정보 (판매수익)
- 송아지 결산정보 (투자회원정보, 투자금, 투자지분, 결산이익금, 결산이익률, 정산결과)

 

그런데 정보의 성격만 다를 뿐이지, 모두 고객 수익과 연관되어 있어 사실상 무엇 하나 중요하지 않은 정보가 없었습니다. 이에 뱅카우 팀은 어떤 정보를 제외하는 게 좋을지 판단이 서지 않아, 디자인 프로토타입(prototype)을 만들어 뱅카우 앱을 잘 아는 팀원과 경험이 없는 팀원을 모두 테스트 대상으로 선정하여 테스트를 진행했습니다.

 

'총 보유 송아지 수와 빠른 EXIT 송아지를 찾아주세요'라는 과제를 제시해 진행한 테스트는 30초 이내 모든 팀원이 원하는 정보를 찾으며 성공적으로 마무리됐습니다. (결과: 100% 성공)

 

 

---

 

#02 | 뱅카우와 세 가지 C_뱅카우의 가치를 담은 2.0 홈 화면

 

그렇게 모든 팀원이 필요한 정보를 찾는 과정과 그에 소요되는 시간을 관찰한 뱅카우 팀은 홈 화면을 알림, 서비스소개 배너, 한우투자, 새 소식, 자산, 콘텐츠 등 크게 6가지 영역으로 구분했고, 각 영역에서 상세정보를 확인할 수 있도록 '식별정보'와 단 1개의 '코어 정보'만 남겼습니다.

 

이런 내부 검증 단계를 거친 후 뱅카우의 3가지 가치(연결Connect / 편리함Convenient / 협력Co-operative)를 바탕으로 UX 콘셉트를 설정하고 디자인 작업을 진행했습니다. (기회가 된다면 언젠가 UX 콘셉트에 관한 내용도 자세히 다루고자 합니다.)

 

뱅카우와 3가지 C

• Connect 연결된
  송아지와 농가, 투자자를 연결해 펀딩 과정뿐만 아니라 성장 과정에도 흥미 높이기

• Convenient 편리한
  송아지 정보, 농가 정보, 한우 시장 동향, 유전정보, 투자 등 송아지의 투자 가치를 쉽게 파악할 수 있는 경험 제공하기

• Co-operative 협력하는
  농가뿐만 아니라 수의사, 운송기사 등 여러 파트너와 협력해 함께 자산을 키우는 경험 전달하기

 

뱅카우 2.0 UX Concept

 

---

 

1. Connect | 송아지 한 마리, 한 마리와 연결되는 기분을 느껴요

뱅카우 2.0 Home / Focus view mode

 

뱅카우 팀은 유저에게 1) 농가와 연결되어 있다고 느끼게 하면서 2) 송아지를 한 마리, 한 마리 직접 키우는 듯한 경험을 제공하고자 다음 2가지 목표를 설정했습니다.

 

뱅카우 2.0 UX 기획 목표

• 뱅카우만의 차별화를 둔 투자서비스 UX 구상하기
• 일회적인 경험에 그치지 않도록 전체 펀딩 과정에 흥미 느끼게 하기

 

이 과정에서 유저가 키우는 송아지의 현재 상태를 Focus view 모드를 통해 하나씩 빠르게 확인할 수 있게 만드는 방법을 생각했습니다. 이제부턴 키우고 있는 송아지의 상태가 변경되면, 바로 인지할 수 있습니다.

 

또 사용자 편의성을 고려해  Focus view 외에 List view 모드도 마련했습니다. 아무래도 많은 송아지를 보유한 유저의 경우, 송아지를 한 마리씩 넘겨 보는 게 불편할 수도 있기 때문입니다. 해당 모드를 활용하면 유저는 자신이 보유한 송아지의 모든 새 소식정보를 한눈에 리스트로 체크할 수 있습니다.

 

이 외 키우고 있는 혹은 다 키운 전체 송아지 목록과 사육 상태를 보고 싶다면, 송아지 view 모드 바로 아래 위치한 '내 송아지 전체 보기' 버튼을 누르면 됩니다.

 

---

 

2. Convenient | 다 같아 보이던 송아지가 나만의 매력적인 송아지로 

뱅카우 2.0 농가별 Focus view mode

 

뱅카우 디자인팀이 뱅카우 2.0의 디자인을 구상하며 가장 고민했던 부분은 '다 똑같아 보이는 송아지를 1) 어떻게 한눈에 쉽게 구분하면서 2) 유저에게 시각적으로 매력적인 느낌도 줄까?'였습니다.

 

이를 해결하기 위해 먼저 농가별로 각 송아지에 고유한 캐릭터를 부여하고, 농가 내에서도 송아지들을 쉽게 구별할 수 있도록 고유한 배경 컬러 코드를 생성했습니다. 이렇게 하면 유저가 키우는 각 송아지를 쉽게 구분할 수 있게 하면서도 유일무이하게 보일 수 있지 않을까 생각했습니다.

 

 

송아지 캐릭터화에 따른 기대 효과

• 유저가 쉽고 편리하게 원하는 송아지를 찾을 수 있어요.
• 구매 과정이 즐거우니 이탈률이 줄어요.
• 다른 농가는 어떤 캐릭터를 가지고 있나 호기심이 생겨요.
• 해당 캐릭터를 가진 농가의 정보를 확인하게 되고 추가 구매를 고려할 수 있어요. 
• 송아지의 새 소식을 캐릭터가 친근하게 알려주니까 정보를 발견하기도, 이해하기도 쉬워요. 

 

---

 

3. Co-operative | 송아지의 생동력과 융합의 개념을 표현할 수 있도록

뱅카우 2.0 Focus view motion

 

농가별 캐릭터를 만들고 배경 컬러 코드를 추가한 후에는 이를 어떤 형태로 표현할지 고민했습니다.

 

뱅카우는 이를 위해 Growing Chubby Circle이라는 모션그래픽을 구상했습니다. 살아있는 송아지라는 생물자산의 '생동력'을 나타내기 위해, 마치 작은 심장이 뛰는 듯한 느낌의 모션을 생각한 건데요.

 

뱅카우를 통해 연결된(Connect) 다양한 사람들이 한데 모여(Integration) 함께 성장한다(Growing Circle)는 의미가 전달되면 좋겠습니다. 또 전체적으로 동글동글한 송아지 캐릭터와 조화를 이루도록 디자인했습니다.

Growing Chubby Circle : 송아지의 ‘생동력’과 다양한 파트너가 함께 키운다는 ‘융합’을 표현하기 위해 물성을 활용한 그래픽

 

---

 

#03 | 다음 편 예고

 

다음에는 뱅카우 캐릭터 제작기로 찾아오겠습니다. 

1월에 새롭게 찾아올 뱅카우 2.0도 많은 관심 부탁드립니다. :)

 

 

뱅카우의 다른 소식이 궁금하다면

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

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

[뱅카우] 빠르고 편하지만, 보안성은 높이는 회원가입 / 로그인

[뱅카우] 빠르고 편하지만, 보안성은 높이는 회원가입 / 로그인

 

 

---