Pinkoi 全新櫥窗主頁改版設計 / A New Look for the Pinkoi Window Main Page

自從我重新設計 Pinkoi 櫥窗內頁已經是一年前的事。

原本我打算下一個案子立刻著手改造櫥窗主頁,後來卻因為其他 Pinkoi 的案子真的忙不過來而暫時擺在一旁,還好自從我們新的視覺設計師嗄抓進來之後,幫我分擔很多純視覺的部分也支援行銷,我總算可以回去專注我最重要的工作-持續改造 Pinkoi 這個產品,讓大家都更喜歡逛 Pinkoi  ; )

It’s been a year since I redesigned the layout for Pinkoi Window.  Originally I planned to work on the main page next… until I got caught up with other Pinkoi projects and spread myself too thin. Luckily with my new visual designer G’s on board, I finally had time going back to focus on my most important thing — Pinkoi as the product itself  ; )

最初設計 Pinkoi 設計櫥窗的時候,是預想設計給一群很可愛的潛在消費者。她們來逛 Pinkoi 的頻率很高,也許不儘然每次都會下單購買,但都非常喜歡逛各式各樣的設計商品,享受發掘和分享好設計的樂趣,因為她們很喜歡欣賞美好的事物,樂於啟發他人也喜歡被其他使用者所挑選的好設計給啟發。 Pinkoi 設計櫥窗最初就是設計給這群可愛的使用者。

When I first designed Pinkoi Window, it’s designed for our ‘potential’ shoppers who visit Pinkoi very often, not necessarily shop every time but definitely enjoy browsing, discovering and sharing good designs.  They like to inspire others and to be inspired.

由於我們從開站的第一天就開始運用 Google Analytics 追蹤用戶的使用行為、社交行為和購買行為,這樣的設定讓我有足夠的數據以分析轉化為更有意義的資訊,深入了解使用者的喜好與各功能的表現,因此讓我能夠有效評估產品修改的各項決策。

在每天有愈來愈多人到訪 Pinkoi 之後,根據我們的 Google Analytics 數據顯示,我注意到舊櫥窗主頁已經無法滿足使用者的需要,便立刻開始企劃櫥窗主頁的重新設計,打算透過這次的改版提高該功能的綜合表現和幾個重要的數據:(1) 提高被瀏覽次數 (2) 增加頁面停留時間 (3) 吸引更多更多的不重複訪客。

With more and more visitors stop by Pinkoi everyday, the old Pinkoi Window couldn’t satisfy users’ needs anymore according to our Analytics metrics so I started to work on a new page redesign.  My goals were to improve several Pinkoi Window metrics: (1) Grow page views (2) Increasing average time on the main page (3) Attract more unique visitors.

 

window_new_sets

 

新的櫥窗主頁改版提供了更好的瀏覽經驗,讓使用者能夠更方便快速的瀏覽不同的設計櫥窗與櫥窗裡的商品。舊的櫥窗小圖是以「列表」的方式呈現在主頁上,這次我採用一種「迷你視窗」的設計來呈現一個個的櫥窗,比較起舊的條列式設計,新的迷你櫥窗更貼近設計櫥窗的概念。

這次我也一併在櫥窗主頁加上了各櫥窗的統計數字,以簡潔的方式呈現每個設計櫥窗的「被觀看次數」、「被收藏次數」,幫助使用者能更快速地了解每個櫥窗的受歡迎程度。

The new redesign offered better ways to browse the windows and make it a lot easier to click through windows and products.  The old windows used to be shown in a list view on the main page, but now I used a ‘mini gallery’ style to showcase the windows and added new stats like Views and Favorites for users to understand how popular each window is.

在設計裡,還有一個大多數人應該都不會注意到的有趣小細節:

在每一個迷你櫥窗的右下角有發表者的個人圖像 (avatar),在某些個人圖像的左邊,我設計了一個像「牌堆」的視覺元素,只有在當該設計櫥窗有超過一人收藏時會出現,也就是當發表者的某個櫥窗開始被人收藏之後,她的個人圖像不再是孤單一人,而是會看起來像下面還疊了數張個人圖像的感覺 。

會有這個 idea,是因為我在心裡經常默默地覺得,使用者的網站社交行為就像一般生活裡的社交行為非常類似,以這個部分為例我想把它視覺化,因為非常有趣,當你喜歡並收藏別人的櫥窗時,你不但是喜歡她的設計搭配,也像是在讚賞她的品味。

Also, here’s an interesting visual detail that most people probably wouldn’t notice.  On the bottom right corner of each window mini gallery is the curator’s avatar.  Next to the avatar, I designed a deck-like element for windows with more than 1 Favorite.  When a curator’s window has been favorited, her avatar would have this element as her avatar’s stacking on top of other avatars.  It’s a tiny cute visual indication of users’ social behavior.  When you fav someone else’s window, you like the mix-and-match she created and you are backing her taste up.

 

mai-pinkoi-window-top

 

「精選設計櫥窗」這個部分,我也在這次改版時放了進去。

A ‘Featured Windows’ section was also introduced in this Pinkoi Window redesign.

這些精選設計櫥窗將會是被 Pinkoi 團隊所挑選出的優質櫥窗,我們想要鼓勵這些被會員們用心搭配的好櫥窗。未來我們可能甚至會根據不同的風格樣式、主題、設計趨勢來挑選櫥窗,以幫助展現 Pinkoi 上各式各樣的好商品。這個「精選設計櫥窗」的設計,配合之前提到的統計數字,都是為了要更鼓勵我們的會員「參與」(engagement) 更多,例如新增更多櫥窗與更熱烈的分享他們所發表的櫥窗。

These featured windows were selected by our team based on the quality of windows.  We highlight awesome windows created by Pinkoi members.  In the future we may even choose them for different styles, themes and trends to showcase the variety of products Pinkoi has.  Combined with the stats provided, with this ‘Featured Windows’ section I can encourage members to create more windows and engage them to share their windows.

 

mai-pinkoi-window-lightbox

 

就像前面所提到的,改版的某個目標正是要提供更好的瀏覽經驗,在仔細的評估與測試之後,我決定採用浮動視窗 (modal window) 的方式來呈現櫥窗的內頁,並配合上左右換頁的功能,所以使用者點選櫥窗之後,可以快速瀏覽不同的櫥窗內頁,而不需要離開主頁並花費等待換頁的時間。

As I stated earlier, one of my redesign plans were to offer better ways to browse the windows. After evaluation and several tests / experiments, I decided to use modal windows with left / right navigations for our windows so that our users can easily access and browse different windows without leaving the main page.

在櫥窗主頁改版的兩個月後,我再度回去研究我們的 Google Analytics 數據,發現很多令人開心的成長:

  1. 被瀏覽次數:提高了 70 %
  2. 不重複訪客:增加了 84 %
  3. 頁面停留時間:增加了 151 %

 

After we released our Pinkoi Window redesign for 2 months, I went back to check on the Google Analytics metrics to see if the goals were achieved.  I found many exciting numbers with growth:

  1. Page views:increased 70 %
  2. Unique visitors:increased 84 %
  3. average time on page:increased 151 %

 

所以改版的目標算是有好好達成 (握拳)

其實關於櫥窗還有很多有趣的設計想法可以分享,但還是先就此打住,以免我待會停不下來。我們會繼續持續地努力,好好的把 Pinkoi 愈做愈好,因為在這裡有我們整個團隊投注的熱情,也許我們團隊還很小,有時候無法一次解決每個問題,但是一定會每天每天都愈做每好的。

最後分享一個比較無關設計想法的內容,就是「啊~有時候我真的很享受製作七彩的 UI Specs」呢!

Last, I’m gonna share something ‘behind the scene’ for fun:  Sometimes I do enjoy making specs especially if they are colorful.  Making them super colorful makes me happy  : P

 

mai-pinkoi-spec

 

啊,對了,我也把思考 UI 過程時畫的手稿內容粗略的拍了起來做紀念。

Ooo, I took picsture of my design thinking progress in response to @Sanford.

 

mai_pinkoi_window_sketch2

mai_pinkoi_window_sketch1

Submit a comment

Your email address will not be published. Required fields are marked *