본 프로젝트는 배달의민족 앱 내 쿠폰 사용률을 효과적으로 높이기 위한 실험적 UI/UX 개선 작업으로, 브랜드 특유의 키치하고 투박한 감성을 담아 인터랙션 중심의 화면을 설계한 프로젝트입니다. 디자이너로서 실무에 처음으로 인터랙션 UI를 설계하고 개발자와 직접 협업한 경험이었습니다.
역할 및 작업기간
UI 인터랙션(100%)
약 2주 (2018년 제작)
목표
브랜딩 인터랙션
쿠폰사용률 증가
프랜차이즈 브랜드들과의 제휴 프로모션을 통해 쿠폰을 대량으로 발행하던 상황에서, 단순 배너나 정적인 노출만으로는 사용자들의 주목도와 실제 사용률을 높이는 데 한계가 있었습니다. 이에 따라, 서비스 내부에서 시선을 끌 수 있는 인터랙션 요소를 도입해 사용자 이목을 집중시키고, 자연스럽게 쿠폰 사용을 유도하고자 본 프로젝트를 기획하게 되었습니다.
사용자가 가게 리스트에서 상세 페이지로 진입하는 순간, 인터랙션이 자연스럽게 실행되도록 트리거 조건을 설정되는 상황이며,
단순히 애니메이션을 추가하는 것이 아니라 배달의민족 특유의 ‘투박하지만 키치한’ 브랜드 감성을 시각적으로 구현하는 것이 핵심 과제였습니다.
따라서 인터랙션의 속도, 움직임의 방향, 타이밍 값 등을 조율하며 브랜드 아이덴티티를 유지하는 동시에 사용자 주목도를 끌어올리는 인터랙션을 제작하도록 했습니다.
제작
기획 단계에서 다양한 인터랙션 아이디어를 고민했습니다.
쿠폰을 딱지처럼 내려치거나, 스케일이 커지며 등장하는 등 주목도를 높이기 위한 다양한 애니메이션을 시도해보았습니다. 하지만 화면 내 중요도를 고려했을 때, 이러한 동작들은 다소 과하게 느껴졌고 전체 흐름에 방해가 될 수 있다고 판단했습니다.
결국 ‘자연스럽게 녹아드는 움직임’이라는 방향성을 설정하여, 브랜드 특유의 감성을 유지하면서도 사용자의 시선을 부드럽게 유도하는 인터랙션으로 정리하게 되었고 배달의민족 특유의 ‘투박하지만 키치한’ 브랜드 감성을 시각적으로 녹여내기 위해, 사용자의 ‘고쳐주고 싶은 심리’를 자극하는 방식으로 인터랙션을 설계했습니다.
쿠폰 UI는 일부러 기울어진 형태로 배치해 약간의 불편함을 느끼도록 유도했고, 이후 손이 등장해 쿠폰을 툭 치고 사라지며 쿠폰이 제자리로 돌아오는 애니메이션을 구현했습니다.
이 작은 개입은 단순한 움직임 이상으로 사용자에게 브랜드의 유쾌한 성격을 각인시키고, 동시에 쿠폰에 대한 주목도를 자연스럽게 높이는 효과를 주었다는 내부적인 피드백을 받아 앱서비스에 적용하게 되었습니다.
