brunch

You can make anything
by writing

C.S.Lewis

by 노마드윤 Nov 22. 2016

인터파크 티켓2.0 모바일 상세 리뉴얼 기획/개발

인터파크 티켓 모바일 상세페이지 기획부터 오픈까지의 스토리를 소개합니다.

해당 글은 보안 이슈가 있는 부분을 제외하고 다시 발행하였습니다.


2016년 인터파크 티켓 모바일 상세 페이지 개편 프로젝트의 진행 과정과 결과물을 소개한다.


STEP1. 현 모바일 서비스의 문제점 파악과 데스크 리서치

현 모바일 서비스의 사용성 문제, 존재하는 오류, 구조적 문제 등을 파악하여 취합하는 과정을 가졌다. 이를 통해 정리한 것은 아래와 같다.

기존의 모바일 상세 페이지

기존의 상품상세/ 검색&리스팅 AS-IS 이슈

상품 노출 시 단순 나열식의 TEXT정보를 답답한 그리드로 노출 > 상품에 대한 인지도, 매력도 감소

제공하는 기능과 정보의 양이 웹에 비해 떨어짐 > 모바일 서비스에 대한 신뢰도와 인지도 하락

서비스가 모두 카테고리 안에 숨어있는 닫힌 구조를 가지고 있음 > 사용성 떨어짐.


상세 개편을 위한 TO-BE 전략

상품 상세 페이지 매력도&정보 제공 방식 개선

친절&명료한 톤 앤 매너 제공


그리고 위의 전략을 이루기 위해 조금 더 구체적이고 중요한 점을 정리하였다.


[ 기능&서비스 개선]

작품의 정보 영역에 부가 콘텐츠를 매력도 있게 노출한다 (Play DB 정보, 배우 정보 등)

캐스팅 캘린더를 보기 편하게 제공한다.

찜, 티켓캐스트, 알림 받기, 공유 등의 기능을 추가, 강화한다.

사용자가 관심을 가질만한 타 콘텐츠를 추천한다.

티켓 오픈 날짜와 시간을 제공한다.


[ 사용성&UI 개선 ]

가격 (할인가와 기본가 )  및 쿠폰 노출 방식을 개선한다.

정보를 스크롤 다운하며 depth 없이 볼 수 있도록 한다.

정보 영역을 분리, 정리하고 중요정보 이외의 정보는 적절히 숨겨 복잡도를 줄인다.

중요 변동사항 혹은 공지사항 등을 더욱 강조하여 노출해준다.

사용자의 후기를 매력도 있게 노출해준다.

커스터 마이징이 상대적으로 자유로울 수 있는 UI로 구성하여, 특정 상품에 대한 요구사항에 대비한다.



STEP2. 사용자 조사를 통해 한 번 더 기획 방향 확고히 하기

구체적인 방향성과 기능을 정하고 이를 검증하기 위해 사용자 조사를 진행하였다. 에이전시를 다닐 때는 사용자 좌를 검증을 위해서라기보다, 사용자 층 자체를 이해하기 위해 인터뷰하는 경우가 더 많았는데, 이번엔 검증을 하기 위한 인터뷰를 시행하였다.


인터뷰 대상자로는 최근 3년 간의 뮤지컬, 연극을 예매한 유저들 중 26~35살 사이의 사이의 예매자를 추출하였고, 그중 아래와 같이 타깃을 추출하여 인터뷰를 진행하였다.

1. 일 년에 한 번 볼까 말까 한 라이트 유저 1명

2. 일 년에 10-20번 이상을 보는 마니아 유저 1명

3. 일 년에 100편 이상을 보는 익스트림 유저 1명


그렇게 하여 인터뷰를 기록하고, 그로부터 이슈와 인사이트를 정리하였다.

인터뷰를 통해 획득한 정보 정리의 일부



STEP 3. 기능. 정보 리스팅 후 큰 구조 결정하기

인터뷰를 통해 검증하거나 새롭게 알게 된 사실들로 현재 모바일 상세 페이지에서 노출되고 있는 정보와 기능 리스트를 엑셀에 정리한 후, 큰 틀을 잡아나갔다.


이때, 인터파크 티켓은 'M' 에이전시와 함께 진행을 하였는데, 디자인 부분에선 만족할 만한 결과를 얻었으나 기획에 있어서는 오히려 직접 하느니만 못한 경험을 하였다. 인터뷰도 함께 하고, 인터뷰 결과를 통해 큰 아웃라인 기획을 요청했으나 현실적으로 구현이 힘들거나, 실제로 유저들에게 중요하지 않거나, 기획사의 입장을 너무 고려하지 않은 기획만을 넘겨주었다. 결국 에이전시의 한계를 드러낸 것이다.


그래서 직접 상세 UI까지 설계하였다. (일은 두배가 됨 --;)

그 결과 내가 잡은 구조는 아래와 같다.

상단 공통 영역은 포스터와 기본적인 공연/행사 정보, 평점, 공유 기능 등이 공통적으로 들어간다.

그리고 페이지는 크게 3개의 단으로 나누어지는데,

TAB1: 주요 정보

TAB2: 부가 콘텐츠 정보

TAB3: 게시판

이렇게 나눠지도록 하였으며, 각 TAB의 콘텐츠는 모두 펼쳐진 구조를 갖도록 하여 최대한 depth를 줄였다.


3개의 TAB으로 많은 양의 정보를 나눈 설계 전 구조도.

이러한 구조를 바탕으로 도출한 디자인 결과물이다.


TAB1 영역 _ 주요 정보


TAB2 영역_부가 콘텐츠 정보


TAB3 영역_게시판 (생략)

**개발하면서 디자인과 많이 달라졌다. 개발 상 구현 불가하여 제외되거나 수정된 것도 있고, 사용성에 이슈가 있어 바꾼 부분들도 있다.



STEP 4. 오픈 시나리오 작성

디자인과 개발 대응, 그리고 QA라는 고통과 인고의 시간을 거쳐  오픈 날이 다가오면 오픈 시나리오를 작성해야 한다. 에이전시에서 일할 때나 영단기에서 서비스를 론칭할 때는 오픈 시나리오라는 것이 없었다. 실서버에 반영을 하더라도 '실 반영 후 모니터링'이 끝이었는데, 오픈 시나리오를 개발자가 요구하는 것이 생소했다.


오픈 시나리오는 오픈 시 이슈가 생기면 바로 그에 대응하여 롤 백을 할 수 있게 하고, 최대한 이슈가 없는 대상부터 적용하여 리스크를 줄이기 위해 작성한다고 보면 된다. 또한 예외적으로 하드코딩 개발이 들어간 상품에 적용되었을 때 이슈가 없는지 꼭 확인해야 한다.


상세 페이지 오픈은 오전엔 레저 장르에 적용, 각 장르 당 실 상품에 1개씩 적용하여 모니터링한 후, 오후에 시간대 별로 1시간에 한 장르씩 오픈하였다.



STEP6. 오픈과 모니터링

오픈을 한 후에는 기획사(판매자)에게 알리고, 주요 상품들을 위주로 각종 커뮤니티의 반응, 그리고 고객센터에서 인입되는 CS를 모니터링하게 된다.

이때, UI를 너무 크게 바꿈과 동시에 개발적으로 안정적이지 않았기 때문에 여러 번 커뮤니티 상에서 앱에 대한 욕을 볼 수 있었다.  상처엔 후시딘...


오픈 후에 수정한 사항들에 대해서는, 히트맵 툴을 적용한 결과와 함께 추후 따로 다룰 것이다.


정말 많은 에피소드와 멘붕이 있었지만... 현재는 어쨌든 CS인입 없이 잘 사용되고 있다고 하니

뿌.듯.

하다..


[스크린샷]


TAB1: 주요 정보 스크롤 다운 캡처


TAB2: 공연관련정보 스크롤 다운 캡처


TAB3: 관람후기 게시판 / 공유하기 / MY티켓캐스트로 등록하기 / 캐스팅 달력보기 캡처



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari