brunch

라이킷 66 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 하은 May 07. 2022

SaaS 스타트업 메인 페이지 개편하기(2)

현생에 치여.. 네 달 만에 2편을 작성하게 되었습니다(..) 이전 글에선 문제 정의와 개선 방향을 다뤘습니다.

이어서 이번 글에선 개선안과 결과에 대해 이야기하고자 합니다.

앞선 글에 말했듯 개선 포인트를 크게 4가지로 잡은 후 디자인 작업에 들어갔다.

1. 주요 서비스를 한눈에 파악할 수 있는 구성
2. 시스템(파스토 FMS) 강조
3. 간결하고 이해하기 쉬운 UX Writing
4. 가독성을 위한 텍스트와 이미지 레이아웃

상단 영역

텍스트를 덜어내고, 서비스를 직관적으로 나타내고 싶었다. 슬로건과 메인 비주얼을 강조한 배너 아래에는 파스토를 사용하면 어떤 문제를 해결할 수 있는지를 문장으로 전달했다. 풀필먼트라는 단어 자체를 강조하기보다 풀필먼트의 역할을 풀어서 설명했다.

기존 상단 배너와 후기 사이에 있었던 광고 영역은 최상단으로 옮겼다. 콘텐츠와 분리되다 보니 콘텐츠 흐름도 끊기지 않고, 컬러나 그래픽도 전보다 제약 없이 만들 수 있었다.

중간 영역(1) - 서비스 소개

먼저, 반복되는 레이아웃과 어두웠던 분위기를 없앴다. 볼드한 텍스트와 그래픽을 활용해 시원시원한 레이아웃으로 해당 영역 자체를 강조하려 했다. 4개의 카드 중 상단 2개는 FMS(Fulfillment Management System)를 모바일과 PC로 나눴고, 하단 2개의 카드는 온라인 판매자들이 메리트를 느낄만한 요소를 그래픽과 함께 설명했다.

Writing에도 신경을 많이 쓴 영역이다. 자세히 읽어야 하는 서브 텍스트를 지양했고, 전달하고 싶은 바를 최대한 간결하고 확실하게 썼다.

중간 영역(2) - 영상

기존 영상과 텍스트의 2단 그리드를 없애고, 영상 위에 타이틀과 서브 텍스트를 함께 노출하여 영상에만 집중할 수 있게 했다. progress bar를 통해 영상의 진행도를 파악할 수 있게 했고, autoplay로 영상을 롤링시켰다.
현재는 자동화설비 도입, 스마트 물류센터 1호, 배송 프로세스, 파스토 앱 총 4개의 영상이 돌아가고 있다. 조만간 새로운 영상이 추가될지도..!

중간 영역(3) - 고객후기

텍스트 위주였던 고객후기는 썸네일 형식으로 변경했다. 인터뷰 콘텐츠인 만큼 실제 파스토를 사용하고 있는 고객사분들의 얼굴이 나오면 좋겠다고 생각했고, 마케터님의 도움을 받아 사진을 활용할 수 있었다.
위치도 메인페이지 상단에서 중간으로 변경하였다. 어떤 서비스인지 파악하기 전에 "우리 서비스 좋아요"라고 어필하기보다 서비스 소개 후 신뢰를 주기 위한 요소로써 고객후기를 중간에 배치했다.

+ 메인 페이지 개편 전 고객후기 페이지를 먼저 개편할 예정이라 각 고객사별 인터뷰 페이지 디자인을 완료해놓은 상태였다. 이와 연결된 작업으로 고객후기 썸네일을 각각의 인터뷰 페이지로 연결시켰다. 개발 일정 상 고객후기 페이지 개편이 더 늦게 되어 바로 적용되진 못했지만 지금은 적용된 상태다.

하단 영역

앞서 중간영역(1)에서 간략한 서비스 소개를 했다면, 하단 영역에선 실질적으로 파스토가 어떤 서비스를 제공하는지 소개했다. 6가지의 주요 서비스를 메인페이지에서 다 설명하기보다 한눈에 볼 수 있게 배치했고, 자신이 관심 있는 서비스를 선택하여 자세한 설명을 볼 수 있도록 페이지 이동을 유도했다.
파트너사 소개는 개수를 맞춰야 하는 운영적인 이슈를 해결하기 위해 로고 스케일을 키우고 두 줄 롤링으로 디자인을 변경했고, 최하단 배너는 서비스 신청하기와 요금안내보기 CTA를 강조하기 위해 아이콘과 텍스트를 최소한으로 사용했다.

개선 결과

1. 스크롤 높이값, 페이지 탐색 시간 증가

개선 전 후 Scroll Heatmap

개선 전 후 2주간의 데이터를 뷰저블 Scroll Heatmap으로 확인해봤다. 스크롤 높이값과 페이지 탐색 시간이 늘어났다. 페이지 탐색 시간은 7초에서 12.1초로 70% 증가했고, 스크롤 높이는 약 2800px에서 약 4600px로 62% 증가했다.

전체 사용자 중 25%의 사용자가 도달한 지점을 비교해봤을 때, 개선 전보다 프로덕트와 서비스를 훨씬 빨리 인지시킬 수 있었다.

2. 전반적인 관심도 증가

개선 전 후 Move Heatmap

Move Heatmap으로 개선 전 대부분 GNB와 상단 영역쪽에만 몰려있었던 마우스 움직임이 개선 후 페이지 전반적으로 분포된 것을 확인할 수 있었다. 전체 페이지의 길이도 10000px대에서 7000px대로 줄였기 때문에, 페이지 최하단 영역에도 마우스 움직임이 증가한 것으로 보인다.