StoryBrand 프레임워크로 더 나은 홈페이지 디자인하기
게시 됨: 2022-03-11홈페이지는 상점 창과 같습니다. 그들은 소비자에게 비즈니스가 무엇을 하는지, 누가 비즈니스를 운영하는지에 대한 아이디어를 제공해야 하며, 판매, 정보 또는 엔터테인먼트를 위한 실제 품목인지 여부와 상관없이 최소한 제공하는 제품 및 서비스에 대한 힌트를 제공해야 합니다.
상점 창과 마찬가지로 홈페이지 디자인은 사람들이 더 깊이 들여다보게 하거나 방문자의 관심을 끌지 못하게 할 수 있습니다. 브랜드 스토리를 명확하게 전달하는 것은 UX 디자이너가 사람들을 사이트에 머물게 하고 홈페이지를 넘어 탐색할 수 있을 만큼 충분히 참여하는 데 사용할 수 있는 한 가지 방법입니다(StoryBrand 프레임워크는 이에 대한 좋은 로드맵을 제공합니다).
홈페이지의 목표는 무엇입니까?
랜딩 페이지의 목표는 방문자를 전환시키는 것이고 홈페이지의 목표는 방문자를 브랜드에 참여시키고 문제에 대한 솔루션을 제공하는 것입니다. 효과적으로 수행하면 홈페이지 방문자가 고객, 즉 반복 고객이 될 수 있습니다.
홈페이지는 분석과 해당 데이터를 기반으로 성능을 개선한 마케팅 및 디자인 팀 덕분에 지난 수십 년 동안 빠르게 개선되었습니다.
웹사이트가 600개에 불과했던 1993년, 웹사이트의 트래픽을 측정하는 유일한 방법은 방문자 수를 세는 서버 로그였습니다. 그 다음은 조회수 카운터, 그리고 최종적으로는 순 방문자수, 페이지 조회수, 이탈률과 같은 정보를 제공하는 보다 포괄적인 분석 제품군입니다.
해당 분석 데이터를 사용하여 UX 디자이너는 클릭 유도문안 배치를 최적화하고, 사이트 속도를 개선하고, A/B 테스트를 수행하고, 비디오를 사용하여 방문자를 참여시키고, 고품질 이미지를 사용하여 사람들의 관심을 사로잡고, 메시징 도구를 포함하여 성능을 개선할 수 있습니다. 홈페이지. 그러나 이것이 소비자의 충성도와 신뢰를 보장합니까?
홈페이지를 디자인할 때 세 가지 일반적인 함정
기업과 확장 디자이너는 홈페이지를 만들 때 세 가지 주요 함정에 빠지게 됩니다.
- 그들은 중요한 일에 집중하지 않습니다. 그들은 사람들에게 서비스나 제품의 특성에 대해 모두 알려줍니다. 사람들은 이것에 관심이 없습니다. 그들은 비즈니스가 문제를 해결하고 삶을 개선할 수 있다는 것을 알고 싶어합니다.
- 기업은 메시지를 명확하게 전달하지 않습니다. Chartbeat의 Tony Haile이 말했듯이 웹사이트는 방문자의 관심을 끌 수 있는 시간이 15초 미만입니다.
- 그들은 누구의 문제도 해결하지 못하는 나쁜 제품을 가지고 있습니다. 이 경우 디자이너가 비즈니스를 위해 할 수 있는 일은 많지 않습니다.
StoryBrand 프레임워크란 무엇입니까?
일부 기업이 믿는 것처럼 보이지만 로고는 브랜드와 동일하지 않습니다. 그것에서 멀리; 브랜드는 존재 이유가 있는 약속입니다.
사람들은 합리적이고 감정적인 이유로 한 브랜드를 다른 브랜드보다 선택합니다. 강력한 브랜드 메시지는 브랜드가 만드는 개별 제품이 아니라 브랜드 자체에 대한 충성도를 높일 수 있습니다. 그 목적을 달성하기 위해서는 명확하고 일관된 메시지가 필수적입니다. 브랜드를 경쟁 제품과 차별화하는 것은 브랜드의 스토리입니다.
스토리텔링은 기업가들이 피치와 소셜 네트워킹에서 투자자를 유혹하는 데 널리 사용됩니다. Apple과 같은 회사는 명확하고 단순한 스토리텔링의 힘을 이해하고 자신이 하는 모든 일에 통합합니다. 그들은 그것이 그들에 관한 것이 아니라는 것을 압니다. 그것은 그들의 고객에 관한 것입니다.
StoryBrand 프레임워크는 기업이 가장 강력한 메시지를 간단하고 명확하게 전달할 수 있도록 Donald Miller가 만든 스토리텔링 공식입니다. Miller는 자신의 저서 Building a Story Brand 에서 "당신의 브랜드가 아니라 고객이 이야기의 주인공이 되어야 합니다. 이것은 모든 경이적으로 성공적인 비즈니스가 이해하는 비밀입니다.”
클라이언트와 함께 StoryBrand를 사용하는 방법
소규모 회사이든 수백만 달러의 브랜드이든 고객은 고객을 혼란스럽게 하면 비용이 든다는 것을 이해해야 합니다. Miller가 말했듯이 StoryBrand 공식을 통해 메시지를 명확히 하면 "생각을 정리하고 마케팅 노력을 줄이고 혼란을 없애고 경쟁을 겁나게 하고 마침내 비즈니스를 다시 성장시킬 수 있습니다."
Miller는 StoryBrand 구축을 시나리오를 위한 스토리 작성에 비유합니다. 그는 그것을 7개의 플롯 포인트로 나눕니다.
무언가를 원하는 캐릭터 (웹사이트를 사용하는 사람)가 문제 (필요한 것)를 만나면 가이드 (비즈니스)를 만나 계획 을 제시하고(다음 단계를 나타냄) 행동을 촉구합니다(행동 유도 버튼). 이는 성공 사례 로 이어지며(제품을 구매함) 실패를 방지 하는 데 도움이 됩니다(구매하지 않을 경우 발생할 일을 상기시킴).
이 구조는 거의 모든 성공적인 영화에서 볼 수 있습니다. 기업과 고객에게도 적용될 수 있습니다. 다음 단계는 클라이언트가 다음 구조에 따라 브랜드 스토리를 작성하는 것입니다.
- A 캐릭터 : 브랜드가 아닌 스토리의 주인공은 언제나 고객입니다. 일반적으로 UX 연구 및 사용자 테스트를 통해 고객이 브랜드에서 무엇을 원하는지 파악하는 것은 UX 디자이너의 몫입니다. 그들은 사람들을 움직이는 욕구, 즉 재정 자원 절약, 시간 절약, 소셜 네트워크 구축 또는 지위 획득과 같은 것에 집중해야 합니다.
- 문제 있음 : StoryBrand 편에서 악당은 캐릭터의 문제입니다. 그 문제를 의인화하고 회사의 제품이 고객이 문제를 해결하는 데 사용할 수 있는 무기와 같다는 것을 이해하는 것이 유용합니다. 기업은 외부 문제 해결에 집중하는 경향이 있지만 고객은 내부 문제에 대한 솔루션을 구매합니다. 사람들에게는 세 가지 수준의 갈등이 있습니다.
- 외부 (대부분의 기업은 외부 문제를 해결하려고 함)
- 내부(예: 좌절, 위협, 불안)
- 철학적(이 이야기가 왜 중요한가?) - 그리고 가이드를 만난다 : 가이드는 비즈니스 또는 브랜드입니다. 고객은 문제를 처리할 사람이 필요합니다. 브랜드에 대한 그들의 인식은 그들의 신뢰에 결정적인 역할을 할 것입니다. 두 가지 사항을 전달해야 합니다.
- 공감(고객이 느낄 수 있는 고통에 대한 이해 표시)
- 권위(고객에게 브랜드가 그들을 도울 수 있다는 확신을 줄 것입니다) - 누가 그들에게 계획 을 제공합니까? 비즈니스는 고객에게 다음에 해야 할 일을 보여줍니다. 고객은 간단한 실행 계획이 표시될 때까지 구매 여부를 확신하지 못합니다. UX 디자이너는 고객을 위한 정확한 다음 단계를 설명할 수 있습니다. 또한 제품 또는 서비스와 관련된 문제를 해결하여 고객이 가질 수 있는 불안을 완화할 수 있습니다.
- 행동 유도 : 효과적인 클릭 유도문안은 구매 또는 가입을 촉진합니다.
- 그것은 그들이 실패를 피하는 데 도움이 됩니다 . 고객이 위험에 처한 것은 무엇입니까? 이 브랜드에서 구매하지 않으면 무엇을 잃게 될까요?
- 그리고 성공으로 끝남 : 이 특정 행동이 어떻게 그들의 삶을 바꿀 수 있는지 고객에게 말하십시오. 제품을 구매한 후 그들의 삶이 어떤 모습일지, 그리고 그 결의가 어떤 느낌을 줄 것인지 보여주십시오. 스토리텔러가 이야기를 끝내는 세 가지 확실한 방법은 캐릭터가 다음을 수행할 수 있도록 하는 것입니다.
- 권력이나 지위를 얻다
- 그들을 온전하게 만드는 사람이나 무언가를 찾으십시오.
- 자신을 온전하게 만드는 어떤 형태의 자기 실현을 경험하십시오.
홈페이지에서 StoryBrand 프레임워크를 사용하는 방법
홈페이지는 비즈니스에 관한 것이어서는 안 됩니다. 그것은 잠재적인 고객에 관한 것이어야 합니다.
첫 데이트와 마찬가지로 인상이 중요하고 관심을 유도하는 것이 목표입니다. UX 디자이너는 어떤 콘텐츠가 포함되고 어떻게 배열되는지에 대해 전략적이어야 합니다. 이전 섹션에서 설명한 대로 프레임워크를 따르면 디자이너가 올바른 메시지를 올바른 위치에 배치하는 데 도움이 됩니다.
단순하게 들릴지 모르지만 홈페이지를 디자인할 때 염두에 두어야 할 중요한 요소는 다섯 가지뿐입니다.
헤드라인
때때로 매력적인 이미지와 함께 사용되는 헤드라인은 홈페이지 상단에 배치됩니다. 거의 모든 경우에 헤드라인은 고객 중심이어야 하며 방문자에게 브랜드에 혜택을 주는 것이 있음을 보여주어야 합니다. 헤드라인은 다음 중 하나여야 합니다.
- 고객에게 이점을 전달
- 방문자가 가지고 있는 문제를 식별하고 브랜드가 방문자를 위해 해결할 수 있다고 안심시키십시오.
- 비즈니스가 하는 일을 명확하고 간결하게 설명
권위를 보여 신뢰를 만들어라
비즈니스를 고객의 문제에 대한 지침이자 솔루션으로 포지셔닝하는 것이 중요합니다. 신뢰를 만드는 기술을 마스터하는 UX 디자이너는 이 특정 브랜드가 문제에 대한 올바른 솔루션임을 사람들에게 더 쉽게 확신시킬 수 있습니다. 다음과 같이 할 수 있습니다.
- 브랜드를 추천하는 중요 고객의 후기 포함
- 브랜드가 함께 작업한 회사의 로고를 표시합니다.
- 사용자 수, 거래 수 등의 특정 데이터를 표시합니다.
- 수상 및 영예, 출판된 작품, 언론 출연 및 이와 유사한 업적
- 팀 또는 회사의 본사 이미지 표시
행동을 요구하다
홈페이지 방문자와 감성적인 유대감을 형성하는 것은 방문자를 고객으로 전환하는 첫 번째 단계입니다. 감정적 연결이 이루어지면 거래를 성사시키는 것은 행동 촉구에 달려 있습니다.
클릭 유도문안에는 두 가지 종류가 있습니다.
- 직접적인 클릭 유도문안은 구매 또는 가입할 준비가 되었음을 알고 있는 사람들을 위한 것이며 "구매", "가입" 또는 "시작하기"와 같은 언어를 포함합니다. 이러한 CTA를 클릭하면 구매자가 거래를 완료할 수 있는 양식으로 바로 이동합니다.
- 전환 클릭 유도문안은 아직 구매할 준비가 되지 않은 방문자를 위한 것입니다. 그들은 커밋하기 전에 더 많은 시간과 정보가 필요할 수 있습니다. "추가 정보", "무료 체험" 또는 "문의하기" 유형의 버튼 형태로 제공됩니다.
일부 클릭 유도문안은 두 가지를 결합하거나 나란히 배치할 수 있습니다(종종 "지금 구매" 및 "자세히 알아보기" 버튼 쌍으로 표시됨).
매력적인 이미지
홈페이지의 내용이 아무리 진지하더라도 StoryBrand 프레임워크는 해피엔딩을 요구합니다. 이미지를 선택할 때 그 중 일부는 "행복한" 느낌을 주어야 한다는 점을 염두에 두십시오.
이미지는 방문자의 감정, 특히 행복한 사람들의 이미지에 호소합니다. 행복한 사람들의 사진을 보여주면 사람들이 구매했을 때 자신의 해피엔딩이 어떨지 상상하는 데 도움이 됩니다.
짧은 텍스트
텍스트는 적을수록 좋습니다. 많은 소비자는 긴 텍스트 블록을 읽지 않으므로 가능한 한 적은 단어로 브랜드 메시지를 전달하는 것이 가장 좋습니다.
UX 디자이너는 클라이언트가 가장 간단한 방법으로 자신의 이야기를 공유할 수 있도록 도와야 합니다.
성공적인 홈페이지는 주요 질문에 답합니다
성공적인 홈페이지는 5초 이내에 방문자의 관심을 끌 수 있습니다. 거기에서 사람들이 홈페이지를 방문할 때 (종종 무의식적으로) 묻는 세 가지 질문에 답하는 데 약 15초가 소요됩니다.
- 그들은 무엇을합니까?
- 그들은 어떻게 나를 도울 수 있습니까?
- 구매하거나 참여하려면 어떻게 해야 합니까?
UX 디자이너는 StoryBrand 프레임워크를 사용하여 즉시 관심을 끌고 해당 질문에 효과적으로 답변하는 홈페이지를 만들 수 있습니다. 디자이너와 브랜드 모두에게 명확한 성공 경로를 제공합니다.
당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.
• • •
Toptal Design 블로그에 대한 추가 정보:
- 모든 트렌드가 가치가 있습니까? 웹 디자이너가 저지르는 가장 흔한 5가지 UX 실수
- 효과적인 방문 페이지를 디자인하는 방법
- 변환용으로 제작 – 랜딩 페이지 디자인 모범 사례
- 전자 상거래 웹 사이트 디자인에 대한 궁극적인 가이드
- 정보 아키텍처에 대한 종합 가이드