쿨타임
웹 개발 외주 프로젝트
- Client
- 쿨타임 (진성이엔지)
- Date
- 2021. 07 - 2021. 10
- Type
- 홈페이지, 워드프레스, 반응형 구축
Overview
쿨타임의 최상위 홈페이지 목적은 “폭발적인 상품 구매” 이었습니다.
여름시즌 에어컨 설비에 대한 고민이 많은 타겟층의 구매저항을 감소시키는 방향으로
다양한 셀링포인트 및 사회적근거 (고객후기, 설비사례) 를 배치시켰습니다.
또한 템플릿형 UI / UX디자인에서 벗어난 맞춤형 디자인 & 마이크로 인터렉션을 선보였습니다.
Goal
폭발적인 상품 구매
UI/UX Strategy
의미있는 아이콘
쿨타임의 아이덴티티를 담은 개성있고 의미있는 아이콘을 제작하였습니다.
편리한 디자인
사용자와 관리자의 편의성 증대를 위한 UX/UI의 디자인을 개선하였습니다.
부드러운 인터랙션
그래픽 요소들이 사용자의 스크롤에 따라 자연스럽게 움직일 수 있도록 인터랙션을 적용하였습니다.
COOLTIME
Design System
다양한 웨이트의 지원과 여러 언어 환경에서의 사용성을 고려한 폰트를 사용했으며,
작은 화면의 디바이스에서도 텍스트를 보다 쉽게 읽을 수 있도록 가독성을 고려했습니다.
색상은 브랜드의 color system을 사용해 통일성을 제공합니다.
Typography
Spoqa Han Sans Neo
Spoqa Han Sans Neo
Color System
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15160114/Group-2631-1.png)
설치부터 관리까지
시원하게 해결합니다
디바이스에 맞는 적응형 대응 작업
PC와 모바일의 디자인을 따로 작업하여
각 디바이스에 맞는 홈페이지 사용자들의 UX를 극대화하였습니다.
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15160153/Rectangle-908-1.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15160151/Rectangle-910.png)
구매저항을 감소시키는 사회적근거
쿨타임을 사용한 고객의 실제후기, 전문칼럼을 활용하여
쿨타임의 구매를 망설이는 고객들의 구매저항을 낮추었습니다.
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15160146/Rectangle-1028-1.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15160158/Rectangle-1029-1.png)
COOLTIME
Subpage
PORTFOLIO PAGE
시공사례를 통해 고객의 궁금증 및 니즈를 해결할 수 있도록
제목의 가시성을 올리는 폰트를 활용하였습니다.
‣ 시공사례 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17145654/Rectangle-1032-22.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17145647/Rectangle-1032-1-18.png)
REVIEW PAGE
실제 고객들의 문의를 작성할 수 있는 게시판 형식을 활용하였습니다.
뿐만 아니라 게시판의 관리를 쉽게 할 수 있는 관리자페이지도 구현하였습니다.
‣ 시공리뷰 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17145648/Rectangle-1032-2-18.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17145650/Rectangle-1032-3-16.png)
CONTACT PAGE
문의를 받을 수 있는 Form 형식을 홈페이지 내에 구현하여
전환고객 데이터베이스를 수집할 수 있도록 기획하였습니다.
‣ 서비스 견적 페이지
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17145651/Rectangle-1032-4-16.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/17145653/Rectangle-1032-5-13.png)
COOLTIME
Mobile Page
완벽한 WEB / MOBILE 반응형 대응
모바일에서도 텍스트 & 사진이 깨지지 않는 반응형 대응 작업을 진행해
PC와 마찬가지로 자연스러운 문의 신청이 가능하도록 만들었습니다.
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15160447/Rectangle-1192.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15160445/Rectangle-1194-18.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15160448/Rectangle-1193-18.png)
![](https://amongsoftware-homepage.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2022/06/15160446/Rectangle-1195-18.png)