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

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

一、主題?The Problem

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

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

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

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

職責(zé)。我作為UX/UI設(shè)計師與多職能團(tuán)隊合作，和開發(fā)部門進(jìn)行溝通協(xié)作，從而解決出現(xiàn)的問題。通過調(diào)研和采訪，我熟悉了養(yǎng)蜂行業(yè)。我撰寫和編輯文本，建立新的品牌形象，設(shè)計了商標(biāo)。我設(shè)計官網(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. 提高瀏覽者對產(chǎn)品的興趣；
2. 吸引潛在投資者。

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

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

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

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

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

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

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

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

五、初步草圖? Preliminary sketches

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

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

初步的草圖

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

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

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

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

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

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

低保真線框圖

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

六、遣詞造句?Wordsmithing

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

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

七、反饋和建議?Feedback and Pivot

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

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

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

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

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

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

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

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

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

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

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

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

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

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

高保真線框圖

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

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

九、收獲?Lessons Learned

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作者：Camille Thomas

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

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

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

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