인에이트 솔루션 랜딩 사이트
디자인 및 개발
Framer를 활용한 노코드 랜딩 페이지 개발
프로젝트 기간
2023. 07 - 2023. 08
약 1개월
참여 범위 (기여도)
기획 50%, 디자인 100%
기획 및 UX writing 공동 참여
디자인 1인 참여
팀 프로젝트
디자이너 1명 (본인) 참여
피플 사이언티스트 1명
총 2명
작업 툴
Figma, Framer
Notion, ClickUp
프로젝트 배경
솔루션 홍보용
랜딩 페이지 개발
인에이트 웹 서비스는 진단(게임) 참여자가 사용하는 사이트와 기업 고객이 사용하는 사이트로 나눠져 있습니다.
서비스 초기에는 새로운 채용 평가를 찾던 기업들을 위해 채용 솔루션에 집중 하였지만,
2021년 12월 첫 베타 서비스 출시 이후, 현재는 '채용 평가'에만 집중했던 비즈니스를 HRD 솔루션까지
확장하였고 게임형 진단을 활용하여 구성원 강점 진단 솔루션을 제공하고 인에이트의 노하우와 연구를 기반으로
조직 진단 솔루션을 제공합니다.
기존 in8.kr 랜딩 페이지의 경우, 진단 참여자와 채용 솔루션을 원하던 고객들을 타겟으로 했다면, 이번 프로젝트는 구성원 강점 진단 솔루션과 조직 문화 솔루션의 타겟까지 고려한, 인에이트의 모든 솔루션을 포함한 랜딩 페이지를 구축하는 프로젝트였습니다.
업무 프로세스
랜딩 페이지
디자인 프로세스
랜딩 페이지의 기획안을 먼저 작성하여 메세지와 목표를 분명하게 한 뒤, 각 솔루션을 소개하는 페이지의 전체적인 흐름을 구성하고, 유관 부서와 협업을 위하여 피그마를 서로 공유하며 랜딩 페이지의 목적에 맞는 UX 라이팅을
작성하였습니다. 텍스트로 전체 흐름을 완성한 후, 디자인을 제작하며 수정하는 과정을 반복하였습니다.
랜딩 페이지 제작 프로세스
랜딩 페이지
기획안 작성
UX 라이팅 작업
디자인 제작 및 수정
UX 라이팅 수정
Framer
반응형 웹 개발
문제 해결 과정
타사 분석
인에이트의 솔루션에는 여러 타겟층이 있었기에 각 솔루션(서비스)의 페이지를 따로 분리하기로 목표를 잡고,
타사의 랜딩 사이트를 분석하였습니다. 그리고 총 4가지 특징을 발견할 수 있었습니다.
고객사 로고
고객 인터뷰 표시
고객사 로고를 통해
B2B 제품의 신뢰도를 강조
기능, 서비스 단위
상세 페이지 제공
주요 기능 페이지를
메인 랜딩 페이지처럼
수치화 가능한
데이터 강조
임팩트 있는
데이터를 수치화
명확한
제품 메세지와 형태
제품의 형태를
예상할 수 있게
디자인 목표 설정
전문가가 데이터를 기반으로 만든
신뢰할 수 있는 솔루션
목표한 메세지를 이해할 수 있도록
사이트 전체 흐름을 구성
전반적으로 짧은 문장과 쉬운 단어로 구성하여
고객에게 전달하고 싶은 메세지를 명확하게 보여줄 수 있도록
자사 데이터와 기술을 강조하고
혜택을 예상할 수 있도록
다른 솔루션과 차별화 될 수 있는 기술과 데이터,
유저의 신뢰와 흥미를 얻을 수 있도록 혜택을 강조
사용자가 신뢰할 수 있는 요소를 강화하고
제공되는 솔루션을 이해할 수 있도록
고객사 목록과 보유 기술, 전문 데이터를 강조하고
솔루션이 진행되는 과정에 맞춰 내용을 배치
애니메이션을 적용하여
전체 사이트에 일관된 레이아웃을 구성
길어진 콘텐츠 내용으로 사용자 이탈을 대비하기 위해
일관된 레이아웃으로 구성하고 콘텐츠에 애니메이션을 적용
01
한번에 이해하는
웹 사이트 메인 영역
제품 주요 내용을 반영한 지표를 히어로 섹션에 배치함으로서 고객이 예상하는 솔루션을 더 잘 이해할 수 있도록
만들었습니다. 전체 디자인은 '인에이트' 브랜드의 일관성을 유지하면서 통일된 느낌을 주도록 구성하였습니다.
02
사용자가 신뢰하고
공감할 수 있는 요소 강화
3가지 솔루션 랜딩 사이트에 사용자의 관심을 끄는 요소를 상단에 배치하였습니다. 유입되는 사용자들의 신뢰를 얻기 위해 고객사 목록을 보여주고, 히어로 영역의 헤드라인을 이해하기 쉽게 고민 사례를 포함시켰습니다.
솔루션 타겟의
고민 사례를 표시하여
고객들이 공감할 수 있도록
유입되는 사용자의
신뢰를 얻기 위해
확보된 고객사 로고 노출
03
우리만이 가지고 있는
차별화된 기술을 강조
인에이트에서는 자체 개발한 '게임형 강점 진단'을 사용하여 채용 솔루션과 구성원 강점 진단 솔루션을 제공합니다. 기술의 전문성을 강조하고 보유하고 있는 모든 데이터를 정량적인 수치로 변환하여 표시하였습니다.
데이터의 정확성을 보장하기 위해 세부 사항을 제공해야 했습니다. 따라서 카드 인터랙션을 통해 내용을 확인 가능하도록 설계하였습니다. 중요한 정보는 즉시 표시되며, 세부 사항을 찾는 사용자는 클릭하여 카드로 확인할 수 있게 만들었습니다.
04
혜택의 관점에서 디자인한
핵심 기능 영역
솔루션의 핵심 기능을 사용자가 받을 수 있는 혜택으로 풀어내어 디자인하였습니다. 그리고 고객이 제공받는
데이터를 강조하여 제품이 예상 가능하도록 구성하였습니다.
구성원 강점 진단 솔루션의 강점 보고서 (일부)
조직 문화 솔루션의 조직 진단 보고서 (일부)
채용 솔루션의 입사 지원자 리포트 (일부)
랜딩 페이지 개발
프레이머로
자유롭게 실험하기
최종 디자인을 완료하고 Framer로 개발을 진행하기로 하였습니다. Framer의 경우, 노코드로 웹사이트를
빌드할 수 있는 툴로 테스트를 자유롭게 할 수 있다는 장점이 있었으며, 내부에서 충분히 변경이 가능하기에
선택하였습니다.
Frmaer
반응형 웹 구현
반응형 웹을 지원하고 사용자에게 일관된 경험을 제공하기 위하여 Framer내에 디자인 시스템을 적용하였습니다.
어떤 기기로 랜딩 페이지를 접속 하더라도 최적화된 웹사이트 경험을 제공할 수 있도록 하였습니다.
전환율을
체크할 수 있는 도구
Framer로 반응형 사이트를 개발한 후, 랜딩 페이지의 전환율을 체크할 수 있는 기능을 리서치하고 방법을 정리한 문서를 공유하였습니다.
프로젝트 리뷰
입사 초기, 진단 웹사이트를 런칭할 때, 촉박한 일정으로 아쉽게 느껴진 부분이 많았습니다. 이번 프로젝트에서는 기획에서 디자인, 개발까지 본인이 직접 모든 과정에 참여하며 100% 기여할 수 있었습니다. 이 사이트를
인사 관련 커뮤니티에 공유하고 '도입 문의하기' 또는 '무료 체험 신청' 요청의 비율을 성과의 지표로 삼아 확인해
보려 했습니다. 이 프로젝트를 마지막으로 퇴사를 하며 실제 성과를 확인하진 못했지만, 제약된 환경과 리소스로
제품 홍보가 가능한 콘텐츠를 생성 했다는 것만으로 성공적이었다고 판단됩니다.
인에이트 솔루션
랜딩 웹 사이트
Framer를 활용한 노코드 랜딩 페이지 개발
포트폴리오 사이트에 방문해주셔서 감사드려요.
버튼을 클릭하면 메일 주소가 복사됩니다!
대화를 나누고 싶다면 언제든 연락주세요.
© Hyemi Yun