AI를 활용하는 UX프로젝트, SaaS제작기(2)
페르소나, 가치제안, IA, 플로차트, 와이어프레임 제작하기
지난주에 작성한 PRD 두 가지 중에 한 가지만 선택하여 디벨롭하기로 결정하였고
저는 PRD(1)-Targeting Insight를 최종 단계까지 끌고 가보도록 하겠습니다.
해당 PRD의 와이어프레임이 나오기 위해서 몇가지 UX 단계를 거쳐야 하는데요.
Step 01. 페르소나
Step 02. 가치 제안
Step 03. 정보 구조
Step 04. 플로 차트
Steo 05. 와이어 프레임
이렇게 총 5단계를 거쳐 최종적으로 와이어프레임을 완성하도록 하겠습니다.
(단계가 많은 만큼, 포스팅 길어짐 주의..)
Step 01. 페르소나
페르소나는 디자인의 유효성을 입증하고
요구사항을 사용자 관점으로 정리해보면서 가설을 세우는 단계입니다.
이번에도 챗GPT의 도움을 받아 페르소나를 작성해보도록 하겠습니다.
지난주 작성했던 PRD를 바탕으로 일단 페르소나를 작성해달라고 요청했습니다.
대답을 보고 추가적인 질문으로 디벨롭 할 계획입니다.
그랬더니 3가지의 페르소나를 작성해주었는데요.
이 대답으로는 상세한 페르소나를 작성하기엔 정보다 부족하여 항목 몇 가지를 정해주며 다시 질문했습니다.
이렇게 챗GPT와 티키타카를 하다보면 페르소나를 완성할 수 있습니다.
1차적으로 완성된 페르소나를 아래 첨부합니다.
(1) 패션, 의류 이커머스 사업자
(2) 건강 제품 판매 옴니채널 및 멀티채널 사업자
(3) 마케팅 및 데이터 담당자
이런 서류에 디자인을 입히는 것은 맨 마지막에..나아아아중에.. 하도록 하겠습니닷
Step 02. 가치 제안
가치 제안은 고객이 우리 제품을 선택해야 하는 이유를 제공하면서
이 제품만이 해결해 줄 수 있는 차별점을 기술하는 것입니다.
참고 아티클
Customer Segment를 "멀티 채널 커머스의 마케팅 및 데이터 담당자"로 축소하고
챗GPT를 활용하여 가치 제안을 작성해보겠습니다.
이 답변을 적극 활용하여 만든 가치제안 캔버스는 아래 첨부합니다.
정성들여 디자인 할 필요성을 못느껴 대충 틀만 만들었음을 참고해주세요..!
Step 03. 정보 구조
사용자가 "내가 찾는 정보는 어디에 있을까? 라는 질문에 답변할 수 있도록 제품 내 정보를 명확하고 논리적으로 구성해야합니다.
일단 챗GPT의 답변을 참고하여 아래와 같은 정보구조를 작성했으나,
추후에 디벨롭이 필요할 것으로 보입니다.
이 구조는 다음과 같은 요소들을 중점적으로 다룹니다.
데이터 수집: 사용자 행동 추적 데이터와 멀티채널 데이터를 통합하여 수집합니다.
데이터 분석: 고객 행동 예측 모델링과 RFM(Recency, Frequency, Monetary) 인사이트를 생성하여 고객 세분화와 마케팅 전략에 적용합니다.
마케팅 지원: 캠페인 관리와 맞춤형 보고서, 대시보드를 통해 사용자가 데이터를 기반으로 마케팅 전략을 수립하고 실행할 수 있도록 지원합니다.
Step 04. 플로 차트
사용자의 행동 과정을 시각화 한 것으로 사용자의 프로세스를 파악해볼 수 있습니다.
다른 부서, 이해관계자와 의사 소통할 때 유용하게 사용됩니다.
정보구조와의 차이점을 간단히 적어보겠습니다.
정보구조는 콘텐츠 카테고리가 어떻게 연결되는지 보여준다면 플로차트는 시간 경과에 따른 진척도를 보여주고 사용자가 서비스와 정보를 어떻게 주고 받는지를 보여줍니다.
챗GPT가 준 플로차트를 토대로 재구성하였습니다.
디자인까지 구현할 한 가지 기능에 대해서 작성한 플로우차트라 간단해 보일 수 있는데요,
스토리별로 따로 작성하는 것이 작성도 관리도 편하다고 합니다.
Step 05. 와이어 프레임
디자이너는 화면 디자인 전에, 와이어 프레임으로 서비스의 기능을 이해합니다.
요즘은 디자이너가 와이어프레임까지 그리는 추세로 확산되고 있기도 하죠.
이 와이어 프레임은 높은 수준의 구조를 다루는 작업(지금까지 했던 정보 구조, 플로 차트 등) 이후에 진행되며 와이어 프레임이 완성되면 화면 디자인을 시작합니다.
언제든 버릴 수 있다는 마음 가짐으로 처음에는 간단하게 만들어 지속적으로 디벨롭하면 됩니다.
다양한 시안을 가볍게 그리고 공유하여 피드백을 반영하면서 상세 사항을 추가해보겠습니다.
와이어 프레임을 그리는 것은 제 몫이지만 넣어야할 기능의 분류하는 것에 대해서는 챗GPT의 도움을 받아보겠습니다.
먼저, 이 서비스의 핵심인 "타겟"을 나누기 위해서, 고객 세그먼트를 분류해야하는데요.
챗 GPT의 답변을 참고하여 고객 세그먼트를 나눠보겠습니다.
1. 고객 가치에 따른 세그먼트
고객 가치가 높은 고객
중간 고객
낮은 고객
2. 리액티브 세그먼트
최근 구매한 고객
자주 구매한 고객
큰 금액을 지출한 고객
3. 고객 이탈 세그먼트
이탈한 고객
이탈할 고객
휴면고객
이 내용들을 참고로 와이어프레임을 일단(마구잡이로) 그려보겠습니다.
사실 B2B Saas 서비스를 기획하는 것은 난생 처음이라
와이어프레임부터 너무 어렵더군요..!
그래서 피그마에 플러그인, AI의 도움을 받아보았습니다.
AI가 그려준 와이어프레임인데요, 별 도움 안되었습니다.
(탈락)
머리를 굴려가며 피그마에서 와이어프레임을 그려봅니다.
우선 1차적으로 완성한 와이어프레임을 아래 첨부합니다.
가장 먼저 실시간 접속 현황을 확인하면서 페이지별로 머물러 있는 고객을 타겟으로 선정할 수 있습니다.
또한 '실시간 타겟팅' 기능을 통해 접속중인, 구매중인 고객에게 즉각적으로 마케팅 캠페인을 실행할 수 있습니다.
타겟팅 할 고객군을 선정했다면 Toast로 상세 데이터를 열람할 수 있습니다.
이때 AI 마케팅 전략을 제안받을 수 있고, 유저가 원하는 마케팅 캠페인을 직접 제작할 수 있습니다.
(마케팅을 직접 제작하고 실행하는 페이지까지 구현되지는 않을 듯 합니다.)
자동으로 타겟팅을 해주는 기능이 핵심인 페이지인만큼
고객 세그먼트를 나누는 UI에 집중했습니다.
고객 세그먼트에서는 사각형들의 가로 길이를 각각 다르게 배치해두었는데요.
그 이유는 더 많은 타겟이 있는 사각형의 가로길이가 길어지도록, 게이지처럼 사각형의 길이 자체가 유연하게 움직이며 시각적 정보를 제공하도록 의도했습니다.
여기까지-
Saas 제품 와이어프레임을 그리기까지의 과정을 작성해보았습니다.
다음 주에는 디자인 시스템을 잡아보도록 하겠습니다.
