캐치테이블 제대로 뜯어먹기 (와이어프레임, 스토리보드)
그런데 이제 UX Writing도 곁들인..[코드스테이츠 PMB 16기]
사실 나는 피그마와 구면이다.
구면 정도가 아니라 꽤나 친근한 사이 정도는 되는 것 같다.
얼렁뚱땅은 아니더라도 우당탕탕 분석하고자 하는 서비스의 와이어프레임을 만들어보고,
살펴본 다음 스토리보드까지 작성해보며 기획 역량을 증진시켜 보자. + UX Writing까지.!
오늘의 분석 프로덕트
레스토랑 예약 및 고객 관리 솔루션
캐치테이블
사진 출처 = 원티드 내 캐치 테이블 기업 소개캐치테이블은 '행복한 미식생활, 건강한 예약문화'를 만들겠다는 목표로,
레스토랑 업주 분들께는 예약관리 솔루션인 '캐치테이블 매장용' 앱 서비스를,
소비자 고객 분들께는 실시간 레스토랑 예약 플랫폼인 '캐치테이블' 앱 서비스를 제공하고 있다.
오늘은 캐치테이블을 예약, 이용하는 소비자들의 이용 흐름(User Flow)에 따라 캐치테이블의
와이어프레임을 작성해 보고, 스토리보드까지 작성해보도록 하자.
캐치테이블의 User Story
캐치테이블의 고객들은 누구고, 캐치테이블의 어떤 기능을 왜 사용하는지 대략적으로 파악하기 위해
User Story를 작성했습니다.
User story
각종 웨이팅에 지쳐 이제는 예약으로 편하게 맛집을 방문하고 싶은 고객들은
각 지역의 특별하고 맛있는 음식점들을 찾고, 예약하기 위해
실시간 레스토랑 예약 서비스를 원한다.
User Story를 더 다각화하고 세분화해서 정리하자면 이러하다.
누가 사용하는가(Who)?
- 맛집 웨이팅에 지쳐 예약 방문을 하고 싶은 사람.
- 매일 가던 음식점 말고 새로운 음식점을 가고 싶은 사람.
- 다가오는 모임 날짜에, 급하게 음식점을 예약해야 하는 사람.
- 대가성 블로그 리뷰 말고 진짜 음식점 리뷰들을 확인하고 사람.
무엇을 사용하는가(What)?
- 캐치 테이블의 음식점 예약 서비스를 사용한다.
- 캐치 테이블의 식당 검색 기능을 사용한다.
- 캐치 테이블의 다양한 추천 컨텐츠를 이용한다.
- 캐치 테이블의 다양한 음식점 리뷰들을 확인한다.
왜 사용하는가(Why)?
- 예약으로 편하고 쉽게 음식점을 방문하기 위해서.
- 새로운 음식점에서 새로운 경험을 하고 싶어서.
- 어떤 식당이 유명하고, 맛집인지 잘 알고 싶어서.
- 페이드 마케팅을 피해 진짜 맛집들을 찾고 싶어서.
캐치테이블의 WireFrame 역기획하기
캐치테이블의 방문에서 예약 완료까지의 여정
(최대한 간략하게 작성해 보았습니다. Tool Used : Figma)
홈에서 예약 완료까지의 WireFrame (이미지를 클릭하여 크게 보시는 것을 권장)캐치테이블의 스토리보드 작성하기
와이어프레임을 만들어 보았다면, 더 나아가 디스크립션까지 기입한 스토리보드까지 작성해 보자.
1. 홈 화면
홈 화면 스토리보드2. 검색 / 찾기
검색 / 찾기 스토리보드3. 점포 상세 페이지
점포 상세 페이지 스토리보드4. 예약 (4-1 날짜 인원 선택, 4-2 정보 확인, 4-3 타입 선택, 4-4 보증금 확인)
예약 4-1(날짜, 인원 선택), 4-2(정보 확인) 스토리보드
예약 4-3(타입 선택), 4-4(보증금 확인) 스토리보드5. 결제
결제 스토리보드6. 예약 완료 (6-1 예약 최종확인, 6-2 예약 완료)
예약 6-1(예약 최종 확인), 6-2(예약 완료) 스토리보드+ 추가로!
캐치테이블의 UX Writing 고쳐보기
혹시 캐치테이블에서 고객에게 어려움이나 불편함을 주는
잘못된 UX Writing이 있는지 살펴보고, 개선할 사항이 있다면 개선해보도록 하자.
개선에 참고해야 할 좋은 UX Writing을 작성하는 방법
Useful : 사용자가 원하는 것을 이해하고, 행동을 끌어낼 수 있도록 도움이 되어야 한다 서비스 사용자를 이해하고, 서비스를 방문한 목적을 파악해 카피가 이들을 안내하는 데 도움이 되어야 함
Clear : 명확하고 사용자 입장에서 이해하기 쉬운 문구로 작성한다 혼동할 수 있는 내용을 지양하고 명확한 내용을 전달할 것. 서비스 안에서 일어나는 이슈를 사용자가 이해할 수 있도록 설명해야 함.
Concise : 간결한 표현을 통해 한눈에 알아볼 수 있어야 한다 마이크로카피는 다른 텍스트를 보완하거나 특정 행동을 유도하는 것. 군더더기 없이 필요한 단어만을 사용할 것.
On Brand : 브랜드의 보이스(Voice and tone)를 포함하며 일관되게 유지해야 한다 브랜드의 콘텐츠를 통해 나오는 목소리와 톤을 일관되게 유지해야 함. 서비스 인터페이스의 톤이 일관되지 않을 때, 사용자의 신뢰를 잃을 수 있음.
간결하면서 명확하지만, 정보를 덜 제공해 흐름이 늘어나게 하는 UX Writing
간결하고 명확하지만, 제공되는 정보가 적은 UX Writing간결(Concise)하고 명확(Clear)하게, 가격대를 알려주고 있는 캐치테이블.
하지만 너무 간결하고 명확한 탓에 그 기준이나 정보를 더 알기 위해 결국 툴팁을 확인해야 한다.
간결하고 명확하면서도 유용(Useful)하게 사용할 방법은 없을까?
간결하면서도 명확하고, 정보까지 잘 제공해 흐름을 줄여주는 유용한 UX Writing
간결하고 명확하면서도 딱 필요한 정보를 더 제공하는 UX Writing모호하고 궁금했던, 툴팁을 눌러서 확인해야 했던 정보를 꺼냈을 뿐이다.
그래도 충분히 명확하고 간결하지 않은가.?!
단어 하나 덕분에 우리는 툴팁을 열고 닫는 수고스러움을 충분히 덜어 낼 수 있다.
(내가 생각할 수 있는 최대의 대안이었다.. 캐치 테이블의 서비스톤과 UX Writing은 매우 훌륭합니다..!)
