B2B SaaS 웹사이트 리뉴얼
브랜드 경험의 첫 단추를 잘 끼울 수 있도록
나는 B2B, 그중에서 기업에게 SaaS를 제공하는 스타트업의 UX/UI 디자이너로 일하고 있는데, 이번에 프로덕트가 업데이트되면서 웹사이트 개편도 맡게 되었다. 웹사이트가 프로덕트 자체는 아니지만, 작은 규모의 스타트업 특성상 여러 디자인을 맡아서 하는 경우가 많다. 그리고 어찌 보면 잠재적 사용자가 실제 제품보다 먼저 브랜드와 만나는 접점이기 때문에 그 경험을 설계한다는 점에서 UX와 관련이 있다고 볼 수 있다. 그래서 이곳에 어떻게 웹사이트를 바꿨는지 정리해두려고 한다.
[목차]
1. 목적 및 기대 효과
2. 주안점
3. 구조와 콘텐츠
4. 보이스&톤
1. 목적 및 기대 효과
가장 큰 이유는 일단 프로덕트 자체가 리뉴얼됨에 따라 웹페이지도 디자인 업데이트가 필요했다. 조금 더 세부적으로 들어가 보면, 기존 웹사이트는 크게 2가지 문제점이 있었다.
1) 다양한 정보가 두서없이 나열되어 있음
2) 딱딱하고 브랜드의 특성이 드러나지 않는 디자인
이러한 단점을 개선해서, 더 나은 가독성으로 제품에 대한 정보와 브랜드의 이미지를 전달할 수 있는 공간이 되는 것이 목적이었다. 이에 따른 기대 효과는 브랜드에 대한 긍정적인 첫인상을 제공하고 더 나아가서 '이거 솔깃한데?'라고 생각할 수 있게 만드는 것이었다.
2. 주안점
웹사이트를 주로 방문할 핵심 타겟을 생각해봤다. '광고나 검색을 통해 유입된, 우리가 제공하는 프로덕트에 대해 궁금한 실무 담당자'가 1순위가 될 거라고 예상했다. 우리가 직접 연락을 보내는 기업 담당자도 물론 검색해서 사이트를 들어올 수 있지만 서비스 소개서를 함께 보내기 때문에, 조금 더 초점을 우리 서비스에 대해 배경 지식이 없는 사람들에게 맞췄다.
B2B 서비스는 커머스처럼 쇼핑하면서 자연스럽게 이용해볼 수 있는 것도 아니고, 스토어에서 다운로드하여 써볼 수 있는 앱이 아니다. 그렇기 때문에 제품에 대한 상세한 설명은 물론, 다른 툴과는 어떻게 다른지 이걸 사용해서 어떤 이점이 있는지를 잘 보여주는 것이 중요하다. 하지만 너무 긴 글과 구구절절한 설명은 이탈의 원인이 되므로 적절한 이미지를 함께 배치하고 핵심 내용을 압축해서 중복 없이 보여줘야 한다.
3. 구조와 콘텐츠
여러 B2B 서비스의 웹사이트를 참고하여 목차에 해당하는 기존의 탑 내비게이션 바를 업데이트했다. 홈페이지(메인)를 포함해서 메인/프로덕트 소개/제공하는 솔루션/가격 안내/회사 소개 총 5개의 탭으로 구성했다. 회사가 아닌 프로덕트 자체를 소개하는 페이지들에서는 핵심 문구와 히어로 이미지로 시선을 사로잡도록 했고, CTA버튼을 사이트의 최상단과 최하단에 각각 배치하여 세일즈 팀과의 연결을 유도했다. 각 페이지의 콘텐츠는 다음과 같다.
1) 메인 : 마치 상세페이지와 같이 논리적인 흐름을 바탕으로 프로덕트에 대해 보여준다. 핵심 3가지 포인트, 다른 서비스와의 차별점, 그리고 실제 사용한 사람들의 후기 순으로 배치했다.
2) 프로덕트 소개 : 메인에서는 맛보기로 이런 핵심 가치를 전달해요!라고 이야기했다면, 이 페이지에서는 조금 더 구체적으로 서비스를 소개한다. 각 기능과 이것이 왜 중요하고, 어디에 활용할 수 있는지, 그리고 우리 서비스의 뾰족한 장점이 무엇인지 함께 보여준다.
3) 제공 솔루션 : 프로덕트 소개가 '기능'에 대한 안내에 집중했다면 솔루션은 여기서 한 단계 더 나아가서 이 서비스를 통해 구체적으로 어떤 걸 얻을 수 있는지, 그 '결과'를 보여준다. 많은 기능들에 대한 설명을 보고, 그래서 결론적으로 뭘 얻을 수 있는데? 에 대한 답이라고 할 수 있다. 어느 정도 데이터를 보고 활용할 줄 아는 사람이라면 기능들만 보고도 뭘 할 수 있겠다, 내가 원하는 데이터를 얻을 수 있겠다라고 유추할 수 있겠지만, 그렇지 않은 사람에게는 솔루션이 서비스에 구미가 당기는 지점이 될 것이라 생각한다.
4) 가격 안내 : 무료가 아닌 이상 당연히 모든 사람들이 가장 궁금해하는 부분일 것이다. 가격을 다 노출하는 곳도 아닌 곳도 있지만, 공통점은 어떤 식으로 가격 제도가 나눠져 있고 그 안에 어떤 서비스들이 포함되는지 알려주고 있다. 이 부분은 각 사업의 특성에 맞춰 노출 방식과 여부를 판단하는 것이 필요하다.
5) 회사 소개 : 회사 소개는 다시 브랜드 자체에 대한 소개, 채용, 그리고 고객 센터 등으로 나눠진다. 투자자나 구직자가 아니면 사실 회사 소개는 많은 사람들이 보는 페이지는 아닐 수 있다. 하지만 회사의 비전과 핵심 가치, 문화, 뉴스 보도나 구성원 같은 요소들이 그 브랜드의 이미지를 만들고 알게 모르게 많은 영향을 준다. 특히 비전, 미션, 가치, 문화.. 등 탄탄한 브랜드 코어는 꼭 누군가에게 보여주기 위함이 아니라 조직의 내부 구성원들의 일하는 마음가짐과 방식에도 큰 역할을 하므로 잘 정돈할 필요가 있다고 생각한다.
또한, 좋은 브랜딩은 인재를 부르고 그것이 더 좋은 브랜드가 되는 선순환을 불러올 수도 있다.
4. 보이스&톤
프로덕트를 리뉴얼하기 위해 디자인 시스템을 만들 때 우선되어야 하는 요소였다. 만약 우리 제품이 사람이라면 사용자에게 어떤 말투와 태도로 말을 걸까?라고 생각해보는 것부터 시작했다. (마치 아이언맨의 쟈비스와 같은 비서를 상상하는 것이 가장 도움이 된 것 같다.) 서비스의 특징뿐만 아니라 브랜드의 비전과 미션을 바탕으로 어떤 제품이 되고 싶은지, 이를 어떻게 잘 전달할 수 있는지를 고려하는 단계도 거쳤다.
이를 위해 참고할 수 있는 것은 닐슨 노먼 그룹에서 제시한 4가지 톤의 분류, 혹은 마이크로카피 책에도 소개된 Big Brand System의 성격 척도다.
[닐슨 노먼 그룹의 4가지 tone of voice]
1. Funny ↔️ Serious
2. Formal ↔️ Casual
3. Respectul ↔️ Irreverent
4. Enthusiastic ↔️ Matter of fact
https://www.nngroup.com/articles/tone-of-voice-dimensions/
[Big Brand System의 성격 척도]
좌측과 우측 중 어느 쪽에 더 가까운지 표시를 해서 우리 브랜드의 성격을 정리하는 데 활용할 수 있다. B2B는 전문성을 강조하다 보면 자칫 딱딱하게 느껴질 수 있다. 우리의 목적은 관련 지식이나 전문성이 부족한 사람도 장벽 없이 서비스를 활용해서 원하는 결과를 얻을 수 있도록 하는 것이었다. 그래서 '해요'체를 활용해서 부드러운 느낌을 주고 모든 용어는 쉽게 풀어쓰고자 했다. 또 '~해라'보다는 사용자가 얻을 수 있는 것이 무엇인지 알려주는 방식으로 행동을 유도했고, 무엇보다 간결하게 핵심만 전달하고자 노력했다.
이렇게 정리한 보이스&톤은 '일관성'이 가장 중요하다. 프로덕트에서도, 웹사이트에서도 이 브랜드는 이런 느낌이구나 라는 걸 알 수 있도록 단어 선택, 말투, 표현 방식 등을 통일시켰다. UX writing에 대한 관심과 그 중요성이 점점 커지고 있는 지금, 나도 이에 대해 격하게 공감하고 있어서 한 문장도 허투루 쓰지 않기 위해 여러 번의 퇴고를 거쳤다.
웹사이트에 들어온 잠재적 고객들에게 어떤 논리적인 흐름으로 우리를 잘 보여줄 수 있을지 구조와 콘텐츠를 짜고, 콘텐츠 속 이미지에 핵심 내용을 어떻게 잘 담을 수 있을지 고민의 연속이었다. 이번 웹사이트 리뉴얼을 진행하면서 역시 디자인은 설득이 중요하다는 생각이 들었다. 그냥 보기에 예쁜 것이 아니라 의도와 목적이 담긴 그런 디자인. 이것이 하면 할수록 어렵지만 재밌는 이유인 것 같다.
