嘿我是卡肉(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