編輯導(dǎo)語：如何為初創(chuàng)公司進(jìn)行官網(wǎng)設(shè)計(jì)？這需要設(shè)計(jì)團(tuán)隊(duì)針對(duì)初創(chuàng)企業(yè)自身特點(diǎn)做好預(yù)算管理、風(fēng)格設(shè)計(jì)、形式呈現(xiàn)等方面的打算。本篇文章里，作者結(jié)合實(shí)際案例，總結(jié)分享了她設(shè)計(jì)初創(chuàng)公司官網(wǎng)的歷程與收獲，一起來看一下。

BeeScientific 是一家初創(chuàng)公司，旨在幫助不同水平的養(yǎng)蜂人通過生產(chǎn)、創(chuàng)新營銷以及易于使用的蜂箱，使他們的蜂群更加強(qiáng)壯和高效。

一、主題?The Problem

“改進(jìn)并使之現(xiàn)代化”。客戶希望對(duì)初創(chuàng)公司官網(wǎng)的設(shè)計(jì)和功能進(jìn)行全方位的調(diào)整?。BeeScientific原本是客戶的一個(gè)實(shí)驗(yàn)性項(xiàng)目，但客戶現(xiàn)在打算把這個(gè)小型副業(yè)變成一個(gè)專業(yè)的企業(yè)。我們接到的需求是建立一個(gè)時(shí)髦的網(wǎng)站，向目標(biāo)受眾推薦產(chǎn)品。

二、挑戰(zhàn)?The Challenges

作為一個(gè)初創(chuàng)企業(yè)，客戶的設(shè)計(jì)預(yù)算很低。更糟的是，我們沒有對(duì)預(yù)算進(jìn)行太多的調(diào)研和測(cè)試?。我無法控制預(yù)算，只能充分利用好時(shí)間。

隨著業(yè)務(wù)的發(fā)展，我所設(shè)計(jì)的官網(wǎng)只是漫長征途中的第一步。因此對(duì)于開始階段，并沒有太多的用戶流程。我的一部分工作就是創(chuàng)建一個(gè)能夠支撐未來發(fā)展的框架。對(duì)于網(wǎng)站，我以擴(kuò)展性和變化性為核心，盡可能在調(diào)整階段不影響用戶的使用。

職責(zé)。我作為UX/UI設(shè)計(jì)師與多職能團(tuán)隊(duì)合作，和開發(fā)部門進(jìn)行溝通協(xié)作，從而解決出現(xiàn)的問題。通過調(diào)研和采訪，我熟悉了養(yǎng)蜂行業(yè)。我撰寫和編輯文本，建立新的品牌形象，設(shè)計(jì)了商標(biāo)。我設(shè)計(jì)官網(wǎng)線框圖，收集用戶反饋并進(jìn)行迭代。

三、最初階段?Getting Started

熟悉蜜蜂的生活特性。我先與客戶進(jìn)行了深入的訪談，詳細(xì)了解養(yǎng)蜂行業(yè)以及商業(yè)宗旨和目標(biāo)??？蛻粝ＭN不同類型的買家：養(yǎng)蜂愛好者、授粉需求者和蜂蜜生產(chǎn)商?。

客戶還沒有大規(guī)模地生產(chǎn)產(chǎn)品，因此該網(wǎng)站應(yīng)側(cè)重于提供信息：

1. 提高瀏覽者對(duì)產(chǎn)品的興趣；
2. 吸引潛在投資者。

下一步，重點(diǎn)將擴(kuò)大至向個(gè)人和經(jīng)銷商銷售蜂箱?、配件和服務(wù)?。

我會(huì)見了開發(fā)部，我們一同敲定了截止日期和目標(biāo)日期的時(shí)間表。在這個(gè)過程中，我們彼此之間和客戶之間都保持著穩(wěn)定的聯(lián)系?。

用戶訪談?。接下來，我想了解實(shí)際使用產(chǎn)品的用戶的內(nèi)部信息，所以我與當(dāng)?shù)氐膸讉€(gè)養(yǎng)蜂人進(jìn)行了交談?。Langstroth ?蜂箱 ——一種垂直堆疊的模塊化蜂箱，是傳統(tǒng)設(shè)計(jì)。與我交談的每個(gè)人都使用這種蜂箱。許多人熟悉它，認(rèn)為它是行業(yè)標(biāo)準(zhǔn)，除了 Langstroth 之外并不考慮其他產(chǎn)品。

養(yǎng)蜂人的主要煩惱在于，只是保持他們的蜜蜂活著就非常困難了。他們投資了很多錢來起步，并希望他們的蜂群能夠生存下去。但問題總是出現(xiàn)，比如害蟲和螨蟲入侵他們的蜂巢，他們的蜂群飛走，以及用笨重的設(shè)備采蜜的困難性。我還了解到養(yǎng)蜂人非常關(guān)心周邊環(huán)境和日益減少的蜜蜂種群?。

當(dāng)我開始編寫和組織文本的層級(jí)?、位置和順序時(shí)?，這些信息對(duì)我來說是非常寶貴的。為了吸引消費(fèi)者嘗試新的蜂巢類型，我需要強(qiáng)調(diào)該產(chǎn)品如何解決他們的蜂巢問題并提升他們的養(yǎng)蜂方式?。

四、官網(wǎng)分析和構(gòu)思?Website Analysis and Ideation

深度分析。我盡可能多地收集研究資料，深入研究原網(wǎng)站的內(nèi)容和設(shè)計(jì)，復(fù)查改進(jìn)的機(jī)會(huì)。

• 客戶希望對(duì)網(wǎng)站的整體外觀和氛圍進(jìn)行全面更新?。黃黑相間的蜜蜂商標(biāo)與棕褐色和海軍藍(lán)的主色調(diào)相沖突。商標(biāo)設(shè)計(jì)和字體選擇也顯得過時(shí)了。
• 導(dǎo)航菜單欄太小了，很難找到?？蛻舭才诺牡卿浌δ芤膊]有被用戶所使用。
• 頁面上的互動(dòng)標(biāo)識(shí)太小了，而且在圖片中被忽略?。他們需要更明顯地展示出來。
• 圖片需要更好的排版?，文本需要更有層次感。文字太小了，無法吸引人們閱讀。
• 這些版塊并不適合放在這個(gè)位置，也沒有很好地推廣產(chǎn)品?。其中兩個(gè)版塊是可以點(diǎn)擊的，另一個(gè)版塊則會(huì)跳轉(zhuǎn)到一個(gè)主菜單中都找不到的新頁面。這個(gè)新頁面給出了關(guān)于產(chǎn)品的詳細(xì)信息，是最重要的頁面之一。

五、初步草圖? Preliminary sketches

低保真線框圖。總結(jié)出一些必要的調(diào)整后，我開始為新的設(shè)計(jì)進(jìn)行構(gòu)思。

我需要讓開發(fā)人員了解這個(gè)項(xiàng)目所涉及的內(nèi)容和復(fù)雜程度，以便他能夠制定相應(yīng)的計(jì)劃。我草擬出一些完成任務(wù)所需的頁面、媒體和鏈接，并與他就項(xiàng)目所需進(jìn)行了溝通。

初步的草圖

網(wǎng)站有四個(gè)主要頁面：首頁、產(chǎn)品頁、介紹頁和投資或聯(lián)系頁?。雖然功能相當(dāng)簡(jiǎn)單，但需要傳達(dá)很多信息給用戶。事實(shí)上，這些頁面都充滿了長文本，沒有太多的變化和引導(dǎo)。

我希望我的設(shè)計(jì)能夠幫助用戶關(guān)注到頁面的各個(gè)部分。我在每個(gè)部分都添加了交互模塊，促進(jìn)用戶探索更多的信息?？蛻粲幸粋€(gè)圖片和視頻庫，但沒有被很好地展示出來。我選擇了現(xiàn)有的最高質(zhì)量的圖片和視頻，將它們協(xié)調(diào)地?cái)[放于頁面，并配有描述性的標(biāo)題和查看更多信息的按鈕。

六邊形是養(yǎng)蜂業(yè)的一個(gè)標(biāo)志性形狀，所以我用尖角、直線和基礎(chǔ)形狀創(chuàng)造了一種幾何感，來增強(qiáng)視覺效果。為了使網(wǎng)站整體視覺一致，我使用了同一種字體，標(biāo)題和正文采取了不同的粗細(xì)程度。

我始終將這個(gè)網(wǎng)站作為公司發(fā)展的框架?。隨著時(shí)間的推移，網(wǎng)站將新增和擴(kuò)展業(yè)務(wù)，包括結(jié)賬流程、更多的產(chǎn)品頁、服務(wù)選擇，甚至可能包括社交媒體或博客功能。我創(chuàng)建了主菜單，并將業(yè)務(wù)排版成未來能夠輕松添加內(nèi)容的方式。

客戶希望開發(fā)一個(gè)應(yīng)用程序供用戶下載，但這還不在當(dāng)前的計(jì)劃之內(nèi)。我做了一個(gè)響應(yīng)式的設(shè)計(jì)，在任何屏幕尺寸下都能很好地呈現(xiàn)網(wǎng)頁?。

響應(yīng)式網(wǎng)頁設(shè)計(jì)

低保真線框圖

我把我的設(shè)計(jì)發(fā)給了開發(fā)人員，解釋了使用流程并回答了對(duì)方的問題。接下來由開發(fā)人員開始構(gòu)搭建網(wǎng)頁框架。

六、遣詞造句?Wordsmithing

關(guān)鍵的是方式，而不是內(nèi)容。網(wǎng)頁上有很多信息文本。利用我從養(yǎng)蜂人那里學(xué)到的知識(shí)，我撰寫了簡(jiǎn)潔的標(biāo)題，以吸引用戶的關(guān)注。我精簡(jiǎn)了句子，濃縮了段落信息，并用標(biāo)題分割了文本，使文本變得易讀，易理解。

我將“介紹”頁的文本改為第三人稱敘述，講述客戶如何提出想法并將其落實(shí)的故事。但是，這種敘述語氣與網(wǎng)站的其他文本并不匹配，而且客戶認(rèn)為這并未展現(xiàn)他所追求的專業(yè)性，所以我把文本改回第一人稱敘述。

七、反饋和建議?Feedback and Pivot

設(shè)計(jì)審查。作為一個(gè)設(shè)計(jì)師，得到他人的意見是很重要的?，可惜的是，這個(gè)項(xiàng)目沒有進(jìn)行用戶測(cè)試的條件。

不過，我還是把我的線框圖給同事們進(jìn)行審查，得到了一些有價(jià)值的反饋。

客戶希望該網(wǎng)站優(yōu)先為消費(fèi)者提供信息?；谶@個(gè)目標(biāo)，我在導(dǎo)航菜單上沒有為投資頁設(shè)置鏈接，而是在主頁的主體和頁腳設(shè)置了鏈接。我收到了幾條反饋，說這些鏈接很難理解。雖然這不一定是主要目標(biāo)，但還是需要避免混淆。

我已經(jīng)反復(fù)閱讀了太多的文本，很難用全新的眼光去看待它。我收到一個(gè)想法，于是試著從文本中提取一些信息，從視覺上強(qiáng)調(diào)突出的要點(diǎn)。

雖然在設(shè)計(jì)過程中我已經(jīng)考慮了留白，但它仍然顯得文字擁擠。我增加了更多的留白，并在整個(gè)網(wǎng)站上分割了幾個(gè)段落，讓文字和圖片有了更多的空間?。

有人向我建議將其中一個(gè)視頻移到產(chǎn)品頁的頂部。我認(rèn)為這是一個(gè)很好的想法，通過給用戶一些可以立即點(diǎn)擊的東西來吸引他們注意到產(chǎn)品信息。

在做了這些改動(dòng)之后，我把我的設(shè)計(jì)交給客戶審批，并與開發(fā)人員溝通我們的項(xiàng)目進(jìn)展，確認(rèn)了即將到來的截止日期。

八、設(shè)計(jì)實(shí)現(xiàn)?Bringing It All to Life

高保真線框圖。最后，是時(shí)候添加顏色并將設(shè)計(jì)實(shí)現(xiàn)了。

我考慮過使用黑色和黃色的主色調(diào)方案，這是非常有標(biāo)志性的蜜蜂顏色。但是，這些顏色很刺眼，而且與產(chǎn)品的圖片相沖突，這與我想達(dá)到的效果恰恰相反。

我也喜歡客戶選擇的海軍藍(lán)，在與他商討顏色后，他同意使用藍(lán)色調(diào)。考慮到精簡(jiǎn)用色?，我把海軍藍(lán)和類似的藍(lán)紫色搭配在一起?。

六邊形是蜂箱的一個(gè)代表性形狀，尤其體現(xiàn)在產(chǎn)品上，我已經(jīng)在網(wǎng)站設(shè)計(jì)中使用了六邊形。所以在設(shè)計(jì)商標(biāo)時(shí)，我繼續(xù)以六邊形為主題進(jìn)行變換。我力求商標(biāo)簡(jiǎn)單又獨(dú)特。我使用了與網(wǎng)站主體相同的銳角形狀。我還想要商標(biāo)具有擴(kuò)展性和辨識(shí)度。為了象征蜜蜂，我在六角形上添加了很多種類蜜蜂都有的兩路條紋。

風(fēng)格指南和商標(biāo)設(shè)計(jì)

我把風(fēng)格的調(diào)整落實(shí)到我的低保真線框圖上。在第二輪設(shè)計(jì)審查后，我做了一些細(xì)微的調(diào)整，比如修改文本對(duì)齊方式和移動(dòng)文本字段標(biāo)簽。

高保真線框圖

在項(xiàng)目后期和線框圖的編輯過程中，我與客戶進(jìn)行了溝通，根據(jù)客戶需求進(jìn)行了修改。在移交給開發(fā)部門時(shí)，我解釋了我的設(shè)計(jì)并解答了他們的疑惑。在接下來的一個(gè)月里，我繼續(xù)與開發(fā)人員合作，解決出現(xiàn)的問題，并確保設(shè)計(jì)稿能落實(shí)到產(chǎn)品。

高保真響應(yīng)式設(shè)計(jì)

九、收獲?Lessons Learned

我喜歡和初創(chuàng)公司合作。我很享受參與到公司發(fā)展之中。我學(xué)到了很多關(guān)于蜜蜂的知識(shí)，我覺得我已經(jīng)準(zhǔn)備好擁有自己的蜂箱了。

我曾經(jīng)急于提升業(yè)務(wù)，但我知道，一個(gè)公司的發(fā)展速度取決于它的能力。

例如，我很想做一個(gè)結(jié)賬流程，讓消費(fèi)者直接通過客戶的網(wǎng)站購買產(chǎn)品。但是，客戶還沒有準(zhǔn)備好相應(yīng)業(yè)務(wù)。我不得不控制我的計(jì)劃和預(yù)期，以滿足客戶最看重的商業(yè)目標(biāo)。用戶永遠(yuǎn)是體驗(yàn)設(shè)計(jì)師的首要服務(wù)對(duì)象，但前提是你要實(shí)現(xiàn)既定的商業(yè)目標(biāo)。我期待繼續(xù)和這個(gè)公司合作，期望看到公司未來的良好發(fā)展。

我覺得我對(duì)于響應(yīng)式網(wǎng)頁設(shè)計(jì)的能力得到了極大的提高。有非常多不同的屏幕尺寸被各類消費(fèi)者使用。如果你不設(shè)計(jì)好應(yīng)對(duì)屏幕變化的方案，網(wǎng)站很可能看起來雜亂無章和難以使用，這對(duì)用戶來說是一個(gè)巨大的使用障礙。我學(xué)到了很多關(guān)于留白的使用，以及留白在不同設(shè)備上的呈現(xiàn)效果。我通過試驗(yàn)和失敗總結(jié)以及在盡可能多的設(shè)備上檢查我的設(shè)計(jì)，獲得了留白的使用經(jīng)驗(yàn)?。

在這個(gè)項(xiàng)目中，我見證了設(shè)計(jì)和開發(fā)高效合作下創(chuàng)造的產(chǎn)品。協(xié)作、共識(shí)和開放的溝通都是我們團(tuán)隊(duì)的日常?，這也體現(xiàn)在最終的產(chǎn)品中。

這是我第一次作為獨(dú)立用戶體驗(yàn)設(shè)計(jì)師的任務(wù)，這讓我擔(dān)憂又興奮。我覺得這次重新設(shè)計(jì)提升了我的能力，并讓我的設(shè)計(jì)信心得到增長。我自在地以任何方式安排我的工作流程，我喜歡學(xué)習(xí)最優(yōu)且最有效的工作方式。

十、未來發(fā)展?Moving Forward

這家公司有很大的發(fā)展空間。公司潛力是無限的 !

1. 結(jié)賬流程和服務(wù)管理

一旦企業(yè)能夠生產(chǎn)和銷售產(chǎn)品，增加結(jié)賬流程將是下一步。

設(shè)計(jì)的一個(gè)重要考量是合理預(yù)估安排訂單和配送的時(shí)長?。由于這是一個(gè)較為復(fù)雜的流程，我想確保這個(gè)時(shí)間橫跨流程的前中期，以便用戶調(diào)整心理預(yù)期。未來還有機(jī)會(huì)向消費(fèi)者提供每月服務(wù)。這個(gè)功能需要進(jìn)行調(diào)研和測(cè)試，從而確保它能為用戶提供妥善的服務(wù)。

2. 社交互動(dòng)和聯(lián)通

客戶的發(fā)展目標(biāo)之一是創(chuàng)建一個(gè)養(yǎng)蜂社群，養(yǎng)蜂人們能收到新聞月報(bào)，甚至可以相互交流。我很想深入了解這個(gè)業(yè)務(wù)，看看會(huì)有什么機(jī)會(huì)點(diǎn)。根據(jù)我的觀察，養(yǎng)蜂人們通常很關(guān)注蜜蜂，并喜歡與他人討論蜜蜂。網(wǎng)站將成為養(yǎng)蜂人互動(dòng)的社群，而不僅僅是一個(gè)購買產(chǎn)品或服務(wù)的地方。

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）。

作者：Camille Thomas

原文：https://bootcamp.uxdesign.cc/ux-case-study-website-redesign-for-a-startup-business-39b4905301b2

譯者：曹競(jìng)羽；審核：劉倩茹、李澤慧、張聿彤；編輯：孫淑雅

本文由@TCC翻譯情報(bào)局 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議