컬리의 퀵메뉴 제작기

예전 다니던 스타트업에서 퀵메뉴 기능을 도입해 어느정도 유의미한 성과를 냈던 기억이 있는데요. 비슷하게 컬리에서도 '퀵메뉴' 기능을 도입하여 성과를 냈었던 사례에 대해 공유드립니다. 👁️ 컬리의 퀵메뉴는 어떤 기능인지? 컬리의 메인 배너 하단에 위치한 퀵메뉴는 컬리에서 제공하는 다양한 서비스, 이벤트 페이지 등의 메뉴로 빠르게 진입할 수 있는 역할을 하는 구좌입니다. 🏃‍♂️ 퀵메뉴는 왜 생기게 되었는지? 컬리 매출에 기여할 수 있는 메뉴들이 점점 늘어나고 있는 상황에 이를 유저에게 공급하려는 비즈니스 목표로부터 시작한 기능입니다. 유저 진입율이 높은 홈 화면에서 다양한 게이트를 제공해 유저가 새로운 메뉴를 발견하고 빠르게 진입할 수 있는 영역을 확보한 것이 현재의 퀵메뉴입니다. 이러한 목표에 부합할 수 있도록 신규 비즈니스, 시즈널한 이벤트 페이지 등의 강조가 필요한 메뉴를 제공하고 있습니다. 🧘🏻‍♂️ 퀵메뉴 제작하기 1. 퀵메뉴 구조 설계 * 프로젝트 초기에 후보로 논의되던 최소 4-5개의 메뉴가 포함될 수 있어야 했고, 메뉴 교체를 유동적으로 운영할 수 있도록 구조를 고려 (메뉴의 개수에 구애받지 않고 메뉴를 운영하며 UI 변형 없이 쉽게 추가하고 뺄 수 있는 구조) 2. 퀵 메뉴 아이콘 스타일 * 각 메뉴가 어떤 메뉴인지 직관적으로 이해를 돕는 메뉴 아이콘 적용 * 퀵메뉴는 유저가 컬리 앱 진입 시 가장 먼저 확인하는 첫 화면에 위치해 있기에 신규 그래픽 스타일을 적용함으로써 컬리에 신선한 인상을 줄 수 있을 것으로 판단 3. 퀵메뉴 아이콘 스타일 최종안 * 라인 타입의 한계를 보완하면서, 신선한 인상을 줄 수 있는 솔리드 타입 아이콘 * 컬리에서 시도하지 않았던 스타일이지만, 기존 컬리 기조를 해치지 않는 중간지점을 찾고, 간결하고 직관적이면서 너무 팬시하지 않은 스타일로 제작 🙆🏻‍♂️ 퀵메뉴 아이콘으로 지표 상승시키기 퀵메뉴 영역에서 한시적으로 돋보여야 하는 기간제 이벤트 메뉴 등 위계를 높여야 하는 메뉴이거나 후킹한 디자인을 보다 자유롭게 표현하기 위해 모션 아이콘을 도입했습니다. '컬리 멤버스' 메뉴는 컬리 멤버십을 구독할 수 있는 랜딩 페이지인데 이후 멤버십 가입율을 상승시키기 위해 랜딩 페이지에 더 많은 유저가 진입할 수 있도록 후킹한 모션 아이콘 디자인을 적용시켰습니다. 구독 페이지에 진입하지 않고도 혜택을 확인할 수 있도록 모션을 활용해 구독료, 혜택을 번갈아가면서 보여주게 되었습니다. 🤔 퀵메뉴가 나아갈 방향 비즈니스 임팩트를 내기 위해 아이콘을 강조하다보니 시각적 피로도가 증가하기도해 밸런스를 조절하는 과정이나, 유저 경험을 고려했을 때 더 적합한 메뉴가 있을지 고민이 필요합니다. 꾸준하게 유의미한 구좌로 만들기 위해 개선해야할 숙제가 남아있습니다.