Zivame의 UX 디자인 팀이 Multiway Product Discovery를 가능하게 한 방법

이것은 Zivame의 UX 디렉터인 Udit Khandelwal이 5부로 구성된 게스트 블로그 시리즈의 첫 번째 글입니다.

사용자가 찾지 못하면 해당 기능이 없는 것입니다! – Human Factors International(HFI)

나는 2012년 HFI의 교육 세션에서 이 인용문을 처음 들었고, UX에 접근하는 나의 방식에 항상 공감할 것입니다.

제품 검색은 모든 소매 비즈니스에서 가장 중요한 측면 중 하나이며 사용자가 귀하가 제공하는 제품을 찾을 수 없다면 존재하지 않는 것입니다. Zivame에서 원활한 제품 탐색을 가능하게 하기 위해 우리는 플랫폼 전반에 걸쳐 다방향 검색 전략을 개발했습니다. 이 5개의 기사 시리즈에서 저는 Zivame에서 컬렉션을 선보이고 제품을 발견하고 커뮤니케이션을 제공하는 데 사용되는 레버를 다룰 ​​것입니다.

이것은 이 시리즈의 첫 번째 기사이며 여기서는 주로 아래에 제공된 레버 목록에서 Ice Breakers 항목을 다룰 것입니다.

이들 각각은 사용자 여정에서 매우 특정한 목적을 수행하며 그에 따라 사용됩니다. 각각의 경우에 대한 도전과제와 이를 극복하기 위해 우리가 수행한 작업에 대해 이야기하면서 하나씩 살펴보겠습니다. 또한 해당되는 경우 비즈니스 메트릭에 대해서도 이야기하겠습니다.

홈페이지 방문 카드

도전

• Zivame에서 웹 트래픽의 45% 는 처음 사용자로 구성됩니다.

• 직접 및 유기적 트래픽의 40% 가 Zivame 홈페이지에 있습니다.

• 위의 사용자 대부분은 우리가 제공하는 제품의 폭에 대해 거의 단서가 없습니다.

해결책

열린 수평 메뉴가 없고 모바일 우선 햄버거 탐색을 사용하는 것은 우리가 새로운 스택에서 따르기 시작한 매우 신중하고 사용자 테스트를 거친 접근 방식이었습니다.

그것은 우리의 제안에 대해 솔직하지 못한 대가를 치르게 했습니다.

따라서 첫 번째 접기에서 동일한 내용을 전달하는 것이 중요해졌습니다. 아래에 표시된 카드는 정확히 이 목적을 수행합니다.

흥미로운 점은 이 접근 방식이 처음에는 데스크톱용으로 개념화되었으며 나중에 아래와 같이 모바일용으로 채택되었다는 것입니다. 데스크탑 버전에서는

카드는 첫 번째 접기에서 맨 위 부동산을 차지하지만 모바일에서는 세로 공간 제약으로 인해 영웅 배너 바로 아래에 있습니다.

이를 개념화할 때 경영진은 다음과 같이 구상했습니다.

내 홈페이지에서 8초를 보내는 사람은 Zivame이 란제리, 의류 및 활동복을 판매한다는 사실을 모르고 떠나서는 안 됩니다. – Shaleen, COO Zivame

… 그리고 저는 우리가 디자인을 통해 동일한 목표를 달성하는 데 좋은 성과를 거두었다고 생각합니다. 카드의 위치는 그것들을 놓칠 수 없도록 만들고 링크와 함께 제목은 란제리, 액티브웨어 및 의류와 같은 개별 범주에 대한 명확한 기대치를 설정합니다 . 또한 네 번째 카드는 첫 번째 접기에 앉을 가치가 있는 메타 항목을 넣을 수 있는 충분한 유연성을 제공합니다.
추신: 이 구성 요소는 이 게시물을 작성하는 현재 개발 중이며 곧 출시될 예정입니다!

(또한 읽기: Zivame의 사용자 경험 형성: 제품 관리 사례 연구)

노력

회사의 모든 이해 관계자가 자신의 재산에 대한 최고의 부동산을 찾고 있기 때문에 각 카드에 어떤 4가지가 들어갈지 파악하기 어렵습니다!
데이터는 가장 수요가 많은 항목을 맨 위에 두면 되는 쉬운 탈출 경로인 것처럼 보이지만 비즈니스의 방향은 상충될 수 있습니다 . 예를 들어 Apparel 자체는 현재 Zivame 매출의 8%에 불과하지만 상위 부동산의 25%를 차지합니다.

회사 경영진의 상당한 중재와 기능 간 협업이 올바른 답을 줄 것입니다. 내 제품 관리자는 다음과 같이 말합니다.

특정 개체의 불균형적인 성장을 보장하려면 특정 개체에 지나치게 친절해야 합니다. – Vishrut Shukla, Sr. PM – Zivame

홈페이지 영웅 캐러셀

도전

• 이것은 다음 주요 부동산이며 부동산은 시각적입니다. 브랜드를 대표해야 하며 엄격한 시각 디자인 언어를 따라야 합니다.

해결책

솔직히 말해서, 이것은 설계하기는 쉽지만 실행하기는 어려운 것이었습니다. 우리는 우리가 크고 대담한 아름다운 디자인 언어를 따르고 있다는 것을 알고 있었고 따라서 배너가 화면 너비의 100%와 나머지 화면 높이의 100%를 차지해야 한다는 것은 쉬운 결정이었습니다. 그러나 그것은 우리에게 해결해야 할 2가지 문제를 남겼습니다.

• 특정 화면 크기에서 배너는 '커버' 알고리즘을 사용하려고 했기 때문에 잘립니다.

• 배너가 화면 하단 가장자리까지 늘어나면 사용자는 페이지가 거기에서 끝나고 그 이상은 아무것도 없는 것처럼 보일 수 있습니다.

자르기 문제를 해결하기 위해 안전 영역을 정의하고 여러 해상도에서 테스트했습니다. 몇 번의 히트와 시도 끝에 우리는 그것을 못 박을 수 있었습니다.
배너 하단에 갈매기 모양을 배치하여 사용자에게 배너 너머에 더 많은 것이 있다는 시각적 신호를 제공했습니다. 깔끔하게 유지하기 위해 탐색 화살표를 단방향으로 만들기로 결정했지만 점 기반 탐색을 넣어 슬라이드쇼 신호도 제공했습니다.

사용자 여정을 염두에 두고 올바른 메시지와 함께 올바른 배너를 만들고 카테고리 페이지 배너와 함께 연결하는 데 많은 양의 기능 간 협업이 이루어졌습니다. 위 섹션은 예시 스크린샷을 표시하고 아래는 안전 영역을 정의한 방법입니다.

추천 컬렉션

도전

• 배너는 관심을 끌기에 좋지만 사용자의 관심을 유도하고 사용자가 올바른 기대를 갖고 클릭하도록 하려면 컬렉션에 대해 좀 더 자세히 알려야 합니다. 그러나 부동산은 제한적이며 다양한 컬렉션 간에 경쟁이 치열합니다.
• Zivame의 모바일용 홈페이지의 초기 디자인은 각 컬렉션에 10개의 제품 배열이 있고 마지막 썸네일까지 스크롤한 후 "더 보기" 버튼이 있는 컬렉션의 아코디언을 사용하는 데 사용되었습니다. 데이터 분석에 따르면 아코디언과 상호작용한 사용자 중 40% 이상이 더 보기를 클릭했습니다. 이것은 위에서 언급한 요점을 강화합니다. 그러나 아코디언은 시각적이지 않고 텍스트가 무거워서 사용하고 싶지 않았습니다.

  

• 너무 많은 제품 이미지를 미리 로드하면 페이지 성능에 부정적인 영향을 미칩니다. 페이지 로드 시간이 1초 추가될 때마다 전환은 무려 7%나 감소합니다.

해결책

추가 클릭 비용으로 USP를 보여주고 모든 컬렉션을 살짝 엿볼 수 있습니다. 제품 콜라주 외에도 우리는 3가지 중요한 정보를 간단히 표시했습니다.

1. 컬렉션 이름
2. 설명
3. 서명 속성

이것은 컬렉션에 대한 관심을 불러일으킬 뿐만 아니라 사용자가 정해진 기대치를 가지고 제품을 발견하는 여정으로 안내합니다. 제품 콜라주는 여러 제품 이미지가 아닌 단일 콜라주 이미지로 반환되도록 기술적으로 최적화될 수 있습니다. 다시 말하지만, 이 버전은 현재 사이트에 부분적으로 배포되었으며 나머지는 이 기사를 작성하는 현재 구현되고 있습니다.

지바메 방문

카테고리 마스트헤드

도전

• 카테고리 페이지는 유료 트래픽의 기본 방문 페이지입니다. 또한 사이트 내에서 컬렉션/제안 배너를 클릭하는 사람은 카테고리 페이지로 이동합니다. 따라서 여기에 사용자 여정을 연결하고 컨텍스트를 유지하는 것이 중요합니다.

• 범주가 넓을수록 사용자가 선택하기가 더 어렵습니다. 따라서 특정 경우 에 사용자 여정을 보다 구체적인 하위 범주로 좁히고 이후에 특정 제품으로 좁혀 야 할 수 있습니다.

• 특정 카테고리는 매우 특별하거나 새롭기 때문에 사용자는 페이지를 방문하는 바로 그 순간에 USP를 인지해야 합니다.

해결책

마스트헤드는 4가지 주요 구성요소로 구성됩니다. 우리는 구성 가능한 구성 요소가 위에서 언급한 사용 사례를 처리하는 접근 방식을 고안했습니다. 간단히 마스트헤드에 배너를 배치 하고 크리에이티브 배너에 의존하고 쇼핑을 하고 도구 모음을 필터링/정렬하고 나머지는 커뮤니케이션을 제공합니다.
나는 여기에서 배너에 대해 이야기할 것이고, 'shop by'와 오퍼는 나중에 다룰 것이다. 카테고리 배너용으로 3가지 변형 또는 템플릿을 디자인했습니다.

1. 단일 배너
2. 회전 목마
3. 분할 배너

단일 배너는 좁은 범주와 USP에 대해 이야기하는 데 완벽하게 작동합니다 . 반면에 캐러셀 및 분할 배너는 제한된 부동산 내에서 여러 배너를 제공하는 좋은 방법이며 하위 카테고리로 연결하는 데 사용됩니다.
이러한 페이지를 홍보할 때 디지털 마케팅 및 크리에이티브 팀은 마케팅 크리에이티브가 동일한 언어를 사용하고 유사한 이미지를 사용하여 사용자 여정을 함께 연결하도록 합니다.

이제 홈페이지 영웅 배너와 마찬가지로 이 배너는 사용 가능한 너비의 100%를 차지하지만 높이는 일정합니다. 따라서 어떤 경우에는(또는 해상도) 배너가 오른쪽에서 잘립니다. 그래서 우리는 홈페이지와 마찬가지로 안전한 영역을 정의했고 크리에이티브 팀은 이 배너를 디자인할 때 동일하게 따르도록 요청받았습니다.
다음은 분할 배너에 대해 동일하게 정의한 방법의 예입니다.

경고

이것은 모바일 우선 디자인이 아니며 모바일에서는 우아한 저하 후에 간단한 배너 또는 스와이프 가능 캐러셀로 되돌아갑니다. 모바일용 분할 배너가 없습니다.

앱 온보딩

도전

• 유저들에게 너무 많은 것을 말하고 싶지만 온보딩 중에 4장을 넘기는 것은 무리입니다. 공간은 제한되어 있고 기능은 방대하고 사용자는 읽을 시간이 없으며 이 모든 것에도 불구하고 앱을 고정해야 합니다.

• 누가 탐색하고 있는지 모릅니다 : 초보자 또는 전문가, 탐험가 또는 네비게이터; 모든 사람에게 적합한 온보딩 경험을 설계해야 합니다.

해결책

유저들에게 무엇을 전하고 싶은지 생각하기 보다는 반대로 생각하기 시작했습니다 → 유저들은 무엇을 배우고 싶어할까요? 빠른 딥스틱 조사를 통해 사용자가 주로 다음 질문에 대한 답변을 찾고 있다는 것을 알 수 있었습니다.

1. 이것은 무엇에 관한 것입니까?
2. 여기서 무엇을 할 수 있나요?
3. 시작하는 방법?
4. 나를 위해 무엇입니까? 어떻게 도움이 되나요?

따라서 문제는 이러한 질문에 답할 수 있는 4개의 화면으로 간단하게 축소되었습니다. 따라서 우리는 다음 4개의 화면에서 0을 줄였습니다.

마지막 화면은 FitCode 를 홍보하기 위해 영리하게 설계되었지만 사용자는 건너뛰고 계속 쇼핑할 수 있습니다.

주의 사항

현재 수정 중이며 다음과 같은 몇 가지 결함이 있습니다.

1. 알림 권한 팝업은 온보딩 화면에 바로 표시됩니다. 이것은 사용자에게 매우 짜증나는 일이며 여기에서 최소한의 전환을 얻을 가능성이 높습니다. 대신 해야 할 일 - 특정 이벤트(예: 로그인, 주문 성공, 콘텐츠 액세스 등)가 발생한 후 알림 권한을 찾아야 합니다.
2. 웹 참여 메시지(마케팅 팝업)는 온보딩 중에 표시되는 경우가 있습니다. 다시 말하지만 이는 매우 나쁜 경험이며 사용자는 온보딩 중에 마케팅 메시지를 받아들이지 않을 가능성이 가장 높습니다. 온보딩 화면에 팝업이 표시되지 않도록 주의해야 합니다.

핏코드

도전

• 많은 여성들이 온라인 구매보다 오프라인 매장에서 구매하는 것을 선호합니다. 이에 대한 가장 일반적인 이유 중 하나는 특정 제품이 자신에게 맞는지 확실하지 않기 때문입니다. 그들은 온라인으로 그것을 시도할 수 없습니다.

• 여성마다 체형이 다르고 란제리에 관한 한 제품이 만능은 아닙니다. 따라서 그들의 체형과 선호도에 맞는 제품을 제시하는 것이 중요합니다.

• 측정 및 선호도를 채우기 위해 양식을 제공하면 하락률이 높습니다. 따라서 우리가 어떤 해결책을 제시하든 효과적이어야 합니다.

해결책

Zivame의 패션 디자인 팀은 제품 관리자와 함께 광범위한 연구를 수행했으며 여성의 신체 유형을 11가지 프로필로 버킷화하여 정확하게 설명할 수 있다고 추론했습니다.

측정 및 선호도와 함께 이러한 프로필을 구성하면 사용자에게 올바른 제품 권장 사항을 제공할 수 있어야 합니다. 사용자에게 일련의 질문을 하여 파생된 이 FitCode를 FitCode라고 합니다(FitCode 퀴즈).
이 버전은 앱에서 설계, 사용자 테스트, 구현 및 출시되었습니다. 사용자가 개념을 이해하고 퀴즈에 응답하는 동안 두 가지 눈에 띄는 문제가 있었습니다.

• 하차 횟수가 많음
• 어떤 사람들은 우리가 프로필을 나타내는 데 사용한 이미지가 으스스하다고 생각했습니다.

우리는 퀴즈가 사용자에게 어려운 질문을 먼저 묻는 방식으로 설계되었으며 이러한 접근 방식이 변경되어야 한다고 생각했습니다. 우리는 사용자에게 더 쉬운 질문을 먼저 하고 그 다음 더 어려운 질문을 함으로써 투자를 유도해야 했습니다. 또한 크리에이티브를 변경하고 더 추상적으로 만들었습니다. 그들은 더 이상 소름 끼치지 않았습니다. 아래 화면을 살펴보십시오.

완벽한 핏 찾기

이 기사가 유익하고 통찰력이 있기를 바랍니다.

세계 최고의 대학에서 온라인으로 제품 관리 과정 을 공부 하십시오. 석사, 이그 제 큐 티브 PGP 또는 고급 인증 프로그램을 획득하여 경력을 빠르게 추적하십시오.

추천 프로그램: Duke CE의 디자인 사고 인증 프로그램

다자간 제품 발견이란 무엇을 의미합니까?

제품 발견은 처음으로 고객 접점에 도달한 고객이 회사가 제공하는 제품에 대한 정보를 배우고 이해하고 유지하는 방식을 말합니다. 반복 요구 사항이 있습니다. 기업의 다양한 고객 접점에서 고객 경험의 처음 8초 이내에 이러한 일이 발생하도록 하는 것이 모든 제품 관리자의 목표여야 합니다. 회사가 하나 이상의 제품을 제공하는 경우 목표는 모든 제품에 대해 이를 실현하는 것입니다. 이것은 기본적으로 다자간 제품 발견에 관한 것입니다.

전자 상거래 회사를 위한 제품 관리 관련 과정이 있습니까?

아니요, 전자 상거래를 위한 제품 관리와 관련된 과정은 없습니다. 덜 세심한 회사가 그렇게 주장할 수 있지만, 뛰어들기 전에 자격 증명을 확인하는 것이 현명할 것입니다. 제품 관리를 위한 좋은 프로그램은 그다지 구체적이지 않습니다. 학생들에게 불리할 수 있기 때문입니다. 좋은 제품 관리자가 될 수 있도록 하는 목적은 산업 선택과 상관없이 좋은 일을 하는 데 필요한 기술과 지식을 갖추도록 하는 것입니다.

MBA 없이 어떻게 제품 관리자가 됩니까?

가장 어려운 면접을 통과할 수 있는 훌륭한 제품 관리자에게 필요한 기본 도메인 기술은 제품 기술에 대한 공정한 이해, 제품 디자인 및 고객 여정 설계에 대한 탁월한 지식, 비즈니스 관리 기술입니다. 따라서 충분한 기술력과 업무 경험이 있지만 재무 기획, 예산 편성, 프로젝트 관리, 마케팅, 전략 등과 같은 경영 관리에 대한 이해가 없는 개인에게는 어려울 수 있습니다. 이를 개발하는 가장 좋은 방법은 실제로 MBA를 추구하는 것입니다. 그러나 숙련된 제품 관리자의 요구 덕분에 제품 관리에서 시간제 과정을 이수하여 이러한 역할을 수행할 수도 있습니다.