[MVP UI/Prototype 설계] 2. 사용자 목표 설정과 IA, 와이어프레임 제작

[과제] 사용자 문제를 해결할 수 있는 MVP UI와 프로토타입 설계

[주제] 중고거래 앱의 '상품 상세 → 거래 요청 → 대화 시작' 흐름

 

 

사용자 흐름 정의 및 주요 목표 설정

 

✅  사용자 목표 설정

• "사용자는 빠르게 거래를 완료하고 싶다"

✅  빠른거래를 위해 필요한 흐름

• 상품에 대한 상세정보 의무 작성으로 불필요한 채팅 줄이기
• 직거래 / 택배거래 중 원하는 거래방식 미리 선택
• 채팅 메시지 자동 제안으로 빠른 대화 유도

✅  사용자 예상 시나리오

• 상품 상세정보 확인 → 채팅 진입 → 거래방식 선택(직거래/택배거래) → 대화 시작

 

 

정보 구조 & 화면 기획

 

☑️  필요한 화면과 화면 요소

상품 상세 페이지 화면 요소
필수 요소	추가 요소
상품 사진	직거래 희망 장소
상품 카테고리	택배거래 희망 택배 옵션
제목	비슷한 상품 추천 리스트
가격	판매자 다른 상품 리스트
본문
채팅, 관심, 조회 반응 수
판매자 프로필

채팅 페이지 화면 요소
필수 요소	추가 요소
상품 정보 요약	안심결제 안내 메시지
거래 방식 선택(직거래/택배)
자동 제안 채팅 메시지

판매자 프로필 페이지
필수 요소	추가 요소
판매자 이름, 프로필 사진	거래 후기
거래내역 수	신뢰도 수치
판매 상품 리스트

 

 

☑️  사용자 흐름 IA 제작

 

 

⚠️  IA를 제작해본 결과 직거래 vs 택배 거래 방식에 따라 흐름이 달라지는 것을 발견

• 빠른 구매를 목적으로, 직거래의 경우 '상품 정보 확인 → 채팅하기 → 구매' / 택배거래의 경우 '상품 정보 확인 → 바로 구매' 의 시나리오로 설정했었음
• 하지만, 택배거래의 경우에도(빠른 구매를 원하면서도) 네고, 판매 상태 확인 등을 채팅으로 확인하고 싶어할 수 있음

 

💡  해결 방안 아이디어

• 택배 거래를 선택하더라도, 결제로 직행하는 것이 아니라 구매 전 확인 스텝을 두고 그 스텝에서 채팅으로 유도할 수 있는 장치를 둔다.
• >> 이를 바탕으로 IA를 수정: 거래 방식 선택 페이지 추가

 

✅  중고거래 사용자 구매 흐름 IA

• "직거래 vs 택배거래"의 거래 방식에 따른 다른 흐름 제공
• 사용자가 거래 의사를 빠르게 나타내고, 최적의 거래 흐름으로 이어질 수 있는 UI 설계

 

 

 

와이어프레임 및 레이아웃 구성