2019/WEB/MEGAZONECLOUD

Overview
0 Flares Filament.io 0 Flares ×

PROJECT 클라우드클래스 CloudClass

CLIENT 메가존

TYPE WEB

DATE 2019

[제작 목적 및 기획 의도]
메가존클라우드가 AWS 교육 공식 파트너사가 되면서, 오프라인으로 AWS 교육을 제공할 수 있게 됨에 따라, 교육 일정을 확인하고 수강신청을 할 수 있는 웹사이트가 필요하게 되었습니다. 뿐만 아니라, 전문성을 필요로 하는 AWS 교육에 대해 어렵게 느끼는 고객들이 쉽게 다가올 수 있도록 안내가 필요했습니다. 이에 따라, 고객이 AWS 교육과 자격증에 대해 충분히 이해하고, 필요로 하는 교육과정을 선택하여 수강신청하는 과정까지 잘 따라올 수 있는 웹사이트를 제작하게 되었습니다.

[UI / UX 특징]
클라우드클래스를 이용하는 고객들은 AWS에 낯설고 어려움을 느낀 고객들이라는 점을 최우선으로 생각했습니다. 고객들이 어떤 교육을 어떻게 선택해야할지 막막함을 느끼고 망설이지 않도록 하기 위해서는 먼저 각 AWS 교육과 자격증의 특징을 충분히 전달해야 했습니다. 이를 위해 AWS 교육과정과 자격증을 관련 직무와 학습 난이도에 따라 분류하였고, 관련 직무에는 아이콘을, 난이도에는 컬러를 지정하여 쉽게 인지할 수 있도록 하였습니다. 교육과정의 커리큘럼과 자격증 취득 과정에 따른 로드맵을
제작하여, GNB에서 언제든지 확인할 수 있도록 하였습니다. 또한 교육과정에는 관련 자격증을, 자격증에는 관련 교육과정을 노출하여 콘텐츠간 유기적으로 연결될 수 있도록 하였습니다.
클라우드클래스의 타겟층이 B2B 대상이고, 기업의 교육 담당자의 비중이 높다는 점 또한 반영했습니다. 기업에서 한 번에 여러 교육과정을 여러 명씩 신청하고자 하는 니즈가 많다는 점을 고려하여 UI와 UX에 녹여내고자 하였습니다. 이를 위해 복수의 교육과정을 장바구니에 담고, 과정당 복수의 수강생을 추가하여 모두 한 번에 결제할 수 있도록 설계했습니다. 또한 결제 단계까지의 허들을 줄이기 위해, 각 수강생의 정보는 결제 후 언제든지 입력하고 수정할 수 있도록 기획했습니다.

[디자인 컨셉 및 특징]
클라우드클래스는 AWS 공인 교육을 제공하는 교육기관으로써, 별도의 브랜드 컬러를 가져가기 보다는 AWS의 키 컬러를 활용하여 공식 파트너사임을 더욱 강조하고자 하였습니다. 컨텐츠 영역은 1920 해상도까지 와이드하게 활용하였으며, 반응형 UI로 제작하여 태블릿과 모바일로도 언제 어디서든 이용할 수 있도록 디자인되었습니다.
또한, 카드 형태의 UI에 엣지를 라운드 처리하여 곡선으로 디자인하였습니다. 이를 통해 교육기관에서 느껴질 수 있는 딱딱하고 어려운 이미지를 해소하여, 조금은 부드럽고 친숙하게 접할 수 있는 교육으로 인식될 수 있도록 디자인하였습니다.
너무 친숙하게 다가가기보다는, 전문성있는 교육기관으로서의 이미지 또한 전달해주기 위하여 상단에는 실사 이미지를 사용하였습니다. 이를 통해 웹사이트의 전반적인 컨셉인, 쉽게 시작할 수 있는 AWS 전문 교육 웹사이트로서의 정체성을 전달하고자 했습니다.

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×