[TIL] Figma: MVP 서비스 (완) 💡

개요

푸드레인
우리가 잡았던 모델은 푸드레인이다. 기업 간 거래를 담당하는 B2B 이커머스 기업으로 주로 디저트 카페 창업자들을 타켓으로 판매하는 상품을 가지고 있다. 앱 출시하려고 한 흔적이 보이지만 아직 제대로 론칭된 결과가 보이지 않았기 때문에 MVP 앱을 만들었다.
[TIL] Figma: 프로토타입핑
초기에 잡았던 플로우는 이전 글에서 확인할 수 있다.

---

초기, 랜딩 페이지

• 푸드레인의 정확한 의미는 모르지만 직관적으로 '하늘에서 음식이 내린다면' 이라는 영화에서 영감을 받아서 푸드레인의 브랜드 컬러와 섞어서 만들었다.
• 초기 랜딩 페이지는 다음과 같이 구성했다. 우리는 구매 플로우에 집중하므로 다른 기능을 상게하게 정의하지 않았다.

  검색, 인기상품, 신상품, 할인상품, 하단[앱바], 상단[헤더]

---

샘플 상품, 제품 상세 페이지

• 샘플 상품을 5가지 제품 이상으로 즉, 5개 단위 한상자로 판매하는 정책을 운영하고 있다. 기존 사용했던 직접 타이핑을 하는 방식보다는 직관적으로 세부 분류를 통해 어떻게 구성할 지 보여주는게 더욱 좋은 방법이라고 생각한다. 샘플 상품은 장바구니 혹은 바로구매가 가능하다.
• 제품 상세 페이지에서 기능은 다음과 같이 구성되어 있다. 여기서 가장 중요한 것이 도착 예정일이다. 재고마다 도착할 수 있는 시간이 다르므로 주문 상품 중 가장 늦게 출고되는 기준으로 재고를 기준으로 날짜 지정을 해야하기 때문이다.

  공유, 할인율, 원산지, 도착 예정일, 찜, 장바구니

  상세 페이지에는 장바구니를 통해서만 결제할 수 있다.(다른 도매상품을 둘러보게 하기 위함) 장바구니에 담기 버튼을 누르면 수량을 조절할 수 있는 오버레이를 확인할 수 있다.

---

장바구니, 주문서, 배송받을 날짜, 주문 상세 페이지

• 샘플과 기존 상품 도매구매에 둘 다 적용되는 장바구니 페이지는 선택해서 삭제하거나 수량 조절을 할 수 있는 플로우는 만들었다.
• 주문서로 넘어가서 사업장이기 때문에 주소지 변경에 대한 기능을 넣지 않았고 현금영수증을 위한 체크박스를 옵션으로 넣었다. 주문내역에서는 할인쿠폰 내역, 결제 수단에서는 각 앱카드, 무통장 입금, 신용카드를 넣어 다양한 채널을 제공했다. 주문 확정을 누르면 배송 날짜를 지정하는 오버레이가 뜨면서 주문이 완료된다.
• 주문 상세 내역에는 아직 결제에 대한 내용만 담았기 때문에 제품명, 금액, 기간에 대한 내용만 정의했다.
  

---

대기, 실패, 비어있음, 완료 안내 페이지

실제로 서비스는 톤엔 매너가 굉장히 중요하므로 직접 캐릭터를 그려서 통일감을 주고 싶었지만 시간관계상 가장 다채로운 이미지를 가진 이모지를 채택했다.

[TIL] PM의 심리학, 행동경제 맛보기 👅
앞서 배운 피크엔드 법칙,도허트 임계를 적용시켜 오류나 불편함이 있을 때는 충분한 안내문구를 주문을 완료했을 때는 장난스럽게 보이지 않게 일부러 이모지보다는 다소 딱딱한 아이콘을 채택하여 사용하였다.

---

다른 조 발표를 듣고 생각할 부분

• 익명성에 대한 정책은 어떻게 설정할지?
• 기존의 사용자를 어떻게 훅킹할 것인지?
• 비즈니스 모델은 무엇인가?

사실 이미 어느정도 구축되어 있는 서비스이기도 하고 이커머스를 어느정도 맛본 경험이 있어서 빠르게 만들었지만 "새로운 서비스를 만들어봤다면 어땠을까..?" 아쉬움도 남아있다.

사실 로그인 기능도 넣었는데 안중요해서 안넣음

오늘로서 공식적인 데이터 드리븐 수업은 끝이 났다.
비록 한달도 안되는 짧은 시간이었지만 좋은 기획자들을 만나 각자 다른 인사이트를 나누는 순간에 흥미가 느껴졌다. 작은 선물도 받고 🥹 한 달정도의 여정이 아쉽게 느껴지도록 만들어주신 동료 기획자들에게 감사드린다.

---

Reference ✍️

https://www.foodrain.co.kr/HPG/index.aspx