Project_WePet _Product Manager 🐾

첫번째 프로젝트 WePet의 Product Manager를 맡게 되었다 !

분석은 user -> product -> tech 순으로 진행했다.

먼저 user 에 대해 알아야 그에 맞는 product를 구상할 수 있고,
어느정도 제품의 flow 가 정해져야 그에 알맞는 tech를 사용할 수 있다고 생각했기 때문이다.

1. user

1-1. keywords

• Pet Humanization
• Pet + family
• Professional Care + Together Time + Segmented Market

요즘 애완동물이라는 단어가 사라져 가고 반려동물이라는 단어가 그 자리를 채우듯
반려동물을 단순히 키우는 동물로 여기지 않고 사람과 동일 시 하며
함께 살아가는 가족처럼 여기고 이들에 대한 투자를 아끼지 않는 현상을 일컫는다.

대충 키우는 것이 아니라 제대로, 가족이므로 소중한 시간을 함께 공유하면서,
세분화 된 니즈를 가지고 있는 것이 특징이다.

1-2. user의 연령대

반려동물 관련 앱, 커머스 이용자 비중은 남성에 비해 여성의 비중이 훨씬 크다.
그 중에서도 세분화 하여 나누면 사용자 연령은 2-30대 여성의 비중이 크고,
구매자 연령 비중은 3-40대 여성의 비중이 가장 크다.

이 연령대 결과에 대해 먼저 2-30대 여성을 타겟팅 하여 사이트 유저의 유입을 늘려
브랜드의 입지를 다지고 이를 통해 실 구매자인 3-40대의 구매층을 유입시키고자 했다.

2. product

user에 대해 분석 후 든 생각은, 2-30대 여성을 먼저 타겟팅 하고,
' 아기자기한, 귀여운 ' 것을 좋아하는 펫팸족을 타겟팅 하면서도
실 구매자인 3-40대를 충족 시키기 위해 ' 지나치지 않을 것 ' 이 필요하다고 판단했다.

이에 전체적으로는 ' black & white '로 심플하게 작업하면서 브랜드 컬러로 포인트를 주기로 했다.

브랜드 컬러는 #ffbb0f 로 선택했다.

1. 색상 자체의 상징적 의미로는 행복함, 즐거움 등의 의미를 가지고 있다.
2. 실 구매자에게도 어필 할 수 있도록 타겟의 성별 / 연령대 및 감성에 타겟팅한 컬러이다.
3. End_user, 즉 반려동물인 고양이, 강아지 입장에서도 식별이 가능한 ' 적녹생맹 '의 색감을 피한 컬러이다.

이러한 End_user 의 관점도 브랜드 컬러에 포함시킴으로서
실 사용자인 아이들을 배려하고, 아이들 관점에서 좋아할 만한 제품을 선별하여 판매하는 큐레이팅 사이트임을 전달하고자 했고,
브랜드 이름인 WePet 은 우리를 뜻하는 We 와 반려동물을 뜻하는 Pet 이 하나가 되어 우리 브랜드가 됨을 표현하고자 했다.

3. Tech

먼저 유저의 flow 를 간략하게 생각했을 때, 어떤 필요에 의해 사이트에 접속할 것이다.
단순히 제품을 구경하려 사이트에 들려서 메인페이지와 상품 리스트 등을 통해
제품을 보다보면 장바구니나 위시리스트를 이용하기 위해 가입을 하곤 한다.
가입 및 로그인을 마치고 제품들을 장바구니에 담고, 구매 페이지에서 제품 구매를 확정한다.

3-1. Main Page

• 유저에게 전달할 첫 인상이자 브랜드의 이미지
• 유저에게 흥미 유발 및 지속적인 흥미 제공 : 다양한 유저의 모션에 따른 효과 : 캐러셀, 슬라이더, 호버
• 캐러셀 이미지와 배너문구 등으로 친근함과 브랜드 가치, 정신 전달

유저가 처음으로 사이트를 접속했을 때 만나는 페이지이다. 첫 인상이자 브랜드에 대한 이미지가 되기 쉽다.

그러므로 유저가 흥미를 갖고, 잃지 않도록 다양한 유저의 모션에 따른 효과를 사용하도록 했다.
캐러셀을 통해 처음 접속했을 때 페이지를 좀 더 화려하게 느끼도록 하여 흥미를 유발하고
슬라이더나 마우스 호버 시 이미지가 확대되는 효과로 유저의 모션에 따른 이벤트를 주어 흥미를 유지할 수 있도록 했다.

또한 캐러셀 이미지와 배너 문구로 친근한 이미지를 전달하고,
포인트를 줄 수 있는 제목들로 유저에게 재미를 주고 친근하게 다가가며, 브랜드 가치, 정신을 전달하고자 했다.

3-2. Sign In / Sign Up

• 심플한 구성의 디자인 / 최소화된 회원가입 형식 -> 유저의 진입에 대한 허들 축소
• 버튼 활성화 시 brand color 포인트로 화면에 생동감
• input 창: 유효성 검사 / 실시간 경고메세지
• email 중복검사를 통한 중복 회원 가입 방지
• 8자리 이상의 문자와 숫자, 특수문자로 이루어진 비밀번호
• bycrypt와 jwt 토큰 발급을 통한 개인정보 보호

회원 가입 페이지는 다소 피곤할 수 있는 작업이 필요하기 때문에
디자인 및 구성도 최소화 하여 심플하게 작업하여 피로도를 줄이고 유저의 진입에 대한 허들을 낮추도록 했다.

모든 필요 정보를 입력해야 버튼이 활성화되고, 활성화 시 브랜드 컬러로 포인트를 주어 화면에 생동감을 주었다.

input 창에는 유효성 검사를 진행하여 실시간 경고메세지를 띄워줌으로써
유저가 정보를 잘못 기입 했을 경우 처음부터 다시 진행하게 될 수 있는 불편함과 귀찮음을 사전에 방지하도록 했다.
약관 텍스트는 화살표 버튼으로 open/close 기능을 넣어 많은 내용을 간략히 정리하여 깔끔한 구성을 유지하고
해당 정보가 필요한 고객에게만 정보를 제공하도록 했다.

백엔드는 회원가입 시 email 로 가입이 되므로 이메일 중복체크를 통하여 같은 email로 가입을 할 수 없도록 구현하였고
비밀번호는 8자리 이상의 문자와 숫자, 특수문자를 포함하도록 구현했다.
bycrypt 로 비밀번호를 암호화 하고, jwt 토큰 발급을 통해 비밀번호가 databases 상에 노출되지 않도록 하여
개인정보를 보호하도록 한다.

이후 로그인이 시에는 이메일과 비밀번호를 확인하여
백엔드에서 보내주는 success 메세지를 받고 토큰 저장과 함께 메인페이지로 이동한다.

3-3. Product List

• 고객의 흥미를 끄는 페이지 구성
• 카테고리별 부연 설명으로 우리 상품에 대한 핵심가치 전달
• 페이지 간 통일감 있는 디자인
• dropbox ( 추천순 / 최신순 / 가격높은순 / 가격낮은순으로 제품 목록 노출 )

카테고리별 부가적 설명을 추가하여 고객에게 우리 상품에 대한 핵심 가치를 전달하면서
각 페이지별 디자인에 통일성을 주어, 자칫 복잡해 보일 수 있는 제품 리스트를 깔끔하게 정리했다.

프론트엔드는 유저에게 재미를 줄 수 있는 포인트를 주는 제목들과
마우스 호버시 이미지를 확대하여 동적인 느낌을 전달하여 고객의 흥미를 끌도록 구성하였다.
또, 추천순 / 최신순 / 가격높은 순 / 가격 낮은 순으로 제품 목록을 drop box를 통해 제품 목록을 노출 할 수 있도록 하여
카테고리가 제공하는 상품 리스트 뿐만 아니라 고객의 니즈별로 제품을 나열하여 원하는 제품을 쉽게 찾을 수 있도록 구현했다.

백엔드는 프론트엔드에서 만든 제품 목록 sorting에 맞는 제품을 보낼 수 있는 GET 쿼리 엔드포인트를 구현하고
제품 엔드포인트 관리자 페이지를 통해 새로운 제품을 삽입할 수 있는 엔드포인트와 페이지를 생성했다.

3-4. Product Detail

• 페이지 상단에서 상품의 상세 정보를 모두 제공
• 캐러셀을 통해 스크롤 없이도 추가 이미지 확인 가능
• 우측 하단에 최상단으로 이동하는 컴포넌트 -> 유저의 피로도 감소
• 기본 정보, 상품 후기 : scrollTo

페이지의 상단에서 상품의 이름, 이미지와 가격 및 배송 정보를 제공하여 유저가 스크롤을 하지 않고도
제품에 대해 필요한 정보를 한 눈에 파악할 수 있도록 구성했다.

캐러셀을 통해 이미지를 추가로 확인할 수 있도록 구현하였고,
기본 정보와 상품 후기는 scrollTo 를 사용하여 원하는 위치로 바로 이동할 수 있도록 했다.
또한 디테일 페이지는 페이지의 길이가 상대적으로 길어지기 때문에
우측 하단에 페이지의 최상단으로 이동할 수 있는 모달을 추가했다.

3-5. Cart

• checkbox 기능 구현 : 전체 / 선택삭제 시 모달창 팝업
• 수량변경에 따른 실시간 가격 변동 / 최종 상품 금액 산출 -> 배송비 조건 적용 ( 3만원 미만 : 배송비 추가)
• 잔여금액에 대한 알림창 노출 : 3만원 이상 구매 유도를 위해 배송비 무료까지 잔여 금액에 대한 알림창
• 장바구니에 담긴 제품이 없을 경우 지정 멘트 노출 -> 구매 버튼 비활성화, 배송비 0원 적용

페이지의 좌측에는 상품의 정보를 표시하고 상품 이미지 좌측의 체크 박스를 활용하여
선택 삭제, 전체 삭제도 end point 에 맞춰 DELETE 통신이 이루어 지고,
수량 변경이 있을 때 마다 endpoint 에 맞춰 PATCH 통신이 이루어집니다.
총 상품 금액 부분은 프론트에서 직접 산출해서 보여주고, 최종 상품 금액에 따른 배송비 부여 여부가 결정되며,
주문 버튼 클릭 시 결제 페이지로 이동한다.

3-6. Purchase

• 유저의 추가 정보 수집
• 내용에 따른 section 분리를 통해 한 눈에 정보를 파악하기 쉽도록 구성
• '배송지 등록' 에 대한 input value 백엔드에 POST
• 주문 금액에 따라 배송비를 자동으로 추가 또는 제외

처음 회원 가입 시 유저 진입의 허들을 낮추기 위해 간략화 되어 받지 못한 배송지에 대한 정보는 구매 시에 전달 받는다.
구매 페이지까지 성공적으로 진입한 뒤에는 배송지 기입 등의 번거롭고 다소 시간이 걸리는 일이 추가되어도
회원가입 페이지에 비해 이탈률이 떨어지기 때문에 구매 페이지에서 기입하도록 했다.

프론트엔드는 화면의 좌측에는 주문 상품과 포인트에 대한 정보를 보여주고 화면 우측에서 결제에 대한 정보를 보여주는 방식으로 섹션을 분리하여 한눈에 원하는 정보를 파악하기 쉽도록 구성하였고,
배송지 기입과 포인트결제 체크, 약관 동의는 좌측과 우측의 내용이 동일 하므로 하나의 state로 관리하고 전체 동의 체크박스로 4개의 체크를 함께 관리하는 기능을 구현함으로써 유저가 간편하게 필수 사항을 체크할 수 있도록 했습니다.
또, 결제를 위해 필요한 배송지, 포인트 결제, 약관동이를 마친 뒤 활성화 되는 버튼에는 주문 금액에 따라 배송비를 자동으로 추가 또는 제외하여 표시되도록 구현하였습니다.

3-7. Nav

• 로그인 여부에 따라 버튼 문구 변경 ( 로그인/로그아웃 )
• 로그인이 된 경우에만 장바구니, 마이페이지로 진입 ( 로그인이 안 된 경우에는 로그인 페이지로 이동 )
• localStorage의 token의 유무를 확인하여 결과에 따른 다른 페이지 출력
• 사이트를 이용하는 동안 유저에게 계속 노출
• 모든 Nav 내 메뉴는 호버시 브랜드 컬러로 전환되어 포인트
• 검색 모달과 메뉴 모달창 제작
• 햄버튼과 모달은 작동시 애니메이션 구현 -> 페이지에 동적 요소 추가

메인 페이지로 이동할 수 있는 로고와 카테고리 분류를 좌측에 배치했고, 마우스 호버 시 브랜드 컬러로 전환되어 포인트가 되어준다.
검색 모달을 이용하여 제품을 검색할 수 있는 UI를 만들었고, 간편하게 장바구니나 마이페이지, 로그인, 로그아웃을 이용할 수 있는 버튼을 만들었습니다.

햄 메뉴를 이용해 각종 테마나 카테고리 이용이 가능하도록 하였고,
하단에는 1:1, 이메일 문의를 추가하여 어느 페이지에서나 간편하게 문의에 접근할 수 있도록 했다.
햄 버튼과 모달은 작동 시 애니메이션을 구현하여 페이지에 동적인 요소를 추가했다.

localStorage 의 token 유무를 확인하여
로그인 여부에 따라 버튼의 문구가 상태를 한 눈에 알 수 있도록 변경 되도록 구현했고,
로그인이 된 경우에만 장바구니, 마이페이지를 이용 할 수 있고, 아닌 경우 로그인 페이지로 이동하도록 구현했다.

3-8. MyPage

• 마이 페이지 진입 시 아이디에 맞게 인사문구 노출 -> 유저에게 친숙함 전달
• 개인정보 열람 / 포인트 추가내역 확인 / 이메일 문의 / 1:1 문의 등 프라이빗 서비스 제공

처음 마이페이지 진입 시 아이디에 맞게 인사 문구를 노출하고 다양한 개인 정보를 확인하는 페이지이다.
이메일 문의 클릭시 바로 메일을 보낼 수 있도록 구성되어 있고, 1 : 1 문의를 누르면 문의 내역 페이지로 이동한다.
신규 회원가입 시 부여되는 포인트도 확인이 가능하다.

4. 추가하고 싶었던 사항 !

• 신상품 과 곧 품절 ! 표현으로 빠른 구매 충동을 유발
• review : 나의 리뷰 보기를 통해 점진적으로 리뷰의 신뢰성 증대 효과
• contest : 유저 간의 경쟁을 통한 유저 잔류 시간 증대 효과

4-1. 신상품, 곧 품절! 표기

Product List 페이지에서 '신상품' 과 ' 곧 품절 !' 표현을 하여
유저의 시선을 한번 더 유도하고,
' 곧 품절 ! ' 의 경우 해당 제품이 인기 있음과 남은 수량이 얼마 없음을 전달함으로써
구매 충동과 욕구를 한번 더 자극하는 효과가 있다.

4-2. review

반려동물 용품은 대체로 같은 제품을 여러 번 재구매 하게 된다. 아이의 기호에 따라, 혹은 성분 등과 같은 이유 때문이다.

나의 리뷰를 모아 보거나, 나의 리뷰가 달린 제품의 상세 페이지 접근 시 리뷰 중 나의 리뷰를 상단에 먼저 띄워주게 되면
이 후 유저 스스로의 재구매 시 도움을 받기 위해 리뷰를 좀 더 상세하거나 솔직하게 작성할 확률이 높다.
스스로의 재구매를 위한 리뷰가 많아지면 ' 믿을 수 있는 리뷰 ' 가 많아지는 것이므로
결국은 사이트의 신뢰성과도 연관이 된다 생각한다.

4-3. contest

반려동물과 함께 하는 사람들은 대부분 ' 나와 함께 사는 아이 ' 가 얼마나 예쁜지 이야기할 때 신나하곤 한다.
이를 통해 사이트 내부의 작은 공간에서 유저들이 스스로 자신과 함께 하고 있는 반려동물을 뽐 낼 수 있는 페이지를 만들어
서로 소통하는 커뮤니티 공간을 만들어 보고 싶었다.
이 커뮤니티가 활성화 될 시, 유저가 구매 유무와 관계 없이도 사이트에 접속하게 되고
또한 잔류 시간이 늘어날 것이므로 구매에 대한 기회도 좀 더 늘어날 수 있지 않을까 생각했다.