Zivame 的 UX 設計團隊如何實現 Multiway 產品發現

已發表: 2016-12-24

這是 Zivame 用戶體驗總監 Udit Khandelwal 的五部分訪客博客系列中的第一篇。

如果用戶找不到它,則該功能不存在! –人為因素國際 (HFI)

早在 2012 年,我在 HFI 的一次培訓課程中第一次聽到這句話,你總會發現它與我接近 UX 的方式產生了共鳴。

產品發現是任何零售業務最重要的方面之一,如果用戶找不到您提供的產品,它們就不存在。 為了在 Zivame 實現無縫的產品探索,我們在我們的平台上開發了一種多途徑的發現策略。 在這 5 篇文章的系列中,我將介紹用於在 Zivame 展示系列、產品發現和提供交流的槓桿。

這是本系列的第一篇文章,在這裡我將主要從下面給出的槓桿列表中介紹破冰船下的項目:

目錄

在這個系列中:

破冰船 *
  • 主頁登陸卡
  • 主頁 英雄輪播
  • 精選收藏
  • 類別標頭
  • 應用引導
  • 適合碼
一經請求
  • 異構商店-Nav
  • 商店導航特色圖片
  • 提供橫幅
  • 探索
  • Shop-Nav 中的粘滯按鈕
  • 按經驗購物
建議
  • 更多類似這樣的上下文
  • 我們的暢銷書
  • 你可能還喜歡
  • 完美貼合推薦
  • 看看書
手持
  • 登陸頁面優惠條款和條件
  • 基於規則的優惠:
    • 類別頁面
    • 產品頁面
    • 大車
    • 退房
通知
  • 移動應用推送
  • 網絡推送
  • 通用通知
  • 營銷電子郵件
  • 交易電子郵件頁腳
  • 營銷短信
內容掛鉤
  • 登陸頁面的內容注入卡
  • 博客上的內容頁面和集合
  • 內容頁面上的產品注入
侵入性和絕望
  • 有條件的彈出窗口
  • 應用內消息
* 本文涵蓋

這些中的每一個都在用戶旅程中服務於一個非常特定的目的,並相應地使用。 讓我們一一來看看它們——同時討論每種情況下的挑戰,以及我們為克服這些挑戰所做的工作。 在適用的情況下,我還將討論業務指標。

主頁登陸卡

挑戰

  • Zivame 上45%的網絡流量由首次使用的用戶組成
  • 40%的直接和自然流量登陸 Zivame 的主頁
  • 上述大多數用戶對我們提供的產品的廣度知之甚少

解決方案

沒有打開的水平菜單並使用移動優先的漢堡導航是一種經過深思熟慮且經過用戶測試的方法,我們開始採用我們的新堆棧。

它的代價是沒有提前了解我們的產品。

因此,對我們來說,在第一關就進行同樣的溝通變得至關重要。 下面顯示的卡片正是用於此目的。

有趣的是,這種方法最初是為桌面概念化的,後來又適用於移動設備,如下所示。 在桌面版中,

卡片在第一次折疊時佔據頂部空間,而在移動設備中,由於垂直空間限制,它們位於英雄橫幅的正下方。

主頁入口卡和英雄輪播
主頁英雄 – 手機

當我們對此進行概念化時,我們的高管設想如下:

在我的主頁上停留 8 秒的人都不應該在不知道 Zivame 銷售內衣、服裝和運動服的情況下離開。 – Shaleen,首席運營官 Zivame

…而且我認為我們在通過設計實現相同目標方面做得很好。 卡片的位置使它們不容錯過,並且標題和鏈接對各個類別(即內衣、運動服和服裝)設定了明確的期望。 此外,第四張牌允許足夠的靈活性將值得一席的元物品放在第一張牌上。
PS 這個組件在我寫這篇文章的時候正在開發中,很快就會發布!

(另請閱讀:在 Zivame 塑造用戶體驗:產品管理案例研究)

奮進

很難確定每張卡中會包含哪 4 項內容,因為公司中的每個利益相關者都在為他/她的財產尋找優質房地產!
雖然數據似乎是一條輕鬆的逃生路線,您可以簡單地將最需要的東西放在首位,但業務可能有一個相互矛盾的方向。 例如,截至今天,服裝本身僅佔 Zivame 收入的 8%,但它佔據了頂級房地產的 25%。

公司高管適度適度的跨職能合作應該會給你正確的答案。 正如我的產品經理所說:

您必須對某些實體格外友善,以確保它們的不成比例增長。 – Vishrut Shukla,高級 PM – Zivame

主頁 英雄輪播

挑戰

  • 這是下一個主要的房地產,該物業是視覺的。 它需要代表品牌,需要遵循嚴格的視覺設計語言。

解決方案

坦率地說,這是一個很容易設計的,但很難執行的。 我們知道我們遵循的是大而美麗的設計語言,因此很容易決定橫幅必須佔據 100% 的屏幕寬度和 100% 的剩餘屏幕高度。 但這給我們留下了兩個需要解決的問題:

  • 在某些屏幕尺寸上,橫幅會被裁剪,因為我們將使用“覆蓋”算法。
  • 當橫幅一直延伸到屏幕的底部邊緣時,用戶可能會產生一種錯覺,即頁面到此結束,除此之外什麼都沒有。

為了解決裁剪問題,我們定義了安全區域並在多個分辨率下對其進行了測試。 經過幾次打擊和試驗後,我們能夠做到這一點。
我們在橫幅底部放置了一個 V 形,以向用戶提供視覺提示,即橫幅之外還有更多內容。 為了保持簡潔,我們決定讓導航箭頭單向,但也通過放置基於點的導航來提供幻燈片提示。

大量的跨職能協作用於建立正確的橫幅,將正確的信息與類別頁面橫幅拼接在一起,牢記用戶旅程。 上面的部分顯示了一個示例屏幕截圖,下面是我們如何定義安全區域:

主頁英雄橫幅的安全區域

精選收藏

挑戰

  • 橫幅有助於吸引註意力,但為了引起用戶興趣並讓用戶以正確的期望點擊,我們需要告訴他們更多關於集合的信息。 然而,房地產是有限的,不同的收藏品之間存在很多競爭。
  • Zivame 的移動主頁的早期設計曾經採用手風琴系列,其中每個系列有一個包含 10 種產品的數組,然後在一直滾動到最後一個縮略圖後有一個“查看更多”按鈕。 數據分析顯示,超過 40% 與手風琴互動的用戶點擊查看更多。 這強化了上述觀點。 但是,我們不想使用手風琴,因為它不可視且文字繁重。
    舊主頁 – 手機

  • 預先加載過多的產品圖像會對頁面性能產生負面影響。 頁面加載時間每增加一秒,轉化率就會下降 7%。

解決方案

以額外點擊為代價,顯示 USP 以及每個系列的偷看。 除了產品拼貼之外,我們還簡單地展示了 3 條關鍵信息:

  1. 集合名稱
  2. 描述
  3. 簽名屬性

這不僅引起了人們對收藏的興趣,而且還引導用戶帶著既定的期望進入產品發現之旅。 產品拼貼可以在技術上進行優化,以作為單個拼貼圖像而不是多個產品圖像返回。 同樣,此版本已部分部署在當前站點上,其餘版本在我撰寫本文時正在實施。

主頁收藏橫幅(*進行中)

參觀齊瓦梅

類別標頭

挑戰

  • 類別頁面是付費流量的主要登陸頁面。 此外,任何點擊網站內任何收藏/優惠橫幅的人都會進入類別頁面。 因此,在這裡縫合用戶旅程並維護上下文變得至關重要。
  • 品類越廣,用戶的選擇就越困難。 因此,在某些情況下,我們可能希望將用戶旅程縮小到更具體的子類別,然後再縮小到特定產品。
  • 某些類別非常特殊或新,用戶需要在他們登陸頁面的那一刻了解 USP。

解決方案

刊頭由 4 個主要部分組成。 我們提出了一種可配置組件處理上述用例的方法:只需在標頭廣告中放置橫幅並依靠創意橫幅、購物、過濾/排序工具欄並提供通信來完成其餘工作。
我將在這裡討論橫幅,稍後將介紹“shop by”和優惠。 我們為類別橫幅設計了 3 個變體或模板:

  1. 單橫幅
  2. 旋轉木馬
  3. 拆分橫幅

單一橫幅非常適合狹窄的類別和談論他們的 USP。 另一方面,輪播和拆分橫幅是在有限的空間內提供多個橫幅的好方法,並用於引導子類別。
在推廣這些頁面時,數字營銷和創意團隊確保營銷創意人員使用相同的語言並使用相似的圖像將用戶旅程拼接在一起。

類別橫幅 - 單
類別橫幅 - 拆分
類別橫幅 - 輪播

現在就像主頁英雄橫幅一樣,這些橫幅佔據了可用寬度的 100%,但是高度是恆定的。 因此,在某些情況下(或解決方案),我們最終會從右側裁剪橫幅。 因此,就像主頁一樣,我們定義了安全區域,並要求創意團隊在設計這些橫幅時遵循相同的原則。
以下是我們如何為拆分橫幅定義相同的示例:

類別拆分橫幅的安全區域定義

警告

這不是移動優先的設計,並且在優雅降級之後,在移動設備上我們會退回到簡單的橫幅或支持滑動的輪播。 手機沒有拆分橫幅。

應用引導

挑戰

  • 您想告訴用戶這麼多,但在入職期間超過 4 張卡是一種矯枉過正。 空間有限,功能巨大,用戶沒有時間閱讀,儘管如此,您仍需要讓應用程序堅持下去。
  • 你不知道誰在瀏覽:新手或專家,探索者或導航者; 你必須設計一個適合所有人的入職體驗

解決方案

我們沒有考慮我們想告訴用戶什麼,而是開始反過來思考 →用戶想學習什麼? 通過快速的試紙研究,我們發現用戶主要是在尋找以下問題的答案:

  1. 這是關於什麼的?
  2. 我可以在這裡做什麼?
  3. 如何開始?
  4. 對我有什麼好處? 它對我有什麼幫助?

所以問題被簡單地減少到 4 個屏幕可以回答這些問題。 因此,我們在以下 4 個屏幕上歸零:

它是關於什麼的?
它對我有什麼幫助?
我可以在這裡做什麼?
如何開始?
最後一個屏幕被巧妙地設計為推廣FitCode ,但用戶可以跳過它並繼續購物。

注意事項

有幾個故障,我們現在正在糾正,我想警告您:

  1. 通知權限彈出窗口顯示在入職屏幕上。 這對用戶來說非常煩人,我們很可能在這裡得到最小的轉換。 應該做些什麼——應該在發生特定事件(例如登錄、訂單成功或訪問內容等)後尋求通知權限。
  2. 網絡參與消息(營銷彈出窗口)有時會在入職期間顯示。 同樣,這是一種非常糟糕的體驗,用戶在入職期間很可能不接受任何營銷信息。 我們必須注意不要在入職屏幕上顯示任何彈出窗口。

適合碼

挑戰

  • 許多女性更喜歡從實體店購買而不是在線購買。 最常見的原因之一是他們不確定特定產品是否適合他們。 他們不能在線嘗試。
  • 不同的女性有不同的體型,在內衣方面沒有一種適合所有人的產品。 因此,為他們提供適合他們體型和喜好的產品至關重要。
  • 如果你給他們一張表格來填寫他們的衡量標準和偏好,那麼流失率很高。 因此,無論我們想出什麼解決方案,都必須是有效的。

解決方案

Zivame 的時裝設計團隊與產品經理一起進行了廣泛的研究,並推斷出女性的體型可以通過將其分成 11 種輪廓來準確描述。

將這些配置文件與測量值和偏好組合在一起,您應該能夠向用戶提供正確的產品推薦。 我們稱之為 FitCode,它是通過向用戶詢問一組問題(FitCode Quiz)得出的。
它的一個版本是在應用程序上設計、用戶測試、實施和發布的。 當用戶得到概念並回答測驗時,有兩個明顯的問題:

  • 大量下車
  • 有些人認為我們用來代表個人資料的圖像令人毛骨悚然。

我們認為測驗的設計方式是我們首先向用戶詢問難題,這種方法需要改變。 我們需要先向用戶提出更簡單的問題,然後才是更難的問題,以此來吸引用戶。 我們還改變了我們的創意,使它們更加抽象。 他們不再令人毛骨悚然了。 看看下面的屏幕:

FitCode 快速入門
FitCode 第 3 步 - 測量自己
FitCode 第 4 步 - 描述細節
FitCode 結果和建議
找到你的完美契合

我希望您發現這篇文章內容豐富且富有洞察力。

從世界頂級大學在線學習產品管理課程獲得碩士、Executive PGP 或高級證書課程以加快您的職業生涯。

為您推薦的特色課程:杜克 CE 的設計思維認證課程

多路產品發現是什麼意思?

產品發現是指客戶第一次到達客戶接觸點的方式 - 學習、理解和保留有關公司提供的產品的信息,足以確保他們在下次購買時立即記住該品牌有重複要求。 所有產品經理的目標應該是確保這發生在公司各個客戶接觸點的客戶體驗的前 8 秒內。 如果公司提供不止一種產品,目標是為所有產品實現這一目標。 這基本上就是多路產品發現的意義所在。

是否有專門針對電子商務公司的產品管理課程?

不,沒有專門針對電子商務的產品管理的課程。 一些不那麼嚴謹的公司可能會這樣說,但在加入之前檢查他們的證書是明智的。好的產品管理課程並不那麼具體,因為它對學生不利。 使一個人成為一名優秀的產品經理的目的是確保他們具備必要的技能和知識,以獨立於行業選擇做好工作,這反過來又使他們能夠在職業生涯的後期在不同行業之間進行轉換。

沒有MBA如何成為產品經理?

要成為一名能夠通過最艱難的面試的優秀產品經理,您需要的基本領域技能是對產品技術的公平理解、對產品設計和設計客戶旅程的出色知識以及業務管理技能。 因此,對於具有足夠技術技能和工作經驗但不了解財務規劃、預算、項目管理、營銷、戰略等業務管理的個人來說,這可能會令人生畏。 發展這些的最好方法確實是攻讀 MBA。 但是,由於對熟練產品經理的需求,人們也可以通過修讀產品管理的兼職課程來擔任這些角色。