우쥬클래스의 화면을 상품 진열대가 아닌, 수업을 미리 경험하는 곳으로 설계하였습니다.

상황

우쥬클래스(would u class)는 키트와 영상 강의로 집에서 취미 클래스를 수강하는 온라인 클래스 서비스입니다. 푸드와 드링크, 리빙, 아트, 뷰티와 패션, 웰니스, 키즈의 여섯 분야를 다루며, 하루 만에 완성하는 원데이, 기간을 두고 수강하는 먼슬리, 목표 인원이 모이면 열리는 얼리버드의 세 가지 방식으로 클래스를 운영합니다.

프로젝트는 고객사가 정한 메뉴와 메인 구성안을 바탕으로 웹 화면을 디자인하는 일에서 출발하였습니다. 첫 미팅에서 고객사는 두 가지 기준을 분명히 하였습니다. 사업 초반인 만큼 커머스처럼 보이는 화면은 피하고, 기존 로고를 그대로 사용한다는 것입니다.

다만 등록된 클래스가 아직 많지 않은 상태에서 상품 목록 중심의 메인은 비어 보일 수밖에 없습니다. 이에 따라 시안과 함께 화면 구성 제안을 더하였고, 이후 모바일 화면과 개발에 쓰일 컴포넌트 규칙까지 범위를 넓혔습니다.

발견

우쥬클래스가 판매하는 것은 물건이 아닌 수업입니다. 수업을 고르는 방문자는 가격보다 먼저 두 가지를 확인하려 합니다.

• 이 수업을 내가 따라 할 수 있는가.
• 수강하면 무엇이 집으로 오는가.

고객사 역시 같은 문제를 짚었습니다. ‘normal’, ‘easy’ 같은 단어만으로는 난이도를 가늠할 수 없다는 점입니다. 또한 고객사에는 이미 제작해 둔 클래스 티저 영상이 있었습니다.

이를 바탕으로 화면의 역할을 다시 정의하였습니다. 우쥬클래스의 화면은 상품을 진열하는 곳이 아니라, 결제 전에 수업을 미리 경험하는 곳입니다.

방향을 정립하는 과정

이미 있는 영상으로 메인을 채웁니다

클래스 수를 늘리지 않고도 메인을 풍성하게 만들 수 있는 재료는 이미 제작된 티저 영상이었습니다. 최근 등록된 티저를 메인에 크게 노출하고, 영상에서 바로 해당 클래스로 이동하도록 제안하였습니다.

이를 통해 방문자는 상품 목록을 훑기 전에 수업의 분위기를 먼저 확인합니다. 고객사가 원한, 커머스처럼 보이지 않는 첫인상도 같은 결정에서 나옵니다.

숫자보다 설명으로 난이도를 알립니다

난이도는 TRY, EASY, NORMAL, ADVANCED, CREATE의 다섯 단계로 나누고, 단계마다 어떤 사람에게 맞는 수업인지 한두 문장으로 설명하였습니다. 클래스 상세에서는 단계 번호만 보여 주고, 물음표를 누르면 전체 단계를 확인할 수 있도록 설계하였습니다.

이를 통해 처음 취미를 시작하는 방문자도 자신에게 맞는 수업인지 스스로 판단할 수 있습니다.

키트는 펼쳐서 보여 줍니다

같은 클래스 안에서도 기본 키트와 프리미엄 키트는 담긴 재료가 다릅니다. 키트를 세로로 나란히 배치하여 주목도를 높이고, 각 키트에 포함된 재료와 수량을 목록으로 펼쳐 보이도록 제안하였습니다.

이를 통해 키트의 차이가 가격이 아닌 재료의 차이로 전달되며, 차이 나는 수량만큼 다음 단계 키트에 대한 호기심이 생깁니다.

한 일

메인, 클래스 상세, 큐레이션, 이벤트, 검색, 결제, 로그인과 가입, 보관함까지 웹과 모바일 화면을 디자인하였습니다.

화면의 표현은 기존 로고에서 출발하였습니다. 로고 서체를 기준으로 영문은 모두 소문자로 통일하고, 아이콘과 화살표도 로고의 굵고 둥근 인상에 맞추어 다시 그렸습니다. 버튼의 색은 덜어 내고 흰 바탕과 검은 선으로 정리하여, 사진과 영상이 화면의 주인공이 되도록 하였습니다.

난이도 소개

키트 정보

화면이 늘어날수록 같은 요소가 조금씩 다르게 그려지는 문제가 생깁니다. 피드백 과정에서 고객사는 이렇게 요청하였습니다.

“텍스트 사이즈, 볼드 사용하는 스타일들을 규칙으로 정리해주시면 개발에도 편하게 디자인 통일성도 있어 좋을 것 같아요.”

이에 따라 버튼, 인디케이터, 선택 상자, 입력 창, 라디오 버튼, 체크 상자를 상태별로 정리한 컴포넌트 가이드를 제작하였습니다. 이를 통해 개발 단계에서 새 화면이 추가되어도 같은 규칙으로 만들어집니다.

결과물

웹과 모바일 화면 디자인(메인, 클래스 상세, 큐레이션, 이벤트, 검색, 결제, 로그인과 가입), 컴포넌트 가이드, 메인과 라인 배너.