Project Overview

  • CLIENTCJ OliveNetworks
  • DATE2019. 01 ~ 2019.05
  • PROJECT올리브영 온라인몰 전문관 강화 프로젝트
  • LINK사이트 바로가기

Project Issue

다양한 템플릿으로 소비자의 눈높이를 맞추다

“뷰티&헬스 스토어 시장 점유율 80%”의 올리브영의 신규 럭셔리 브랜드 입점 대응, 그리고 높아진 사용자들의 눈높이를 고려하여 기존 동일 형태의 템플릿으로 구성된 전문관에서 벗어나 다양한 형태의 템플릿 구성, 각 구성 요소의 모듈화, 신규 기능 구현 등 개발 및 고도화 작업을 진행 하였습니다.
이를 위해 CJ OliveNetworks 내 실무자 인터뷰 진행 및 긴밀한 협조를 통한 요구사항 정의, 보다 높은 수준의 UX를 위한 다양한 방안 제시 등을 통해 기존 온라인몰에서 쉽게 볼 수 없는 높은 수준의 디자인, 그리고 이를 위한 기능을 구현해 낼 수 있었으며, 보다 용이한 운영을 위하여 엑셀 업로드를 통한 상품 등록, 상품 출력 순서 일괄 설정 등의 기능을 구현 하였습니다.

더 나은 UX

시작 단계부터 올리브영 프로젝트의 핵심 목표는 “사용자에게 더 나은 온라인 쇼핑 경험을 제공 해 주는 것” 이었습니다.
높은 수준의 디자인도 중요 하였으나, 이 보다 우선시 된 것은 바로 “사용자 경험” 이었습니다.
이를 위해 올리브영 온라인몰 사용자에 대한 분석이 선행 되었으며,
분석 중 도출 된 결과를 바탕으로 UI에 대한 기획 방향을 수립 할 수 있었습니다.

틀에서 벗어난 UI

기존 올리브영이 가진 Identity를 그대로 유지 하면서도 새로운 UI 구현을 위한 고민을 하였으며, 그 결과 타 쇼핑몰에서 쉽게 볼 수 없는 새로운 형태의 UI를 구현 할 수 있었습니다.
기존의 틀에서 벗어나 보다 높은 수준의 UI 구성을 위해 Parallax Scrolling, YouTube 및 Vimeo 영상 출력/관리 기능 등을 구현 함으로서 기존 정적인 형태의 디자인에서 벗어나 보다 동적이며 시선을 사로 잡을 수 있는 형태로 구현 되었습니다.

운영적인 측면을 고려하다

올리브영 온라인몰을 사용 하는 사용자도 중요 하지만 이를 운영하는 실무자 역시 중요 합니다. 기존 온라인몰 운영 중 발생 하였던 어려움을 이번 프로젝트를 통해 해소 하고자 상품 대량 등록 기능, 출력 순서 일괄 등록 등의 기능을 BackOffice 내 구현 하였으며, 신규 전문관 템플릿을 모듈 단위로 관리 할 수 있도록 개선 하였습니다.

템플릿 구성

YouTube/Vimeo 영상 등록/관리 기능
기존 HTML을 이용하여 등록 하던 방식에서 벗어나 영상을 손쉽게 출력 및 관리 할 수 있도록 기능을 구현 하였습니다.

Parallax Scrolling 적용
국내 일반적인 E-Commerce 사이트에서 쉽게 볼 수 없었던 Parallax Scrolling 기능을 신규 전문관 내 구현 하였으며, 이를 제어 하기 위한 기능(이미지 변경, 스크롤 속도 제어 등)을 구현 함으로서 보다 쉽게 운영 가능하도록 하였습니다.

UI Customizing 기능 구현
각 영역별 배경 이미지, 배경 색상, 폰트 색상 등을 BackOffice 에서 간단한 설정값 입력으로 변경 가능하도록 구현 하였습니다.

Contents 재구성
펫# 내 단순 상품 배치에서 벗어나 연재 콘텐츠 등록 기능을 구현, 사용자에게 단순 상품 정보 제공이 아닌, 활용 가능 정보를 제공 할 수 있도록 구현 하였습니다.

메인 롤링 배너 개선
정형적이며 일반적인 롤링 배너 형태에서 벗어난 디자인을 통해 사용자에게 보다 신선한 느낌 제공 할 수 있도록 구현 하였습니다.

프로젝트를 마치며

  • 담당 개발자님 PM

    같은 템플릿이라 할 지라도 설정에 따라 전혀 다른 느낌 의 페이지를 만들 수 있다는 점을 알 수 있었습니다. merge 작업으로 인해 작업을 힘들었지만 좋은 기억 으로 남는 프로젝트가 될것 같습니다. 많은 도움을 주신 올리브영팀 포함, 프로젝트에 신경 써 주신 모든 분께 감사드립니다.

  • 담당 기획자님 PM

    Ecommerce의 UX와 UI 관련하여 많은 점을 배울 수 있었으며, “효율적인 BackOffice 구현”과 관련하여 그 동안 경험하지 못하였던 부분을 직접 경험 할 수 있어 많은 도움이 된 프로젝트가 아닐까 생각 됩니다. 힘들었지만 무사히 프로젝트를 마칠 수 있도록 도움 주신 많은 분들께 감사 드립니다.

  • 담당 개발자님

    전시템플릿을 사용자가 원하는 양식에 맞게 유연하게 등록할 수 있어는 시스템이 괜찮았습니다. 더 다양한 컨텐츠를 등록하고 유영하게 양식을 실시간으로 변경 할 수 있게 했으며 그 과정에서 분석한 CJ의 BackOffice는 이후 프로젝트에서 여러 부분을 적용 하면 좋겠구나 생각했습니다.

  • 담당 개발자님

    해당 프로젝트를 진행하면서 여러 어려운점이 있었 지만, CJ계열의 쇼핑몰의 업무프로세스를 접할 수 있는 좋은 계기가 되었습니다. 템플릿, 전시코너, 카테고리 등 관리할 수 있는 back-office를 통해 다양한 화면을 구성할 수 있는 프로세스도 저한테 좋은 경험이 되었습니다. 그리고 좋은 분들과 함께 일할 수 있어서 기억에 남는 프로젝트였습니다.

WIND DESIGN Co., Ltd