2021 소비자만족 브랜드 대상 1위
게입업계 대기업 취업률 1위인
취업 컨설팅 업체
위 업체의 이름은 바로 ‘이븐아이’입니다.
이븐아이는 전문성을 갖춘 기업이었지만, 올드하고 광고 느낌이 나는 홈페이지 디자인으로 인해 기대했던 것만큼 강의 구매가 일어나지 않았습니다.
홈페이지의 전반적인 내용은 좋았으나 디자인이 전문성을 떨어뜨렸기에 사용자가 부정적인 고객경험을 느끼게 되었던 것인데요.
이러한 문제로 인해 홈페이지 리뉴얼이 필요한 상황이었지만, 리뉴얼을 진행하기 위해 정리된 자료도 없었으며 이를 준비할 시간 또한 부족했습니다.
이븐아이 측에서는 자료도 시간도 없는 상황에 리뉴얼을 하기 위해선 실력 있고 믿을만한 업체를 고르는 것이 유일한 방법이라고 생각하셨는데요.
그렇게 인터넷 검색을 통해 여러 업체를 찾아보았으나, 뭔가 부족함을 느끼며 계약을 주저하셨다고 합니다.
부족한 업체들 사이에서 갈팡질팡하시다가 결국 아몽소프트웨어를 발견하셨고, 함께 인강사이트제작을 마음을 먹으셨는데요.
그렇게 아래와 같은 결과물을 얻어가셨습니다.
(Before) 리뉴얼 전 홈페이지 모습
(After) 리뉴얼 후 홈페이지 모습
메인페이지부터 서브페이지까지 전부 새롭게 리뉴얼 된 이븐아이의 홈페이지는 과연 어떤 모습일까요? 인강사이트제작을 검색하셨다면 끝까지 봐주시길 바랍니다.
인강사이트제작, 이븐아이 홈페이지 리뉴얼
이븐아이는 취업 컨설팅 회사로, 온라인 강의를 제공하는 사이트인데요. 이같은 인강사이트의 핵심은 무엇일까요?
눈치 빠른 분이라면 아시겠지만, 바로 많은 강의 구매가 일어나는 것입니다.
강의 구매가 일어나기 위해선 사용자가 사이트에 방문한 뒤 구매까지 이어지도록 유저 플로우 및 단계별 Funnel을 잘 설계해야 하는데요.
이븐아이의 대표님께선 이같은 전략기획과 마케팅을 매우 잘하셨기에 아몽소프트웨어는 그런 강점을 살릴만한 디자인에 대해 고민했습니다.
구매가 일어나는 디자인과 LMS로써의 기능까지 모두 챙겨야 하는 상황에 아몽소프트웨어는 어떤 방식으로 제작을 진행했을까요?
그에 대한 해답은 아래에 나와 있으니, 천천히 읽어주시면 감사드리겠습니다.
인강사이트제작, 이븐아이 디자인
1. 전환이 일어나기 위한 첫번째 단계, 히어로섹션
설명하기에 앞서, 히어로섹션이라는 말이 생소하신 대표 / 담당자님을 위해 간단히 설명해 드리겠습니다.
평소 홈페이지에 방문했을 때 가장 먼저 보이는 것은 무엇인가요?
아마 홈페이지 최상단에 있는 배너이미지가 먼저 보일 것 입니다.
배너이미지와 같이 가장 먼저 보이는 첫 화면을 바로 히어로 섹션이라고 부르는 것인데요.
히어로섹션은 홈페이지의 첫인상을 결정함과 동시에, 사용자의 이탈여부를 가를 수 있기 때문에 가장 많은 공을 들이게 됩니다.
이븐아이의 경우 취준생이 홈페이지 타겟층이었지만, 구체적으로 파고 들자면 24-29세의 스펙이 낮은, 취업이 간절한 취준생이 핵심 타겟층이었습니다.
따라서 이들의 마음을 사로잡을만한 카피라이팅과 디자인이 매우 중요했는데요.
|
❌ Before page |
기존 이븐아이의 홈페이지는 학점 2.3, 게임에 관심도 없던 흙스펙 문과생 등의 타겟층의 관심을 끌만한 자극적인 카피라이팅을 많이 사용했습니다.
하지만, 폰트의 크기가 매우 작아 카피라이팅이 눈에 들어오지 않았는데요.
또한 폰트가 모두 같은 크기, 같은 굵기를 하고 있어 어떤 문장이 중요한 정보인지 우선순위가 정해지지 않는다는 문제가 있었습니다.
심지어는 하단의 CTA버튼이 카카오채널로 이어지게 되어 홈페이지 이탈을 만들어냈는데요.
(CTA : Call To Action의 약자로 행동을 유도하는 것을 말한다.)
이탈이란 첫 페이지에서 사용자가 나간 것을 의미합니다. 이같은 이탈률이 높아진다면 SEO점수가 떨어지게 되고, 구글에선 해당 사이트를 상위노출 시키지 않게 됩니다.
당장에도 사람들은 네이버나 구글과 같은 검색엔진에서 맨 위에 있는 글만 클릭하는데, 홈페이지가 그 안에 노출되지 않는다면 마케팅적으로도 매우 큰 손실이 발생하게 됩니다.
|
✅ After page |
아몽소프트웨어는 초록색 바탕에 흰색 글씨로 칠판을 연상케 하여 교육사이트라는 느낌이 들도록 강조하였고, 한 눈에 알아보기 쉽도록 디자인 하였습니다.
또한, 기존 홈페이지와 다르게 폰트의 크기와 굵기를 다르게 하여 정보의 위계질서를 분류하고자 하였습니다.
타이핑 인터랙션을 통해 메인 카피라이팅이 총 3가지 문장으로 나오게 하였는데, 이를 통해 사용자의 시선을 사로잡아 홈페이지 체류시간을 높였습니다.
뿐만 아니라 기존의 카카오채널로 이탈되던 CTA버튼을 홈페이지 내의 섹션으로 이동하도록 변경하여 이탈률이 높아지는 것을 방지하였습니다.
2. 이븐아이를 소개하는, 카피라이팅 섹션
히어로 페이지에서 사용자의 이탈을 막고, 관심을 유도하였다면 이븐아이가 어떤 업체인지 소개할 차례인데요.
여기서 핵심은 회사의 연혁부터 경력까지 구구절절 설명하는 것이 아닌, 사용자가 봤을 때 확 이끌릴만한 셀링포인트를 찾아 소개하는 것입니다.
|
❌ Before page |
리뉴얼 전 이븐아이 소개 섹션의 경우, 취준생 타겟층이 이끌릴만한 셀링포인트를 잘 언급했지만 디자인적으로 매력이 없다는 문제가 있었는데요.
|
✅ After page |
아마 글을 읽고계시는 분들 중 ‘와.. 이렇게까지 디자인이 바뀔 수 있다고?’와 같은 생각을 하시는 분도 있을 거라 생각됩니다.
기존 흰 바탕에 검은 글씨만 존재하던 디자인과 달리, 폰트의 크기와 굵기를 다르게 배치하여 읽는 사람 입장에서 가독성을 높이는 디자인을 진행하였습니다.
뿐만 아니라, 이븐아이의 메인 컬러인 초록색을 통해 강조를 하여 소비자에게 확실하게 이븐아이의 이미지를 브랜딩하고자 하였습니다.
3. 구매를 유도하는 셀링포인트 섹션
셀링포인트 섹션은 이븐아이와 같이 전환을 유도하는 랜딩페이지에서는 가장 중요한 핵심 요소라고 할 수 있습니다.
만약 해당 섹션이 존재하지 않는다면 소비자들은 구매를 통해 자신이 얻을 수 있는 것을 깨닫지 못할 것이고, 그렇다면 구매의사는 사라질 것 입니다.
|
❌ Before page |
기존 이븐아이 홈페이지의 셀링포인트 섹션은 합격 후기와 겜설팅 소개, 칼럼을 한 곳에 모아둔 디자인이었는데요.
합격 후기를 제외한 나머지 섹션들의 크기가 작아 글이 잘 읽히지 않을 뿐더러, 눈에 들어오지 않는다는 문제가 있었습니다.
|
✅ After page |
아몽소프트웨어는 한 곳에 모여있던 다양한 셀링포인트 섹션을 여러 가지 섹션으로 나누어 더 많은 셀링포인트를 추가할 수 있게함과 동시에, 디자인적인 부분을 챙기고자 하였습니다.
컨설팅 전 후를 드래그하여 볼 수 있도록 인터랙션을 구현하거나, 슬라이드를 통해 리뷰를 넘길 수 있도록 하여 UI뿐만 아니라 UX를 고려한 디자인을 진행하였습니다.
4. 신뢰감을 증대하는 합격 섹션
이븐아이와 같은 취업 컨설팅 업체에서 가장 중요한 KPI는 무엇일까요?
바로 수강생이 기업에 합격한 사례일텐데요.
따라서 이븐아이의 대표님께서는 실제로 수강생을 합격시킨 기업의 로고를 홈페이지에 넣어 신뢰감을 형성하고자 하셨습니다.
|
❌ Before page |
기존 홈페이지에서는 많은 기업의 로고를 활용하여 전문성과 신뢰성을 입증할 수 있었지만, 디자인이 매우 올드하며 광고와 같은 느낌이 많이 들었습니다.
대부분의 사람들은 광고에 예민하여 지나치게 광고같은 느낌이 든다면 부정적으로 생각을 하기 마련인데요.
|
✅ After page |
아몽소프트웨어는 수강생 합격 기업의 로고를 흑백 색상으로 바꾸고 두 줄로 나누어 통일감을 주고자 하였습니다.
또한 슬라이드 인터랙션을 통해 로고가 넘치더라도 줄바꿈을 하는 것이 아닌, 한 줄에서 볼 수 있도록 트렌디한 디자인을 진행하였습니다.
인강사이트제작, 이븐아이 LMS에 사용된 기술
앞서 이븐아이는 강의 구매를 유도하는 랜딩페이지의 요소도 있지만, 온라인 클래스를 제공하는 강의사이트라고 말씀드렸던 것을 기억하시나요?
아무리 랜딩페이지에서 구매를 유도하는 기획을 잘 설계했다고 하더라도, LMS의 기능이 제대로 갖춰지지 않는다면 사용자는 구매를 하지 않거나 강의를 구매하자마자 환불을 할 것 입니다.
따라서 아몽소프트웨어는 강의 사이트의 기능을 완벽하게 구현하는 것을 목표로 홈페이지 제작을 진행하였는데요.
그에 대한 내용은 아래에 있으니 지금 바로 설명드리도록 하겠습니다.
1. 동영상 기능
간혹 강의사이트에서 강의를 모두 수강하였는데도 불구하고 몇 초를 남겼다는 이유로 수강완료가 되지 않으신 적, 있지 않나요?
아몽소프트웨어는 그러한 불편함을 없애고자 강의 동영상 아래에 완료하기버튼을 추가하였습니다.
뿐만 아니라, 영상의 품질과 속도를 조절할 수 있게하여 상황과 기호에 맞게 사용자가 편리하게 영상을 시청할 수 있도록 하였습니다.
만약 인터넷 상태가 좋지 않은 곳에서 강의를 시청해야 하는 상황에 화질을 조절할 수 없다면 영상이 계속 끊어지는 불편함이 생기겠죠?
아몽소프트웨어는 이같은 고객경험을 고려하여 편의 기능을 추가하였습니다.
2. 서버 사이즈
위 사진은 1강의 강의리스트입니다.
1강만 해도 강의 갯수가 수십 개가 넘어가는데, 사이트 전체로 따지면 10분이 넘는 강의 동영상이 수 백개씩 업로드 될 것입니다.
그렇다면, 안 그래도 서버에 많은 용량을차지하는 영상을 10,000명의 사람들이 동시에 시청한다면 어떤 일이 벌어질까요?
높은 확률로 서버에 과부하가 걸리고, 사이트 전체가 다운되는 상황이 벌어질 것입니다.
이같은 상황을 막기 위해선 처음부터 큰 돈을 주고 높은 트래픽을 견딜 수 있는 탄탄한 서버를 결제하셔야 하는데요.
하지만, 증가하는 트래픽을 정확하게 계산하긴 힘들 뿐더러 높은 용량의 서버를 결제하게 되면 너무 많은 금액이 낭비될 것 입니다.
이런 문제를 해결하고자 아몽소프트웨어는 트래픽 증가량에 따라 서버 사이즈를 조절하는 기술을 도입했는데요.
해당 기술의 이름은 Auto Scaling(오토 스케일링)으로, 말그대로 자동으로 서버를 조절하는 기술입니다.
이 기술로 인해 서버에 들이는 예산을 줄일 수 있었을 뿐더러 사이트가 다운되는 상황을 막을 수 있었습니다.
만약 쇼핑몰이나 LMS와 같이 동시 접속자가 많아 트래픽이 한 번에 증가할 수 있는 서비스를 제작하시려면, 오토 스케일링과 같은 기술을 활용하여 서버 용량을 조절하시기 바랍니다.
지금까지 이븐아이의 인강사이트제작 사례를 설명드렸습니다.
글을 마치기 전 한 가지 드릴 말씀이 있습니다.
이번 글의 제목은 ‘대기업 취업률 1위가 인강사이트제작을 맡긴 이유?’였습니다.
똑똑하신 분들이라면 이미 눈치채셨겠지만, 그 이유에 대해선 이번 글에 아주 잘 나와있습니다.
바로 아몽소프트웨어가 고객경험을 중요시 하였기 때문입니다.
LMS와 같이 구매전환을 통해 수익을 내는 홈페이지의 경우, 사용자가 어떻게 하면 구매를 할지 잘 설계하는 것이 중요합니다.
아몽소프트웨어는 지금까지 100개 이상의 랜딩페이지를 기획하면서, 어떤 업종에선 어떤 기획을 진행해야 구매가 일어날지를 파악하는 능력을 얻었습니다.
그래서 이븐아이 측에서 주신 기획에 맞는 UI/UX 디자인은 무엇이며, 이를 홈페이지에 어떻게 녹여내어야 사용자가 구매를 할지 설계할 수 있었던 것인데요.
단순히 예쁘기만 해선 디자인이 아닙니다. 버튼이 어떤 위치에 들어가야 더 클릭률이 높아질 것이며, 레이아웃의 크기를 어떻게 배치해야 사용자가 더 편리함을 느낄지까지 고민하는 것이 디자인입니다.
만약 홈페이지 제작을 원하시는 분들 중 아몽소프트웨어의 이러한 철학에 동의하시는 분이 있으시다면 연락주시길 바랍니다.
저희는 핏에 맞는 수준 높은 고객분들의 프로젝트만을 수주하겠습니다.
긴 글 읽어주셔서 감사드리며, 다음번에는 더 좋은 정보로 찾아뵙겠습니다.
