화해의 새로운 UXUI
상세기능 정의하기
코드스테이츠 PMB 17 - Weekly Project 3
이번 포스팅은 지난번 '화해'의 MVP 기획과 이어지는 글입니다. 이해를 돕기 위해 이전 포스팅을 먼저 읽고 보시는걸 권장합니다.
먼저 이번 포스팅에 앞서 지난 포스팅에서 메인 화면에 리뷰 탭을 추가한 화면을 제안했었다.
홈 화면 → 리뷰 탭으로 바로 리뷰 컨텐츠 진입하도록 개선그리고 포스팅을 완료하고 일주일 뒤... 화해 앱이 새 버젼으로 업데이트 되었는데, 지난번에 내가 제안한 화면과 유사한 화면이 생겼다!
화해 15.31.0 버전 화면
내가 기획한 화면은 리뷰 탭에서 전체 제품에 대한 리뷰를 보여주는 컨텐츠라면, 화해는 현재 새로 밀고 있는 색조 발색에 대한 컨텐츠를 추가했다는 점 빼고는 유사한 화면이어서 매우 신기하고 감회가 남달랐다. (화해 관계자 분들 혹시 보고 계신다면...좋아요 부탁드립니다..)
앞으로도 더욱 현직의 관계자 분들도 공감하실 수 있는 기능과 아이디어 제안을 하도록, 양질의 컨텐츠를 발행해야겠다. 화이팅!
무엇이 필요할까?
우리는 지난번 포스팅을 통해서 '화해'에 대해 사용자들이 겪는 불편함과 니즈 그리고 화해의 특장점을 살릴 수 있는 기능에 대해 MVP를 기획해 보았다. 이번 포스팅에서는 지난 포스팅에서 기획한 MVP를 구체화하고 시각적으로 표현해보려 한다.
기능 정의
화해의 MVP 기획을 통해 도출한 기능들을 세부적으로 어떤 기능이 필요한지 우선 순위가 무엇인지 정리해보겠다.
홈 화면
리뷰 탭 추가 : 상단 탭을 추가하여 사용자들의 적극적인 리뷰 활동을 유도, 리뷰 페이지 진입
사용자 맞춤 제품 추천 : 화해에서 수집하고 있는 사용자의 피부 타입, 피부 고민, 연령대와 성별에 맞는 제품과 자주 구매하는 제품 추천
검색 화면
- 검색 화면 탭 구성 변화
통합 탭 : 최근 검색어, 최근 본 제품, 인기 검색어로 분류
제품 탭 : 제품별 카테고리, 인기 제품 순위 제공
리뷰 탭 : 브랜드 태그, 고민 태그, 제품 태그 별 리뷰 정보 및 관련 제품 정보 제공
성분 탭 : 기존의 성분사전 성분필터 화면 통합 및 성분 탭 하위 메뉴로 정리
브랜드 탭 : 브랜드별 검색
제품 상세 페이지
- 장바구니 담기 완료 시, 추천 제품 정보 제공 : 같은 카테고리 제품 정보 및 다른 고객이 본 제품 정보 제공
관리자용 어드민 페이지
- 대시보드 : 판매량, 검색량, 접속자 수, 최근 제품 주문 리스트, 최근 제품 리뷰 리스트 등 제공
요구 사항 정의서
위에서 언급한 기능을 유사 기능별로 그룹핑하고 우선 순위를 정리하여 표로 작성하였다.
우선 순위의 선정 기준은 아래와 같다.
1. 화해의 특장점인 리뷰 기능 위주
2. 화해에서 리뷰 등 정보를 보고 구매까지 이어질 수 있는 기능
3. 위의 기능들을 보조해주는 정보와 기능
Information Architecture (I.A)
Information Architecture (IA, 정보구조)란?
효율적인 서비스를 만들기 위해 정보를 다양한 목적, 즉 이용자의 직업, 기능, 정책 등에 따라 이해하기 쉽게 분류하는 가장 기초적인 작업
위 기능정의에서 정리한 기능을 중심으로 화해의 Information Architecture를 제작해 보았다. 확대해서 보는걸 권장 드리며, 자세한 내용은 IA 원본을 통해서 확인 부탁드립니다. 홈 IA 원본 링크
리뉴얼되는 기능을 중심으로 제작한 IA화해 Renewal Wireframe
정의한 기능과 구조를 토대로 Wireframe으로 화면의 뼈대를 만들어 보았다. 그리고 주요 화면의 Flow도 표시하여 서비스를 이용하는 유저의 프로세스를 구상해보았다.
화해 Renewal Wireframe / Flow화해 Renewal Storyboard
마무리하며
이번 포스팅을 통해 화해의 현재 개선점을 파악하고 상세 기능을 정리하였다. 다음 포스팅에서는 정리한 상세 기능을 구현하기 위한 다양한 방법론과 데이터에 대해 알아볼 예정이다.
#PMB #PM부트캠프 #코드스테이츠 #프로덕트매니저 #PM #서비스기획자 #기획자 #IT #화해 #버티컬플랫폼 #뷰티 #뷰티플랫폼 #커머스 #기능정의서 #기획서 #스타트업 #스토리보드 #인사이트 #와이어프레임 #어플리케이션 #App #앱 #모바일 #UX #UI #UXUI #버드뷰 #플랫폼
