프로젝트 기록2023. 6. 22.

하이츠 스토어 UX/UI 부분개편 프로젝트

이 분야에서 오래 일을 해오다 보니 웹사이트는 잘 만드는 것도 중요하지만, 만든 이후에 잘 가꾸는 것이 더 중요할 때가 많다는 생각이 듭니다. 새로운 브라우저 환경과 새로운 스펙의 디바이스가 계속 등장하고, 유저들의 니즈와 온라인에서의 행동의 경향도 끊임없이 변화하니까요.

 

그런 점에서 하이츠 스토어는 런칭 이후의 관리와 점진적 개선의 필요성에 대해 이미 인지하고 있고 상시적으로 업데이트를 진행하는, 매우 감도 높은 고객사 중 하나입니다.

 

바톤과 하이츠 스토어는 지난 2021년 겨울에 첫 리뉴얼 프로젝트를 통해 만났고, 이후 1년 간의 운영 경험을 바탕으로 2023년 상반기에 중규모 리뉴얼을 진행하였습니다. 

 

이번 리뉴얼 작업은 디자인 인상은 유지한 채 정보구조를 포함한 UX 개선에 포커스가 맞춰졌습니다. 

 

 

1. 메인 내비게이션 구조 변경

변경 전: '스토어, 에디토리얼, 발매예정, 브랜드'로 구성되어 있습니다.
변경 후: '남성, 여성, 라이프스타일, 브랜드'로 바뀌었고, 상시적으로 하위 메뉴가 나타나 있도록 변경되었습니다.

 

기존의 구성이 비교적 공급자 중심이었다면, 변경된 내비는 유저가 찾고자 하고 기대하는 워딩이 무엇인가에 대한 리서치를 바탕으로 재설계된 것을 확인하실 수 있습니다.

 

또한 지난 '매거진<B>'의 사례에서도 언급되었듯, 유저가 원하는 키워드를 보여주는 것이 더 중요하기 때문에 상대적으로 하이어러키를 지키고자 하는 태도는 다소 느슨하게 열어둔 것도 확인할 수 있습니다. ('하위 메뉴에 신발, 랭킹, 신상품이 혼재되어 있어도 괜찮다. 오히려 그게 더 효과적이다'하는 판단.)

 

 

2. 제품 목록에서의 필터링 방식 변경

변경전 1: '필터'를 클릭해야 세부 값이 노출되는 방식. 보기에는 깔끔하다는 장점.
변경전 2: '필터'를 클릭하면 선택 가능한 항목들이 모달로 노출.
변경 후 필터

주요 변경사항은 다음과 같습니다. 

  • 기존에 필터의 일부였던 항목('의류', '가방', '신발' 등)들을 내비게이션 상의 서브메뉴로 재정의하여 화면 상단으로 이동시켰습니다.
  • '필터' 버튼 안에 숨어있던 항목들이 모두 밖으로 꺼내졌습니다.
  •  정보의 뎁스가 깊어져서 좀 더 세분화된 필터링이 가능해졌습니다. 예를 들어 아우터 안에서도 좀 더 구체적인 항목명(ex: '라이트자켓')을 찾아볼 수 있게 되었습니다. 

 

3. 랭킹의 세분화, 그리고 강약조절

기존 랭킹 섹션입니다. 홈화면에 한 단을 모두 차지하고 있고, 총 스무 개의 제품이 나타나고 있습니다.
홈화면에서의 새로운 랭킹 섹션입니다. 제품 수가 열 개로 줄었고, 차지하는 공간 또한 반으로 줄었습니다.
개편 후의 '랭킹' 페이지입니다.

 

기존에는 스토어 > 랭킹 > 남성, 여성, 라이프스타일 순으로 디깅하는 방식이었다면, 리뉴얼 이후에는 먼저 남성, 여성, 라이프스타일로 분류하여 랭킹에 진입하도록 한 뒤, 랭킹 하위에 더 자세한 상품 분류를 두는 방식으로 변경되었습니다.

 

랭킹 구조 변경 작업을 위한 기획문서 중 일부

 

 

물론 파페치, 에센스, 미스터 포터 등의 온라인 셀렉트 스토어에 익숙하신 분들이라면 '많이 보던 UI인데 이게 막 그렇게 대단한 거야? 당연히 해야 되는 개선을 했구만 뭐~'라고 생각하실 수도 있겠습니다. 그와 관련해서는 하이츠 스토어는 카페24라는 커머스 솔루션에 기반한 사이트이고, 그 시스템 바운더리 안에서 이러한 기능들을 구현했다는 점이 핵심인데요, 이 카페24라는 주제에 대해서는 다음에 별도로 포스트를 써보려고 합니다. 

 

-

 

바톤이 최근 의뢰받는 작업들 때문일 수도, 아니면 지금 흐름이 그래서일 수도 있는데, 웹에서 컨셉츄얼한 그래픽으로 승부를 내는 작업보다는 UX/UI를 정교하게 설계하고 구현해서 유저들에게 간접적이지만 분명한 행동변화를 주고자 하는 니즈가 늘고 있는 것이 느껴집니다.

 

물론 이것은 테크업계에선 오래 전부터 당연한 것이었지만 카페24나 고도몰 기반의 패션, 라이프 스타일 브랜드가 온라인 사용자 경험 개선 중심의 작업에 수 천 만원을 쓴다는 것은 얼마 전까지만 해도 상상하기 어려웠습니다.

 

디자인 잘 하는 곳으로 만들어둔 뾰족한 인상이 흐려질까봐 드러내놓고 자랑을 하진 않지만 저희는 기획을 무척 중요시하는 사람들로.. 저희가 좋아하는 고객사들이 가진 좋은 디자인에 대한 관점의 변화 덕분에 저희도 그동안 몰입해보고 싶었던 즐거운 도전에 풍덩 빠져 있는 요즈음입니다. 

 

-

Client. 피드인터내셔널

Design. 이해인, 고유영, 전에녹, 오유진

Development. 이상희, 추지혜, 이예지, 한송욱

Planning. 황이현, 김지빈