랜딩페이지 개선하기

ㅈ..잠시만요...! 여기 좀 봐주세요!

아직 할 이야기가 아직 남았는데,
떠나가신다면 저는 정말 슬프겠죠�

랜딩페이지에는 우리가 하고 싶은 이야기가 구구절절 적혀있다. 하지만 안타깝게도 대부분의 방문자가 집중력을 발휘하는 시간은 약 5초 내외로 그리 길지 않다. 스크롤을 3번 이상 내리는 유저가 그리 많지 않다는 이야기다. 그래서 기존의 랜딩 페이지를 하나하나 뜯어보며 개선해 보기로 했다.

이미지 중심의 프로그램 소개

좌측의 이미지가 기존의 랜딩페이지 상단인 '프로그램 소개'영역이었다. 무슨 생각으로 프로그램 소개를 저렇게 표현했는지 모르겠다. 다른 컨텐츠에 우선순위가 밀렸다고 변명도 못하겠다. 정말 1도 안 읽힌다. 이제 과거의 내가 저지른 과오를 찬찬히 수습해야겠다.

우선 한 화면에 모든 클래스를 욱여넣는 것을 포기했다. 아마도 초기에 '모든 클래스를 한눈에' 볼 수 있도록 하기 위해 작은 표 안에 모든 클래스를 '텍스트'로 욱여넣었던 것 같은데, 어떤 클래스가 진행 중인지 무슨 말을 하는지 1도 눈에 안 들어오며, 알고 싶지도 않게 생겨먹었다.

오른쪽은 개선된 화면이다. 첫째로 대표 클래스를 추렸으며, 이어서 가능한 이미지로 정보를 인식할 수 있도록 컨텐츠를 구성했다. 클래스를 선택하면 하단의 정보가 교체되는데, 아래쪽 영역에는 영상과 간략한 안내가 표시되며, 수업 하이라이트와 코치님들의 소개 멘트가 영상으로 롤링된다. 해당 화면을 수정하고 연관된 개선 지표를 찾아내진 못했지만, 개인적인 마음의 짐을 내려놓은 듯한 기분이 들어 후련했다.

자랑하자 수업 후기

서비스 오픈 이래로 여전히 수수께끼로 남아있는 부분이 하나 있다. 우리 팀은 많은 고민과 논의를 거쳐 다양하고도 실험적인 기능들을 부지런히 릴리즈하고 있는데, (어쩌면 너무 실험적이기만 한 게 문제였을지도) 그런 노력이 무안하리만치 가만히 둬도 잘 사용되고 있는 기능이 종종 있다. 이 '실시간 후기'기능도 그런 기능 중에 하나였다.

리트니스의 라이브 혹은 VOD 운동이 종료되고 나면, 모든 유저는 '실시간 후기' 입력 화면을 마주하게 된다. 이 기능은 서비스 초기에 겨우 구색(디자인적인 측면에서)만 맞춰 마련해 놓은 것인데, 우리가 예상했던 것 이상으로 많이, 그리고 잘 사용되고 있다. 어쩌면 많인 분들이 유일하게 쓸만한 기능이라고 생각하시는지도 모르겠다.사장니ㅁ 눈감앗 종종 유저와 코치 간에 오고 가는 대화를 보고 있자면, 나도 저런 멋진 관계성 안에서 함께하고 싶다는 생각도 든다.

아무튼 우리는 아침에 눈을 뜨면, 지난밤 코치님과 유저분들이 나눈 이야기를 쭉 훑어보는 게 삶의 기쁨이오 낙이다. 그래서 더 자랑하고 싶었다.

일단, 하나로 펼쳐져 있던 랜딩페이지를 3개의 탭(내용/후기/QNA)으로 구분했다. 그리고 기존의 가독성이 떨어지는 카드뷰(좌측 화면) 영역을 [수업 후기] 탭으로 분리시키며, 유저의 후기와 코치의 답글을 함께 확인할 수 있도록 펼쳐놓았다. 이어서 여길 좀 봐달라며, [수업 후기] 탭을 빡세게 치장해주었다. 우리가 보여주고 싶은 내용이 바로 여기 있다며, 일단 눈 길 한 번만 달라고 사정하는 마음으로 힘을 줬다.

그 결과, 다행히도 우리의 노력이 민망하지 않게, 많은 분들이 [수업 후기] 버튼을 눌러 주신걸 확인할 수 있었다.

(좌) 줌바 랜딩페이지 / (우) 요가 랜딩페이지

어쩌면 별거 아닐 수 있는 작은 것들이지만, 스타트업에서 3년째 일하고 있는 디자이너에게는 이런 순간들이 신기하고 흥미롭다.

[랜딩페이지 update. 2022.04]

https://w2.thelitness.com/landing/yoga/v1