SaaS 스타트업 메인 페이지 개편하기(1)
SaaS 서비스는 메인 페이지에서 어떤 정보를 제공해야 할까?
Overview
흔히 IT 서비스를 이야기할 때 '비타민인가, 페인킬러인가?'라는 구분을 하곤 한다. 비타민은 삶의 질이나 재미를 높일 수 있는 것에, 페인킬러는 불편함과 문제를 해결하는 것에 중심을 둔다.
SaaS(Software as a Service) 서비스는 비교적 사용 타깃층이 명확하고, 이들의 문제와 불편함을 해결하기 위해 존재한다는 목적성이 뚜렷하다. 마찬가지로 사용자들도 서비스를 쓰는 이유가 뚜렷하다. 자신이 해당 서비스를 사용하며 불편함을 줄이고, 더 효율적으로 작업할 수 있음을 기대한다.
SaaS 서비스는 메인 페이지에서 어떤 정보를 제공해야 할까? 파스토 메인 페이지를 개선하며 고민했던 점과 방향에 대해 이야기해보려 한다. (본인은 그래픽을 제외한 기획 및 UXUI 전반에 참여했습니다.)
*파스토는 온라인 판매자를 위한 풀필먼트 서비스를 제공하는 IT 물류 플랫폼 스타트업입니다.
문제 정의
먼저 다음과 같은 기준을 세운 후 메인 페이지를 살펴보았다.
1. 어떤 서비스를 제공하는지 쉽게 인지되는가?
2. 고객이 어떤 문제를 해결할 수 있는지 전달되는가?
3. 읽고 싶은 페이지인가?
개선 전 메인 페이지1. 어떤 서비스를 제공하는지 쉽게 인지되는가?
최상단 배너에 있는 슬로건으로 풀필먼트 서비스라는 건 바로 파악할 수 있었다. 다만, 풀필먼트 범위 안에서도 어떤 서비스를 제공하는지가 한눈에 잘 들어오지 않았다. 페이지 중앙에 백그라운드 이미지와 함께 해외 배송, 원데이 배송 등 주요 서비스가 나열되어 있지만 똑같은 레이아웃이 길게 반복되다 보니 집중도가 떨어지는 점이 아쉬웠다.
2. 고객이 어떤 문제를 해결할 수 있는지 전달되는가?
더 친절하게 전달할 수 있는 지점들이 보였다. 예를 들면 PC와 모바일 환경을 모두 제공하고 있으니 사용해보라는 말이 "언제 어디서나 편하게 파스토하세요!" 라는 문장으로 커뮤니케이션되고 있었다. 맥락을 살펴보면 충분히 이해가 가능한 문장이고, 파스토의 아이덴티티를 강조하는 방향일 수 있지만 고객이 맥락을 유추할 필요 없이 직관적으로 알게 하고 싶었다.
또한, 페이지 상단에 위치한 사용자 후기 내용이 잘 전달되지 않아 아쉬웠다. 후기는 서비스의 솔루션과 장점을 고객의 입장에서 와닿게 전달할 수 있는 요소다. 그러나 많은 양의 텍스트로 단순 나열되어 눈에 잘 들어오지 않아 개선이 필요했다.
3. 읽고 싶은 페이지인가?
주관적인 답변이 나올 수 있는 질문이지만 각 구성별로 아쉬웠던 부분을 정리해보았다.
(1) 상단 영역
메인 페이지 상단페이지 전체에서 제일 아쉬웠던 부분은 상단 영역이었다. Average Fold(스크롤을 하지 않아도 기본적으로 보이는 영역) 바로 아래는 제휴 업체 광고 배너와 앞서 언급한 후기로 구성되어 있는데, 스크롤을 내리자마자 텍스트의 양이 너무 많아 읽기 전에 이미 피로감을 느꼈다(..)
뷰저블을 통해 스크롤 데이터를 확인해보니 역시나 급격한 감소를 보였다.
Scroll, Move Data무브 데이터로 마우스 움직임도 확인해봤다. 메인 페이지 전체를 기준으로 봤을 때 후기 영역에 마우스 움직임이 활발했다. 이 두 가지 데이터로 전체 사용자 대비 후기까지 도달하는 비율은 적지만, 후기 내용 자체에는 관심이 있다는 것을 확인할 수 있었다. GNB 두 번째 메뉴에 '고객 후기'가 있기 때문에, 메인 페이지에서 후기를 세세하게 보여주기보다 텍스트 양을 줄이고 이미지를 활용하여 눈에 잘 들어오게 변경하기로 했다.
(2) 중간 영역
메인 페이지 중간 - 서비스 소개중간 영역은 주문연동, 자동 출고, 원데이 배송 등 고객들이 필요로 할 주요 서비스가 소개되어 있었다. 문제정의에서 언급했듯 똑같은 레이아웃이 길게 반복되다 보니 집중도가 떨어졌고, 4000px 이상의 많은 높이값을 차지하고 있어 주요 서비스를 한눈에 파악하기엔 조금 어려웠다. 또한, 백그라운드 이미지가 전반적으로 어두워 페이지 자체가 무거운 느낌이 들었고 하얀색 텍스트와 대비가 명확하지 않아 가독성도 낮았다.
(3) 하단 영역
메인 페이지 하단오프라인과 연결되어있는 서비스다 보니 그래픽보다 사진과 영상으로 정보를 전달하는 게 매우 효과적일 때가 있다. 고객의 상품이 보관되는 센터 내부와 택배 발송까지의 과정을 담은 영상을 보고 서비스에 대한 신뢰감을 느낄 수 있었다. 다만 영상과 텍스트가 2단 그리드로 구성되어있어 좌우를 왔다 갔다 하며 봐야 하는 점이 불편했다.
파스토 FMS(Fulfillment Management System)는 PC와 모바일 환경을 제공한다. 시공간 제약 없이 물류현황을 볼 수 있다는 점이 큰 메리트이기 때문에 이 부분도 기존보다 더욱 강조하기로 했다.
파트너사의 경우 변동이 있을 때마다 한 줄에 다섯 개씩 개수를 맞춰야 하는 운영적인 이슈가 있어서 두 줄 롤링으로 디자인을 변경하기로 했다.
개선 방향
위 문제 정의를 토대로 주요 개선 방향을 잡았다.
1. 주요 서비스를 한눈에 파악할 수 있게
2. 시스템(파스토 FMS) 강조
3. 간결하고 이해하기 쉬운 UX Writing
4. 가독성을 위한 텍스트와 이미지 레이아웃
2편에서는 개선 방향을 잡은 후 디자인 과정과 아웃풋에 대해 이야기해보려 한다.
https://brunch.co.kr/@jinhaeun/15
