嘿我是卡肉(Carol),第一屆實習生,之後有機會正式的加入 womany。我也是 womany 的視覺設計 “學徒” ,為什麼是學徒?因為之前是主修平面 / 視覺設計,網頁設計對我來說其實是另一項領域,蠻不同的挑戰,從頁面靈感、找素材、要如何切圖、到如何把使用者經驗(UX)融入設計中,光只是「關於我們」這一頁,就遇到與多學問跟挑戰。

 

為什麼會這麼重視「關於我們 / about us」這頁呢?除了本來就該重視團隊的夥伴,我們也參考 GA(Google Analytics) 的顯示數據,「關於我們」就佔了首頁點擊的 0.3 %(以現在 womany 的流量,其實是好多人),也看得出來大家對我們很好奇!在著手改版前,我們就希望可以帶給大家更不一樣「關於我們 / about us」的頁面!

 

 

這次的設計重點有三個:

 讓大家快速了解到團隊每個人不同的個性與特色

 重視互動性,讓大家覺得這一頁很好玩、有生命、像彼此在溝通

 如何開創有 womany 的特色,即使跟國外網站比較也毫不遜色呢

 

 

工作方法:

 

Trello + 遠端

 

這次使用了 trello 做自己的時間表。做我們的溝通工具,trello 的好處是可以列下 to do list (1, 2, 3),我們很久以前就在有在用 trello,對於小型需要拆成細項的專案,很方便。不過現在我們團隊改使用另外一套工具做整體溝通。(以後再跟大家分享!)

 

 


11/24 - 12/13,前兩週為設計前中期思考與實作,後期留一週請伙伴提供需要的資料

 

 

因為這次加入插畫元素,而這次插畫的幕後功臣是我們的實習糖心洪同學,因為他在桃園就讀,路途很遙遠,所以我們大部分用遠端工作(感謝網路)。如何盡量用關鍵字溝通,也是一大挑戰。

 

 

 

 

在動手畫插畫之前,我先提供洪同學已經完成的 mock-up。為了能更接近預想的畫面,連自我介紹都開始想像每個人好像會講什麼。也方便團隊思考要說的話的時候,可以更簡單!這些話,都是平常大家會講的話,也讓他對於要畫什麼可以有些刺激!

 

 

 

 

設計概念:

 

因為我們很清楚知道我們要展現『大家個性』和『互動性』,我們決定要讓每個使用者都可以直接清楚看見這個網站背後的人,所以我們使用『照片』+『文字敘述』+ 『插畫』的方法。

 

照片,可以直接讓大家看見我們,因為我們跟每一個使用者都一樣,我們自己就是使用者,我們希望可以讓使用者感覺到我們,也知道原來就是這群人在為大家努力,絕對公開和直接。我們希望 womany 的設計可以給大家這樣的感覺,可以直接感覺到『人』,可以感覺到『我們』。

 

也因為想要讓使用者可以感覺到我們,也特別設計滑鼠移動 (mouse over) 的生動效果,可以讓大家直接看到我們的表情變化!這是一種互動性的設計!

 

 


這是還沒照相前的插畫概念,也讓團隊可以先看見可能的樣貌!

 

 

 

 

在做設計的時候,我也有文字記錄的習慣,在拍照之前,也讓團隊知道自己的前後動作!這些動作其實都跟團隊成員的個性有關。而且其實連腳都很有戲!

 

womany 的招牌動作是用兩雙手比出的 W,可是因為想要表現『我們是一路一起走過來的夥伴』,所以讓大家用腳擺出 W。每人穿的顏色同樣是經過思考跟設計的 ------ 溫暖率直的 Carol (自己覺得自己溫暖率直,哈)、自然清新的 Lulu時尚神秘的 Tanya高雅低調的 Tophy熱情勇敢的 Shuan陽光歡樂的 Shaolin穩定踏實的 Jerry

 

 


我是用 photoshop 做設計、去背、修圖

 

 

 

然後,瘋狂去背搭上洪同學的插畫,就是最新的『關於我們 / about us』:

 


 

 

當然,光這一頁其實還有很多需要改進的,譬如我們發現這麼多按鈕設計 (button),其實在 UX 的體驗還不是最完美,譬如底下的實心糖心門還沒有滑鼠滑過的效果,譬如譬如又譬如,但因為改版還有一萬件事情,這時候,我們就得發揮 “done is better than perfect” 的精神,也讓之後有更多變得更好的機會,會繼續持續優化 womany 的頁面的!

 

然後,也許有一天,我們可以離完美再更靠近一點點!接下來我們還會陸陸續續跟大家分享我們的設計概念,敬請期待!

 

 

以上所有圖片來自 女人迷 womany.net