BuzzBenefit Web UI/UX 가이드

개요

  • 웹 표준 제품은 각 섹션별 순서 및 디자인 일부 커스텀이 가능합니다.

  • UI/UX 선택사항 문서를 다운로드해서 각 시트별 선택 사항을 기입한 후 버즈빌 연동 담당자에게 전달해 주세요.

제품 구조

  • 섹션 순서를 자유롭게 배치 가능합니다.

  • 1page, 2page 형태로 섹션에서 페이지로 이동하도록 다양한 구성 가능합니다.

Buzzbenefit Web UI

모든 UI는 ON/OFF가 가능하며, 각 섹션 별로 별도로 구성이 가능합니다.

섹션은 자유롭게 순서를 변경하여 매체사에 적합한 Buzzbenefit Web으로 커스텀 할 수 있습니다.

공통영역

image-20240807-084442.png
문의하기 UI

문의하기

  • 문의하기 진입점 UI를 매체사의 스타일에 맞게 상단바와 플로팅 버튼으로 선택이 가능합니다.

image-20240807-094535.png
적립 내역 UI

적립내역

  • 적립 금액을 월별로 보여줄 수 있고, 진입점 클릭 시 적립 내역 페이지로 이동하여 월별 적립 내역을 확인할 수 있습니다.

포인트 단위 설정

  • 원하는 포인트 단위를 설정 할 수 있습니다.

  • ex) P, 원, C 등등

 

프로모션 섹션

 

출석체크(클릭형)

  • 화면에서 리워드 받기 버튼만 클릭하여도 바로 출석이 되는 출석체크 형태입니다.

  • 빠르게 출석체크를 할 수 있다는 장점이 있습니다.

  • 캘린더형과 클릭형은 둘 중 한 가지만 적용이 가능합니다.

 

출석체크(캘린더형)

  • 출석체크 캘린더가 제공되는 출석체크 형태입니다.

  • 캘린더에서 출석체크를 한 이력을 알 수 있다는 장점이 있습니다.

  • 캘린더형과 클릭형은 둘 중 한 가지만 적용이 가능합니다.

 

배너 프로모션

  • 링크로 이동되는 형태의 배너를 운영할 수 있는 UI입니다.

  • 클릭형 출석체크와 함께 운영하면 두 개의 UI가 모두 노출이 되고, 캘린더형 출석체크와 함께 운영을 한다면 하나의 UI에서 여러 배너가 롤링되는 형태로 적용됩니다.

광고 섹션

섹션 타이틀

  • 받을 수 있는 전체 포인트를 보여줄 수 있고 원하는 타이틀 설정이 가능합니다.

    • 포인트 표기가 필요 없다면 포인트 표기 없이 타이틀만 설정할 수도 있습니다.

 

멀티 미션 진입점

  • 현재 진행 중인 멀티 리워드가 지급되는 미션을 모아서 보여줄 수 있고 전체 멀티 리워드 미션이 모여있는 페이지

  • 개발 중인 기능으로 UI가 변경될 수 있습니다.

 

광고 피드 노출 형태

  • 카드형

    • 광고 소재를 부각하여 유저의 관심을 유발하는 형태로 카드형 피드를 구성할 수 있습니다.

    • 일반적인 리워드 광고 피드 형태입니다.

  • 리스트형

    • 광고 소재를 상세 페이지에서 보여주고 타이틀만 노출하여 깔끔한 피드를 구성할 수 있습니다.

    • 깔끔한 UI를 강조하고 많은 광고를 유저에게 보여주는 피드 형태입니다.

단, 리스트형 피드 형태에서도 노출형 광고는 캐러셀로 노출됩니다.

  • 광고 소재가 노출되어야 노출형 광고 매출이 발생되기 때문.

  • 캐러셀형

    • 카드형으로 광고 소재는 부각하면서 가로형 피드로 세로 UI를 많이 차지하지 않는 피드를 구성할 수 있습니다.

    • 주로 프리미엄 광고 영역을 별도로 구성하거나(내부 이벤트 포함), 리스트형에서 노출형 광고를 보여줄 때 사용하는 피드 형태입니다.

 

광고 분류 필터

  • 유저가 참여하고 싶은 유형의 광고만 볼 수 있는 필터 UI를 설정하여 유저의 광고 참여 경험과 광고 효율을 높일 수 있습니다.

  • 필터의 광고 유형 설정, UI 스트링은 연동 담당자에게 시트로 전달주시면 커스텀이 가능합니다.

 

더 보기 버튼

  • Buzzbenefit Web을 2depth 이상으로 구성할 때 설정하는 버튼입니다.

  • 원하는 광고 섹션만 더 보기 버튼을 추가할 수 있고, 더 보기 클릭 시 다른 페이지로 이동됩니다.

  • 2depth 이상의 페이지 구성을 원하신다면 연동 담당자에게 UI 선택 사항을 페이지별로 구성하여 전달해 주시면 커스텀이 가능합니다.

 

시트

https://docs.google.com/spreadsheets/d/1rxG-xRR1DAVFZ7NFfexj765UqAVuK3tO_9jnda-zKW4/edit?gid=1431984558#gid=1431984558