자기계발 분야 전문 컨설팅 기업,
30STEP OTT 서비스 개발
BUILD
WEB / MOBILE
30STEP
OTT 서비스 개발
- Client
- 30STEP (이니시오에스엔에스)
- Date
- 2021. 07 - 2021. 11
- Type
- OTT 서비스, 워드프레스, 반응형 구축
Overview
30STEP의 동영상 롤링 기능을 통한 홈페이지 이탈 제거와 더불어 안정적인 서버용량을 OTT서비스의 최우선적인 목표로 삼아 개발을 진행하였습니다. 사내 쇼핑몰과 같은 추후 개발 확정성을 고려하여 거시적인
개발을 진행하여 사업의 스케일업을 함께 도와드린 프로젝트입니다. 워드프레스의 장점을 활용해 손쉬운 관리자페이지도 함께 개발해 나갔습니다.
Goal
안정적인 서버 설계
사용성 좋은 OTT 서비스
UI/UX Strategy
부드러운 톤앤매너
사용자의 도전을 응원하기 위하여 열정적이고 강렬한 색상보다
차분하고 부드러운 파란색 계열의 색상을 적용하여 눈의 피로를 줄이고 신뢰도를 높였습니다.
콘텐츠와 어울리는 이미지
다양한 서비스와 목적을 가지고 있기 때문에 콘텐츠의 이해도를 높이고자
아이콘 대신 사진을 사용하여 간접적으로 표현하였습니다.
살아움직이는 UX
호버시 플레이되는 동영상과 스크롤에 따른 인터랙션은 사용자의 주목성을 높이고
이탈율을 최소화하였습니다.
30STEP
Design System
다양한 웨이트의 지원과 여러 언어 환경에서의 사용성을 고려한 폰트를 사용했으며,
작은 화면의 디바이스에서도 텍스트를 보다 쉽게 읽을 수 있도록 가독성을 고려했습니다.
색상은 브랜드의 color system을 사용해 통일성을 제공합니다.
Typography
Spoqa Han Sans Neo
Spoqa Han Sans Neo
Color System
인생이 바뀌는 “30단계”로
눈부신 발전이 가능합니다
동영상 & 롤링 배너 배치
히어로섹션에 동영상을 배치시켜 홈페이지 이탈을 막고
동영상 호버시 롤링 배너 기능을 작동시켜 홈페이지의 이탈을 다시한번 막았습니다.
30STEP ROUTINE 소개
30STEP만의 루틴을 소개하여 다른페이지의 이탈을 막아내고
메인페이지에서의 체류시간을 높여 SEO의 긍정적인 영향을 일으킬 수 있도록 기획 & 개발하였습니다.
‣ 서비스소개 섹션
‣ 고객후기 섹션
30STEP
Subpage
PROCESS INTRODUCTION PAGE
30STEP 프로세스를 폰트 Weight에 차별점을 주어
정보의 위계질서를 나누었습니다.
‣ 목적 소개 페이지
PURPOSE INTRODUCTION PAGE
2단그리드를 활용하여 대제목과 본문의 내용을
나누어 가독성을 올렸습니다.
‣ 목적 소개 페이지
BOOK & RADIO PAGE
30STEP만의 고유한 콘텐츠페이지로써
가독성 좋은 UX디자인을 통해 홈페이지 사용자의 이탈을 막았습니다.
‣ 도서 페이지
30STEP
Mobile Page
완벽한 WEB / MOBILE 반응형 대응
모바일에서도 문의 신청이 가능하도록 자연스러운 문의흐름을
개발하는 완벽한 반응형 대응을 진행하였습니다.
