[코드스테이츠18기] 무신사에 기능 추가해보기
MVP 구체화 - 프로덕트 UX 개선/개발해보기
과제 수행 목적
기업 또는 스타트업에서 고객이 겪고 있는 문제를 파악하고, 그 문제를 해결하기 위한 MVP 기획을 기획 산출물로 구체화시키는 과정을 경험하고 익히는 것입니다. 지난 주차에 학습한 내용과 4주 차에 배운 개념과 툴을 활용하여 실제 문제 해결과 프로덕트 출시를 위한 기획 능력을 향상할 수 있습니다.
Step1 - Warm up!
Weekly 과제에서 선택한 프로덕트가 아닌 새로 알게 되었거나, 관심 있는 프로덕트를 1개 선택하여 UX를 살펴봅시다. 프로덕트의 MVP를 구체화하기 전 훈련이라고 생각해 주세요.
좋은 UX를 위한 핵심 요소 3가지 생각해 보기!
선택한 프로덕트 앱을 다운로드 합니다.회원가입부터 천천히 앱을 탐색해 봅니다.해당 프로덕트의 좋은 UX와, 아쉬운 UX 를 각각 1개씩 찾아봅시다.각각의 좋은 UX, 아쉬운 UX는 사용자에게 어떻게 노출 혹은 발견되고 사용되고 있는지 간략하게 설명합니다.아쉬운 UX를 좋은 UX로 개선하기 위해 이미지, 텍스트, 흐름 중 1개를 골라 내가 PM이라면 어떻게 개선할 수 있을지 아이디어를 작성해 보세요.
내가 생각한 아쉬운 UX / 좋은 UX
ktx/ itx-새마을 / 무궁화호 등을 예매할 수 있는 애플리케이션인 '코레일톡'
좋은 UX
내가 생각하는 좋은 UX는 승차권예매 페이지이다.
WHY?
- 정말 직관적이다. 가격과 시간 열차의 종류, 또한 스크롤로 편하게 시간대별로 확인할 수 있다.
이 부분에서의 살짝 아쉬운 점은 스크롤을 정확히 인지를 못할 수도 있겠다고 생각이든다. (실제로 나의 어머니는 처음에 확인을 못하셔서 여러번 터치를 해보셨다고 했다.)
아쉬운 UX
옆의 이미지는 할인 / 정기권의 이미지이다.
물론 들어가자마자 애플리케이션의 주 목적인 열차 조회가 나오는 것도 좋지만 할인, 정기권에 대해서 인지하기가 어렵다고 생각했다.
정기권이나 관광상품의 경우에 매력적인 부분이 많다고 느꼈는데, 나는 할인, 정기권에 대해서 유튜브 영상을 보고 인지를 했다.
내가 생각하는 좋은 방향의 UX -> Hub & Spoke 방식을 사용한 UX.
코레일 톡도 위와같이 허브 앤 스포크 방식을 차용하여 외부로 이동할 수 있는 중앙 인덱스를 배치하면 좋겠다고 생각했다.
Step2 - 실전!
2주 차에 기획한 MVP 구체화를 해봅시다.
MVP 아이디어 소개 간단한 아이디어 소개를 작성하세요.
내가 생각한 MVP 아이디어는 2가지이다.
1. 무탠다드의 표준화
- 브랜드 별로 무탠다드의 제품을 기준으로 사이즈 추천을 작성
2. '어떠한 느낌'검색의 활성화
- '뻣뻣한 청바지'같은 느낌에 대해서 검색했을 때 그와 어울리는 상품 추천
핵심 기능 정의 프로덕트의 핵심 기능을 설정하세요.
사용자가 원하는 기능을 바탕으로, 프로덕트가 제공해야 할 주요 기능을 정의합니다.
이 때 각 기능을 명확하게 정의하고, 이해하기 쉬운 언어로 작성하는 것이 중요합니다.
MVP 기획을 위한 기능을 모두 리스트업 합니다.
솔루션을 위해 세부적으로 어떤 기능이 필요한지 각각의 기능은 어떤 목적을 해결하기 위한 것인지
각각 기능들에 대한 정의 / 필요한 내용 & 콘텐츠에 대한 설명을 작성합니다.
기능 간의 관계를 파악하여 각 기능이 어떻게 상호작용하는지 고려하여 작성합니다.
우선순위가 높은 기능부터 작성합니다.기능 앞에 숫자를 붙여, 우선순위 표시를 해주세요.
핵심 기능작성 예시
(1) 사용자 회원가입 및 로그인 : 새로운 사용자를 등록하고, 기존 사용자가 로그인할 수 있는 기능
(2) 리뷰 작성 및 조회 : 사용자가 상품에 대한 리뷰를 작성하고, 다른 사용자가 작성한 리뷰를 조회할 수 있는 기능
(3) 즐겨찾기 : 사용자가 자주 사용하는 메뉴/페이지를 저장하고, 빠르게 접근할 수 있는 기능페이지 추가, 페이지 삭제, 페이지 순서 변경 등의 기능.
| 번호 | 우선순위(중요도) | 핵심 기능 | 내용 | PC | 모바일 |
| 1 | 1(상) | 무탠비교(허리기준) | 제품의 사이즈정보(Size Info)에 '무신사스탠다드'의 제품과 비교하여 비슷한 사이즈를 알려주는 기능이다. | 지원 | 지원 |
| 2 | 1(상) | 무탠비교(허벅지기준) | 제품의 사이즈정보(Size Info)에 '무신사스탠다드'의 제품과 비교하여 비슷한 사이즈를 알려주는 기능이다. | 지원 | 지원 |
| 3 | 2(중) | 느낌 검색 | '뻣뻣하고 무거운 느낌의 청바지'와 같은 느낌에 대한 검색이 되었을 때 이와 관련이 깊은 상품이 검색되는 기능이다. | 지원 | 지원 |
PRD(제품 요구사항 정의서)작성 2번에서 작성한 핵심 기능에서 우선순위가 가장 높은 기능 1개를 선택하여 PRD를 작성합니다. 기능의 범위를 명확히 합니다. UI 개선, 결제 시스템 고도화 같은 명확한 범위를 알 수 없는 개발 아이디어 보다 그 과정에서 필요한 세부 기능, 작은 기능들로 정해주세요!
구성 요소 참고요약 및 배경(Summary and Background) : 문제가 무엇이며, 왜 중요한가? 기획의 중요성을 검증 또는 강조하기 위해 유저 리서치의 내용 등을 포함하는 것이 좋다.
주요 사용자(Target Users) : 주요 사용자는 누구이며, 우리 프로덕트에서 이 사용자 그룹이 중요한 이유를 포함해야 한다. (우선순위 강조 필요)
핵심 사용자 여정(Critical User Journeys (CUJs)) : 문제 해결 후, 우리가 정의한 사용자는 프로덕트(기능, 서비스)를 어떻게 사용하게 될 것인지 고객 요구에 집중하여 작성한다.
기능적 요구사항(Functional requirements) : 해결 방안의 세부 기획을 작성한다. 최대한 상세하게 정리하는 것이 좋다. 다만, 특정한 솔루션을 강요하지 않도록 주의한다.
지원 문서(Supporting documents) : 솔루션의 상호 작용 설계 및 기술 구현 정의. 엔지니어링 담당자와 함께 정리 하여 작성하도록 한다.
배포 계획(Go-to-market) : 출시 일정, 마케팅, 영업, 고객 지원 안내 및 고려 사항을 작성하도록 한다.실제 구현될 프로덕트가 아니기 때문에 모든 요소를 세세히 작성하기 어렵겠지만, 최대한 작성해 봅시다.
아래는 내가 작성한 제품 요구사항 정의서이다.
클릭하여 원본으로 보기를 권합니다!
배포 계획과 실제 출시에 대한 부분은 실무에대한 지식이 없기에 간략하게 작성해보았다.
MVP 화면 디자인, 와이어프레임(Wireframe) Figma를 활용하여 와이어프레임을 디자인하고 화면의 흐름을 표시합니다.
스토리보드(Story Board) 작성 결정된 각각의 화면에 대해 스토리보드를 작성합니다.
기능의 정책은 명확히 작성합니다.
예를 들어 A 버튼을 눌렀을 때 어떤 반응을 해야 하는지를 작성해 팀원 (개발자, 디자이너)가 혼선을 겪지 않도록 작성합니다.
와이어프레임과 스토리보드는 이렇게 진행해 주세요.
링크에 접속해 Figma를 설치합니다. (https://www.figma.com/downloads/)Figma 웹사이트와 튜토리얼을 열람합니다.
스토리보드 컴포넌트(강의)좌측 상단 Save Local Copy 클릭하여, 복사본 저장 -> 복사한 피그마 파일을 피그마 Web/App에 Drag 시 복사본 사용 가능Figma 를 통해 위에서 구성한 화면의 와이어프레임을 디자인합니다.
(Mid-Fi 목표, High-Fi 면 👍)Mid-Fi로 작성했다면, 디스크립션을 추가해서 스토리보드를 작성합니다
와이어 프레임
1. 무탠비교의 도입.
2. 무탠비교 클릭 시 Pop-up형태로 나타낸다. *여기서 Pop-Up은(새로운 창 or 모달으로 한다.)
3. 무탠비교의 도입 시 기능이 익숙하지 않은 고객들을 위한 강조 효과.
빨간영역에 고객이 마우스오버를 2초이상 하고 있을 시에 무탠비교의 박스를 강조하거나 점선을 나타내도록 한다.
위에서는 박스강조를 택했다.
스토리 보드 / Description
위와 같이 전달받는 사람이 최대한 잘 알 수 있게 스토리보드와 Description을 작성했다!