GNB, SNB로 문제 해결하기
디자이너가 작성하는 PRD, 첫 번째
프로젝트
배경
지그재그 파트너센터에서 파트너라운지로 이동할 수 있는 아웃링크 버튼이 추가되어야 하는 태스크를 할당 받았다. 파트너라운지는 이번에 새로 런칭하는 사이트(8월 24일 정식 오픈!)로, 런칭 배경을 간략히 설명하자면 아래와 같다.
카카오스타일의 Win-Win 가치관을 지속적으로 전달해 더 많은 신규 파트너사 유입 및 기입점사에게는 실제 플랫폼과 입점사의 동반성장을 체감할 수 있도록 콘텐츠를 제공한다.
성장에 도움이 되는 핵심 정보를 제공해 파트너사들의 스토어 운영 에너지를 최소화한다.
상황에 따라 다양한 방식으로 유연하게 커뮤니케이션하여 파트너사와 단단한 관계를 구축한다.
파트너 담당 마케터는 채널간 유기적인 연결을 통해 파트너의 이탈 방지 및 신규 입점을 유도하고 싶다. 장기적으로는 이를 통해 배민, 에이블리처럼 마케팅 채널을 하나로 통합해 운영 및 관리의 효율을 높이고자 한다.
프로덕트 디자이너인 나는 파트너가 파트너라운지를 필요로 하는 맥락에 적절한 형태와 위치의 연결점을 자연스럽게 제공하고 싶다. 이를 위해 파트너 입장에서 파트너라운지가 어떤 역할을 할 수 있는지, 얼마만큼의 우선순위를 갖는지, 어떤 맥락에서 찾게 될 것인지에 대한 이해가 필요하다.
가설
입점한 파트너는 파트너라운지를 통해 판매 및 운영에 유의미한 정보를 습득할 것이다. 이를 통해 습득한 정보를 파트너센터에서 실제 운영에 적용할 것이다.
→ 파트너센터와 파트너라운지를 자유롭게 오갈 수 있는 연결점이 필요하다.
미입점 파트너는 파트너라운지를 통해 정보를 습득한 뒤, 입점을 고려할 것이다.
→ 파트너센터 로그인/입점 신청 화면에서 파트너라운지 연결점이 필요하다.
요구사항(해결방안)
위 배경을 통해 요구사항 및 해결방안을 요약하자면 다음과 같다.
요구사항: 파트너센터와 파트너라운지를 연결하고 싶다.
해결방안: 파트너센터에서 파트너라운지로 이동할 수 있는 연결점을 제공한다.
디자인
연결점을 어디에 둘 것인가?
네이버 스마트 스토어, 에이블리, 쿠팡, 리디 등의 레퍼런스를 참고해보니 주로 GNB, SNB, FNB에 위치해 있었다. 그 이유는 무엇일지 고민해봤다. GNB 또는 FNB에 배치시키면 자연스럽게 패밀리사이트임을 인지시킬 수 있을 것이고, SNB의 최하단에 운영 정보 등과 함께 배치시켜 문의를 필요로 하는 맥락에 해당 사이트로 유도하는 넛지 역할을 기대할 수 있을 것이라 판단했다. 데스크 리서치를 통해 얻은 인사이트 및 결론은 아래와 같다.
1. 사용자의 익숙한 경험을 활용한다. (타사를 통해 학습한 경험)
파트너센터에 입점한 파트너 대부분은 에이블리, 브랜디, 네이버스마트스토어 등 다양한 플랫폼에 입점해 있다. 따라서 타 플랫폼에서 경험한 것을 토대로 사용자가 새로 학습할 필요 없이 쉽게 유추할 수 있도록 한다.
2. 사용자의 맥락을 고려한다.
기존 GNB는 파트너센터 로고, 계정 정보, 도움말, 로그아웃 기능을 제공하고 있다. 파트너라운지는 파트너에게 유의미한 도움을 주거나 인사이트가 될 수 있는 데이터를 제공하는 역할을 갖고 있기 때문에 '도움말'과 함께 배치시킨다면 도움을 필요로 하는 사용자에게 자연스럽게 유입을 유도할 수 있을 것이라 판단했다.
SNB 하단에는 고객센터 전화번호 및 운영 시간을 노출하고 있다. 이와 함께 파트너라운지를 노출시켜줌으로써 파트너가 고객센터에 전화로 문의하기 전에 겪고 있는 문제와 관련하여 도움을 줄 수 있는 곳임을 넛징할 수 있을 것이라 판단했다.
FNB는 화면별로 보여지는 데이터의 양이 천차만별이고 따라서 화면의 Height가 길 경우 해당 영역을 확인하거나 인지하기 어려울 것이다. 그렇기 때문에 유의미한 역할을 하기 어려울 것이라 판단했다.
위 내용을 통해 GNB, SNB 2곳에 연결점을 추가하는 것으로 결정했다.
연결점을 어떻게 보여줄 것인가?
GNB
현재 파트너센터 GNB는 크게 좌측 영역과 우측 영역으로 나뉜다. 좌측은 파트너센터 로고, 우측은 로그인 시 계정 정보와 로그아웃, 도움말 버튼이 있다.
1. 버튼 위치
A안(좌측에 파트너센터 로고와 함께 배치)의 장점은 파트너센터 로고와 함께 배치시켜 패밀리사이트라는 것을 인지시킬 수 있다는 것이다. 단점은 버튼으로서의 어포던스가 부족하다는 것, Disabled 상태의 UI 스타일 때문에 눈에 잘 띄지 않는 다는 것이다. 이외 동료들에게 받은 피드백은 '파트너센터 내 해당 연결점의 우선순위나 중요도가 그리 높지 않고, 버튼으로 인지하기 어려운 UI' 등이 있었다.
위 과정을 통해 결론적으로 B안을 채택했다. A안의 단점이었던 버튼 어포던스는 우측의 여타 버튼들과 함께 배치시켜 어포던스를 높였다. 또한 해당 위치에 둠으로써 파트너센터 내 우선순위 또한 낮췄다. 다만, 신규 론칭임을 인지시키기 위해 N(New) Badge Icon과 함께 최초 진입 시 Tooltip label로 신규 오픈 내용을 포함해 한번 더 강조해 주기로 했다.
2. GNB 노출점 추가
기존 로그인 화면에서는 GNB가 노출되지 않아 연결점을 위한 공간을 따로 마련해야 했는데, PO가 '로그인 화면에서도 GNB를 노출시키면, 에셋을 재활용할 수 있어 작업 공수도 덜고 효율적이지 않겠냐'는 제안을 했다. 프론트엔드 개발자도 일정상 가능하다는 의견을 주었고 백엔드 쪽에서 로직을 건드는 게 아니니 개발 공수 측면에서도 OK, UX 측면에서도 로그인 전/후 일관된 경험을 제공할 수 있다는 측면에서 OK! 바로 수용했다. 역시 집단지성이 최고!
SNB
기존에 텍스트로 표기되어 있던 정보와 합치게 되면서, 각자 다른 성격을 지닌 정보가 구분될 수 있도록 카테고리 텍스트를 추가해 분리했다. 또한 아웃링크 버튼에 대한 어포던스를 높이고자 Outlink 아이콘을 함께 배치했다.
성과 측정
어떤 결과를 기대할 수 있는가?
프로젝트의 목적은 파트너센터와 파트너라운지 간의 유기적 연결이다. 파트너에게 적절한 곳에 적합한 형태의 연결점을 제공함으로써, 기존 입점 파트너의 이탈을 막고 신규 파트너의 입점을 유도하는 것이다. 그렇다면 이러한 목적 달성 여부를 어떻게 측정할 수 있을까?
사용자가 해당 연결점을 인지하고, 이용하고 있는가?
1. 로그인 전, GNB > 파트너라운지 클릭율
= 파트너라운지 버튼 클릭 수/로그인 페이지 전체 진입 수
2. 로그인 후, GNB > 파트너라운지 클릭율
= GNB 파트너라운지 버튼 클릭 수/파트너센터 전체 진입 수
3. 로그인 후, SNB > 파트너라운지 클릭율
= SNB 파트너라운지 버튼 클릭 수/파트너센터 전체 진입 수
해당 지표는 PO, FE에게 공유해 함께 검토하고 개발 시 추가했다. 파트너라운지 쪽 지표는 파트너마케팅팀에서 추가 및 관리하고 있어 따로 작성하지 않았다. 위 지표는 이후 확인하여 글 하단에 업데이트할 예정이다.
레슨런
무엇을 배웠는가?
이번 프로젝트를 통해 Web의 GNB와 SNB UI를 처음 디자인해봤다. 레퍼런스 조사 및 동료들의 피드백을 통해 배운 것이 참 많았는데 이를 나만 볼게 아니라, 다른 이들에게도 도움이 될 수 있겠다 싶어 브런치에 글을 작성하기 시작했는데 나 스스로도 많은 공부가 되는 것 같다.
UI의 기본적인 목적과 역할을 유념한다.
연결점을 어디에 둘 것이냐에 대한 리서치를 진행하면서, GNB와 SNB UI의 기본적인 목적과 역할을 다시 한번 더 상기시켰다. GNB(Global Navigation Bar)는 사이트 최상위에 위치하는 공통 네비게이션이다. 어느 화면에서든 GNB는 상단에 고정 노출되어야 한다. SNB(Side Navigation Bar)는 GNB, LNB를 제외한 나머지 메뉴가 모여있는 네비게이션이다. 파트너센터에서는 SNB 또한 Folding이 가능한 형태로 좌측에 고정 노출되고 있다. 따라서 GNB, SNB UI가 '고정 노출되어 화면 어디에서든 접근 가능하며, 네비게이션 역할을 하고 있기 때문에 파트너라운지 연결점을 노출시키기에 적합한 곳'이라는 결론을 내릴 수 있었던 것이다. 무엇이든 역시 기본에 충실해야 하는 법..!
우선순위를 고려한다.
담당하는 프로젝트에 딥 다이브 하다보면 지나치게 프로젝트에 매몰되는 경향이 있다. 이를 스스로 경계하긴 쉽지 않다. 그래서 주변이들의 피드백을 받는 것이 중요하다. 피드백을 통해 미처 고려하지 못했던 부분을 쉽게 발견하게 될 수 있다. 내겐 파트너라운지의 우선순위가 미처 고려하지 못했던 부분이었다. '파트너센터를 사용하는 파트너들에게 파트너라운지로 연결할 수 있는 연결점을 인지시킨다.'는 목적에 매몰되어 파트너센터 내에서 해당 기능이 갖는 중요도나 우선순위를 고려하지 못했다. 어찌됐든 파트너센터가 가장 중요한 기능이고, 이를 방해할만큼 더 중요한 것은 없다.
