Shopify Plus是我們創(chuàng)立的電商平臺(tái)的企業(yè)版。2014年2月發(fā)布，如今仍然是第一版。我想是時(shí)候改版了。

經(jīng)歷了一年多，我們對(duì)客戶(hù)與自身都有更深入的了解。陳舊的品牌已經(jīng)不合時(shí)宜了。

我們并沒(méi)有什么特別的流程，就是將以下7件事情串聯(lián)起來(lái)，便達(dá)成了目的。

面談

我對(duì)執(zhí)行團(tuán)隊(duì)的成員進(jìn)行了一對(duì)一面談，明確了Shopify Plus是什么。為了真實(shí)還原，我錄下了每段面談，供以后回放。

面談之后便有靈感涌現(xiàn)——我覺(jué)得自己對(duì)于這個(gè)產(chǎn)品已經(jīng)了如指掌。撰寫(xiě)愿景、任務(wù)描述、品牌指南、項(xiàng)目概述和網(wǎng)站文案都變得容易了。我們的網(wǎng)站需要更好傳達(dá)信息，讓人頓悟其中含義。

項(xiàng)目概述

深入項(xiàng)目之前，我們寫(xiě)了一份項(xiàng)目概述，使大家達(dá)成共識(shí)。我們會(huì)適時(shí)更新，讓它反映出項(xiàng)目的當(dāng)前狀態(tài)。

項(xiàng)目概述中可能會(huì)提出一些問(wèn)題：

• 我們?cè)噲D完成什么目標(biāo)？
• 如何知道項(xiàng)目成功與否？
• 需要做什么？
• 為什么需要這么做？
• 有什么必要條件？
• 做這件事情是為了誰(shuí)？
• 如何讓他們知道？
• 項(xiàng)目團(tuán)隊(duì)有哪些人？
• 截止日期是什么時(shí)候？

競(jìng)品分析

我們研究了還有哪些同類(lèi)產(chǎn)品。我先從一系列競(jìng)品開(kāi)始，然后轉(zhuǎn)向電商領(lǐng)域之外那些與我們目標(biāo)客戶(hù)相同的公司。

我們對(duì)比了競(jìng)品的長(zhǎng)處、弱點(diǎn)和機(jī)會(huì)，還有我們想要涉足的重點(diǎn)領(lǐng)域——和我們想要避開(kāi)的領(lǐng)域。

我們的競(jìng)品分析文檔

信息架構(gòu)

信息結(jié)構(gòu)是內(nèi)容組織的表現(xiàn)，使內(nèi)容易于理解。在網(wǎng)頁(yè)設(shè)計(jì)中，結(jié)構(gòu)圖表反映了網(wǎng)站里各頁(yè)面間的關(guān)系，讓你從更高的角度看待網(wǎng)站的構(gòu)成。

我給舊網(wǎng)站畫(huà)了一張信息結(jié)構(gòu)圖，展現(xiàn)出各頁(yè)面間的關(guān)系。在更新和改變之前，我評(píng)估了內(nèi)容、目標(biāo)與工作量。這張圖表幫助我們確定項(xiàng)目的范疇，可以作為所有頁(yè)面撰寫(xiě)、設(shè)計(jì)和編碼的任務(wù)清單。

Shopify Plus的信息結(jié)構(gòu)圖表

線框圖

在整個(gè)改版過(guò)程中，我都使用線框圖幫助自己思考問(wèn)題、激發(fā)創(chuàng)意。有一些畫(huà)在餐巾紙上，面對(duì)面分享，另一些草圖則通過(guò)網(wǎng)絡(luò)分享。

線框圖能帶來(lái)一項(xiàng)意外收獲：它幫你撰寫(xiě)內(nèi)容。寫(xiě)文檔讓你難以把一切視覺(jué)化，在線框圖中粘貼內(nèi)容能讓人清楚感受到頁(yè)面的跳轉(zhuǎn)流程，每塊內(nèi)容與其他如何保持關(guān)聯(lián)。

Shopify Plus改版所用的高保真線框圖

靈感畫(huà)板

我的靈感畫(huà)板展示新品牌可能的樣貌。它們有助于讓我在項(xiàng)目早期從團(tuán)隊(duì)得到反饋。

我使用Pinterest創(chuàng)建了眾多畫(huà)板，用于局部分解，例如導(dǎo)航、動(dòng)畫(huà)和字體等，不會(huì)讓創(chuàng)意迷失在單個(gè)畫(huà)板中。

研究過(guò)程中在我Illustrator中繪制靈感創(chuàng)意，將文字、圖片和色盤(pán)結(jié)合成類(lèi)似廣告的圖樣。同樣的設(shè)計(jì)元素出現(xiàn)在各處設(shè)計(jì)稿中，不過(guò)位置和表現(xiàn)有所變化。

Shopify Plus的靈感畫(huà)板

從靈感畫(huà)板中探索Shopify Plus可能的品牌形象

效果圖與交互原型

線框圖和網(wǎng)頁(yè)設(shè)計(jì)印在紙上時(shí)，多數(shù)人都不會(huì)在意。在屏幕上展現(xiàn)設(shè)計(jì)很好，但。

我在線框圖流程早期就開(kāi)始制作交互式效果圖。直到網(wǎng)站編碼完成前，都持續(xù)將它們與客戶(hù)和團(tuán)隊(duì)分享。

我讓他們?cè)跒g覽時(shí)大膽講出自己的看法，才能知道他們操作界面時(shí)所想。這些反饋都突顯了局部的問(wèn)題，也驗(yàn)證了設(shè)計(jì)方案，便于項(xiàng)目的最終定稿。

Shopify Plus的InVision項(xiàng)目頁(yè)面

為Shopify Plus收集反饋

盡管一些機(jī)構(gòu)會(huì)在改版過(guò)程中堅(jiān)持特殊的順序，但這7個(gè)步驟對(duì)我們很有效。選用適合你工作流程的策略，是改版成功的重要因素。

作者信息：

Filippo Di Trapani, Designer at Shopify

Filippo is a designer working at Shopify’s headquarters in Ottawa, Canada. He’s a loving husband, father of 2, and an avid music lover.