songjinkyu.com

yeseyesee.com

Renewal online store design and development for YESEYESEE.

Design: 송진규 Development: 변지윤, 홍혜원, 심혜섭, 송진규 Direction: 이민형, 임채승

예스아이씨는 2017년에 시작하여 서울을 기반으로 한 유니섹스 스트릿 패션 브랜드입니다. 그들은 ‘한 가지 방식에 규정되지 않고, 입는 사람의 개성에 따라 다르게 발현되는 가능성과 다양한 해석을 지지한다.’라는 일념 아래 실험적이고 과감한 비주얼을 보여주고 있습니다.

매 시즌 설정되는 컬렉션 컨셉에 맞게 다양한 표현, 색채 및 소재들을 활용하여 소비자에게 새로운 브랜드 이미지를 심어주고 있습니다.

예스아이씨 팀의 웹사이트 리뉴얼 목표는 크게 세가지였습니다.

시각적 새로움
사용자 친화적 구매 경험
운영 편의성
  1. 시각적 새로움
  2. 사용자 친화적 구매 경험
  3. 운영 편의성

시각적 새로움

‘예스아이씨’가 전달하고자 하는 시각적 새로움에 대해 이해하고자, 저는 여태까지 진행된 모든 컬렉션을 살펴보며 어떻게 새로움을 표현하고 있는지 알고자 했습니다. 그들은 매 시즌 반복되는 요소 없이, 스트릿 브랜드라는 큰 개념 안에서 매번 다른 브랜드인 것처럼 새로운 의류와 이미지를 보여주고 있었습니다. 그래서 저는 그들의 새로움을 잘 전달하려면, 오히려 단단하고 일정한 틀이 필요하다고 생각했습니다. 왜냐하면 매 시즌마다 다른 개성의 이미지와 의류가 웹사이트에 올라가게 될텐데, 웹사이트의 개성이 너무 강하다면 사용자들에게 분명 시각적 충돌과 혼란을 줄 것이라고 생각했기 때문입니다.

그래서 저는 모듈형 인터페이스를 디자인하여 어떤 형태의 그래픽, 의류가 와도 자연스럽게 보이며 자유롭게 화면을 구성할 수 있도록 하였습니다. 세가지 위계의 헤딩 박스가 있으며, 그 아래 자유롭게 콘텐츠를 배치하고, 콘텐츠에 따라 자연스럽게 CTA가 배치될 수 있도록 하였습니다. 그리고 웹사이트의 얼굴이 될 인덱스 페이지에서는 푸터를 제외한 영역을 모두 빈공간으로 정의하고, 시즌 컬렉션, 협업 및 이벤트를 자유롭게 보여줄 수 있도록 구성했습니다.

이렇게 일정한 규칙을 가진 인터페이스를 통해 일반 고객들에게는 ‘여기가 예스아이씨 웹사이트구나.’ 라는 인식을 줌과 동시에 ‘새로운 컬렉션이 나왔구나.’ 혹은 ‘이러이러한 점들이 바뀌었구나.’ 등 새로운 변화를 인지할 수 있게 하였습니다. 그리고 웹사이트의 또 다른 사용자인 예스아이씨 팀에게는 본인들의 개성과 다양성을 마음껏 표현할 수 있는 도화지를 제공하였습니다.

사용자 친화적 구매 경험

이전의 예스아이씨 스토어에서는 장바구니에 담기만 해도 즉시 페이지가 이동하여 기존의 상품 탐색 흐름이 끊겨 사용자가 원하는대로 구매 여정을 이어나갈 수 없었습니다. 그래서 장바구니에 담았을 때는 기존 페이지를 유지한 채로 장바구니 UI를 노출하여 자연스럽게 어떤 상품을 담고, 담았었는지를 확인하고, 구매를 이어가거나, 원한다면 다른 상품을 더 탐색할 수 있도록 사용자에게 선택지를 주었습니다.

또한 사이트 이용 중 필연적으로 마주치는 여러 에러에 대해 왜 에러가 발생했는지, 이 에러를 어떻게 사용자가 대처해야 하는지 전혀 알 수 없었습니다. 당시 이용 중이던 이커머스 플랫폼에서 제공하는 API의 에러 처리에 한계가 있었으며, 별도로 에러 노출에 대한 처리가 전혀 없었습니다. 하지만 리뉴얼과 동시에 이커머스 플랫폼을 Shopify로 옮기게 되면서, API의 자체 에러 메시지를 자연스럽게 노출할 수 있었고, 해당 메시지는 JSON 언어 파일에 따라 번역되어 사용자 친화적으로 전달되게 되었습니다. 이 과정에서 에러를 비롯한 여러가지 정보를 고객에게 전달할 때, 디자인 시스템 내에 정의된 토스트, 모달 UI를 적극적으로 활용하여 브랜드 이미지를 일관되게 전달할 수 있었습니다.

운영 편의성

두번째 목표에 나아가서, 예스아이씨 팀의 운영 경험도 크게 바뀌었습니다. 기존에는 외주 업체를 통해 개발된 사이트라 저희 팀은 해당 히스토리에 대한 인지가 부족하다보니 상품에 새로운 필드 하나를 추가하는데에도 많은 공수가 들었고, 그에 따라 사이트를 운영하는 방식도 소극적으로 변할 수 밖에 없었습니다. 그래서 저는 Shopify의 Metafield 및 Metaobject를 적극적으로 활용하여 최소한의 코드 수정 및 배포를 통한 사이트 운영 방향을 구상하였습니다.

[...back]