'와디즈' MVP 기획안 구체화 [코드스테이츠 PMB 12기]

오늘은 지난주에 개선점을 바탕으로 기획했던 MVP를 조금 더 구체적으로 만든 뒤 일종의 문서화 해볼 예정입니다.

 

1. 기능 정의(백로그 작성)

지난주에 "옵션도 저장 가능한 찜" 기능을 기획했었습니다. 이와 같은 솔루션을 구현하기 위해서 세부적으로 어떤 기능이 필요한지 다시 살펴볼게요! 원래는 유사한 기능들을 그루핑 한 후 우선순위가 높은 순으로 작성해야 했는데요, 지난번에 정말 최소한의 기능들로만 선별했고, 각각의 기능들이 서로 밀접한 연관성을 갖는 플로우이기 때문에 어느 하나의 기능도 없으면 곤란합니다. 그래서 기능들을  중심으로 우선순위를 다시 정하는 것보다는 지난번에 정의한 기능 플로우(A안)를 최우선 순위로 하고, 혹여 기술상의 문제로 구현이 어려울 경우를 대비하여 구현의 방식이 더 단순한 B안(낮은 우선 순위의 plan)을 같이 작성해보았습니다.

 

이전에 정의한 A안이 더 높은 우선순위인 이유는 "수많은 옵션 중에서 내가 고려한 옵션들을 손쉽게 기억하고 싶다"는 유저들의 니즈를 고려했을 때, 상세페이지에 유저가 고려하고 있는 옵션들이 있다는 것을 시각적으로 제시했을 때 더 효과적으로 충족시켜줄 수 있으리라 생각했기 때문입니다. 만약 상세페이지에 어떠한 흔적도 없다면, 이미 보았던 펀딩이라는 사실을 잊고 다시 정보를 탐색하는 수고를 들이는 경우도 발생할 수 있기 때문입니다. 유저들이 언제나 '좋아한' 페이지를 먼저 들린 다음에 다른 펀딩페이지를 돌아보다는 보장도 없고요. 지난번 유저 인터뷰에서 보았듯이 해당 물픔을 "정말 꼭 사야해! 꼭 필요해"라는 마음으로 살펴보지 않기 때문에 제품에 대한 정보들을 주의깊게 파악하고 또 기억하고 있지 않을 가능성도 높습니다. 따라서 A처럼 [좋아한]페이지에 저장된 옵션 정보가 [상세페이지]에 동기화되었을 때 유저들에게 더 좋은 경험을 제공할 수 있으리라 생각하여 개발은 상대적으로 까다로울 수 있지만 더 높은 우선순위로 두었습니다.

 

A안 FLOW(우선 순위 높음)

1. 찜 기능 2가지 @펀딩 [상세페이지]
(1) <스토리>상단의 ♡ & 하단 네비게이션바의 ♡ 단순 클릭→하단에 알림 팝업 = 옵션 없이 해당 펀딩 프로젝트 찜하기 

☞스토리 상단의 ♡버튼은 옵션과 함께 누를 수 없는 위치에 있음. 옵션 선택을 필수로 하게 되면 해당 버튼의 위치와 구조도 변경해야 하므로 기존의 플로우 보존하고 '옵션 선택 플로우'를 (2)처럼 추가하는 형태로 기획

(2) <스토리>하단&<리워드>에서 옵션 선택 후 ♡ 클릭→하단에 알림 팝업 = 옵션 포함해서 펀딩 찜하기

☞옵션을 보고 선택할 수 있는 위치의 ♡버튼은 옵션을 선택할 수 있는 선택지도 제공. 

 

2. 옵션 다중 선택 기능

펀딩 [상세페이지], <스토리>하단&<리워드>에서 옵션 다중 선택, 선택 해제 기능

☞다중 선택이 가능한 결제페이지로 넘어간 뒤로는 ♡버튼 부재하므로 찜이 불가능. [좋아한]으로 옵션까지 저장하기 위해서는 옵션 선택 시 결제페이지로 넘어가는 것이 아니라, [상세페이지] 내에서 옵션을 다중 선택을 먼저 하도록 한 뒤에 결제나 찜을 하도록 플로우 변경이 필요함

 

3. [좋아한] 페이지에 옵션이 저장된 경우

• 1(1)로 저장된 경우: 기존과 동일
• 1(2)로 저장된 경우: 하단에 저장한 리워드 옵션명, 선택하거나 직접 입력한 추가 옵션, 옵션 가격, 남은 재고 수, 총 가격, 배송비 제시
  *저장된 옵션이 품절된 경우 해당 옵션명, 추가옵션, 가격을 명시한 텍스트 옅은 회색처리. 재고수 대신 [품절] 아이콘 제시. 총 가격은 품절된 옵션 제외하고 명시
• 펀딩 삭제 버튼, ([좋아한] 페이지 내에서의 옵션 수정은 부가적인 요인이라  MVP에서는 제외)

☞너무 많은 옵션들 중 내가 선택한 것을 쉽게 기억할 수 있어야 함. 따라서 저장된 리워드 옵션명가 추가 입력한 옵션은 필수. 또한 펀딩 결정에 중요한 역할을 하는 것이 '가격'이므로 각 옵션의 가격과 총 가격, 그리고 배송비 제시하며 펀딩 결정에 도움을 주고자 함. 그리고 각 리워드 수가 한정 수량으로 진행되는 만큼 내가 원하는 옵션이 품절되는 경우가 있음. 이 부분을 더 쉽게 확인할 수 있도록 재고 수를 같이 제시.

 

4. [좋아한] 내에서 옵션이 저장된 펀딩 프로젝트를 선택한 경우

해당 펀딩의 [상세페이지]로 이동 : <리워드>부분에 찜으로 저장했던 옵션들이 선택된 상태로 제시(동기화)

☞[좋아한]을 통하지 않고 해당 펀딩페이지에 들어갔더라도, 내가 이미 선택하고 저장했던 옵션들임을 바로 확인할 수 있도록 하기 위함. 눈으로 이미 고려 중인 옵션임을 확인하면 불필요하게 다시 정보를 탐색하게 되는 수고를 덜게 될 것으로 판단함.

 

5. [좋아한]에 이미 저장된 펀딩 프로젝트: 옵션 수정? 펀딩 [상세페이지]에서 가능

[상세페이지]에서 이미 저장된 옵션들이 체크박스에 선택된 상태로 제시(동기화)

• 저장된 적 없는 새로운 옵션 추가: 해당 체크박스 선택→♡ 클릭→하단에 알림 팝업("저장 완료!")→[좋아한]의 펀딩 하단에 옵션 추가
• 저장된 적 있는 옵션-수량이나 추가 옵션 변경: 해당 옵션들 변경 →♡ 클릭→하단에 알림 팝업("저장 완료!")→[좋아한]의 펀딩 하단에 옵션 반영
• 저장된 적 있는 옵션-일부 해제: 해당 체크박스 선택 해제→♡ 클릭→하단에 알림 팝업("저장 완료!")→[좋아한]의 펀딩 하단에 옵션 반영
• 저장된 적 있는 옵션-해당 펀딩 전체 해제: ♡ 자체를 선택 해제→하단에 알림 팝업("좋아하는 프로젝트에서 제외되었습니다.")→[좋아한]에서도 해당 펀딩 프로젝트 삭제됨

☞저장해둔 옵션들이 상세페이지에서도 선택이 저장되어 나타난다면, 해당 페이지의 수정 내용이 [좋아한]페이지 내에서도 반영될 수 있는 기능 필요

 

6. 펀딩하려면?

(1)펀딩 프로젝트 페이지에서 바로 펀딩할 때?

-[좋아한]에 저장되지 않은 프로젝트: [상세페이지]에서 옵션들 다중 선택→<펀딩하기>버튼→결제 페이지에 선택된 옵션 자동 반영

-[좋아한]에 저장된 프로젝트: [상세페이지]에서 옵션들 이미 다중 선택되어 있음→<펀딩하기>버튼→결제 페이지에 선택된 옵션 자동 반영

 

(2)[좋아한]페이지에서 펀딩할 때? 

[좋아한] 페이지 내에 저장된 펀딩 프로젝트 선택→[상세페이지]: 저장된 옵션들이 [상세페이지]의 <리워드> 부분에 반영되어 있으므로→바로 <펀딩하기>버튼→결제 페이지에 선택된 옵션 자동 반영

 

 

B안 FLOW(우선 순위 낮음) : 개발을 고려하여 더 단순화된 ver.

1, 2은 모두 동일

 

3. [좋아한] 페이지에 옵션이 저장된 경우

• 1(1)로 저장된 경우: 기존과 동일
• 1(2)로 저장된 경우: 저장한 옵션명, 추가 옵션 명과 해당 옵션의 가격정보만 제시

☞일단 가장 중요한 부분은 사용자가 옵션을 기억 못해서 불필요하게 정보 탐색을 다시 하느라 시간 낭비를 하거나 이탈하지 않도록 만드는 것. 그러므로 추가적인 정보를 띄울 수 없다면 옵션명과 해당 옵션의 가격만큼은 제시되어야 하고, 나머지는 제외.

 

4. [좋아한] 내에서 옵션이 저장된 펀딩 프로젝트를 선택한 경우

바로 [결제페이지]로 이동 : [좋아한]에서 저장된 옵션들은 [결제페이지]에서 이미 선택이 된 상태, 추가나 선택 해제 가능

[상세페이지]에는 [좋아한]에 저장된 부분들이 동기화x

☞동기화 하는 부분이 개발 상에 부담이 될 수도 있겠다고 생각. 따라서 "동기화" 되는 부분을 낮은 우선순위로 선정함. 그러나 [좋아한]에서 옵션 저장한 항목을 바탕으로 바로 결제까지 이어질 때 전환률이 높을 것이라 예상됨. 그러므로 이미 저장된 옵션 정보에 대해서는 바로 결제가 가능한 프로세스를 구축. 

5. [좋아한]에 이미 저장된 펀딩 프로젝트: 옵션 수정? 불가, 삭제만 가능

☞[좋아한]에서 저장된 옵션 정보와 해당 펀딩 [상세페이지]의 옵션 선택 목록이 동기화가 되지 않는 상태. 이 상태에서 [좋아한] 페이지 내부에서 옵션을 수정할 수 있는 기능은 꼭 필요한 기능이 아니기 때문에 추가하는 것이 불필요하다고 판단됨. 옵션을 추가해서 저장할 수 있도록 하는 것이 가장 중요하므로 꼭 반영되어야 함. 하지만 수정 부분에 있어서는 조금 번거롭지만 기존에 저장된 항목을 삭제하고 새로 추가하는 대안도 존재하기 때문.

 

6. 펀딩하려면?

(1)펀딩 프로젝트 페이지에서 바로 펀딩할 때?

-[좋아한]에 저장되지 않은 프로젝트: [상세페이지]에서 옵션들 다중 선택→<펀딩하기>버튼→결제 페이지에 선택된 옵션 자동 반영

-[좋아한]에 저장된 프로젝트: [상세페이지]에서 옵션들 이미 다중 선택되어 있음→<펀딩하기>버튼→결제 페이지에 선택된 옵션 자동 반영 이 기능은 제외됨

 

(2)[좋아한]페이지에서 펀딩할 때? 상단의 4. [좋아한] 내에서 옵션이 저장된 펀딩 프로젝트를 선택한 경우와 동일하게 진행됨

 

 

2. 정보(계층) 구조도(IA, Information Architecture) 설계

IA를 만들어보았습니다. 사실 제가 기획한 부분은 IA에 크게 영향을 주지 않는 부분이어서 기존과 크게 달라질 것 같지는 않은데요. 일단 펀딩 상세페이지와 마이 와디즈 부분에 한정해서 고민해보았습니다.

 

와디즈의 IA를 살펴보니 '마이 와디즈' 부분의 구조가 굉장히 복잡하더라구요. 

내가 펀딩한 내역인 [펀딩], [좋아한] 프로젝트를 볼 수 있는 메뉴가 많다보니 조금 혼란스러웠습니다. 그래서 IA도 어떤 식으로 구성해야 하나 고민이 많았는데요.. 틀릴지도 모르지만 일단 나름대로 IA를 그려보았습니다! IA라기 보다는 메뉴 구조도에 조금 더 가까울 것 같네요. 최대한 중복되는 부분을 빼고 그려보았는데, 역시 어느 정도로 디테일하게 잡아야 할지, 각 기능들이 버튼인지, 카테고리인지, 페이지 단위인지 하면서도 조금 헷갈렸어요. 제대로 그린 건지 잘 모르겠네요....ㅎㅎ

 

펀딩 프로젝트 상세페이지

 

마이 와디즈>서포터 부분만

 

 

3. 스토리보드

스토리보드도 A안으로 작성해보았습니다. 

 

확실히 위에 기능은 한 번 정리하고 스토리보드의 description을 쓰니 조금 더 깔끔하게 정책이 정리되는 것 같아요. 그래도 여전히 설명이 많긴 하지만요... ㅎㅎ

 

아무튼 오늘은 MVP를 구체화하고, 기능을 구체적으로 정의한 뒤 IA와 스토리보드라는 기획 산출물을 만들어보았습니다!