︎This Site Is Optimized for Viewing in Chrome Browser Via Desktop

Hotto Motto Delivery App




개요 Overview

일본 가정식 도시락 브랜드인 호또모또의 국내 딜리버리 앱 UX 디자인

<제작 정보>
360*640px (Android, Google Nexus 5X)
Figma, Adobe Photoshop


Wireframe



Prototype 1



Prototype 2


전략 Strategy

-한국의 호또모또 지사는 전국에 12곳에 개점했으며, 일본(링크)과 달리 한국(링크)은 온라인과 모바일의 공식 판매 루트가 마련되있지 않습니다. 지금도 배달앱을 통해서 배달을 시킬 수는 있으나, 호또모또라는 브랜드가 가진 장점을 좀더 부각해서 알리고 보다 넓은 가맹점 확보를 위해서는 자체 딜리버리 앱이 있으면 유리할 것입니다.

-간편하지만 영양가 높고 맛도 있는 도시락을 주문하고자 하는 1인 가구와 단체주문이 필요한 바쁜 직장인들을 타겟화했습니다. 




컨셉 Concept

1. 타이포그래피와 디자인 요소 Typography & Design Element

-타이틀 폰트에 직사각형 모듈의 지마켓 산스 고딕을 사용해서, 네모난 도시락 용기 형태에 친숙한 소비자들이 편하게 받아들일 수 있게끔 의도했습니다.

-서브 타이틀 폰트로는 나눔스퀘어라운드와 본고딕을 사용해서 타이틀 폰트와 인상을 통일감있게 맞추었습니다.

-아이콘 세트는 마치 오리가미 종이접기를 한 듯 모서리가 각져있는 사각형 형태에서, 하나하나 파생시켜서 디자인 했습니다. 최대한 담백하면서도 세련된 인상을 주고자 했습니다.  

-전통적인 일본풍의 미감은 국내 앱 론칭이니만큼 최대한 절제하고자 했으며, 제품 상세페이지에서 패턴과 붓글씨 스트립트형의 서체 정도에만 반영했습니다.  


2. 컬러 Color

-메인 로고의 붉은 컬러와 같은 계열인 밝은 오렌지, 보색 계열인 그린 계열 사용해서 전반적으로 식감을 돋구는 이미지를 주고자 했습니다.  



사용성 Usability

1. 정보의 중요도 우선순위

상품은 인기 메뉴>시즌메뉴>고급 도시락의 순서로 비중을 둬서 부각 했으며, 시장에서 호또모또의 인지도가 현재 부족한 상태를 고려해 ‘배달가능 지역 확인’ 메뉴나 도시락 이용 관련 팁 메뉴들도 같이 제공.

2. 주문하기/장바구니 담기/결제하기 버튼

상품 선택후 고려하고 선택해야할 항목이 많아져도 바로 구매과정으로 갈 수 있게끔 최대한 주목성 높게 디자인.