一個(gè)完整的交互設(shè)計(jì)，要從客戶定位、用戶研究、市場調(diào)查、競品分析等進(jìn)行分析，再根據(jù)分析得出的結(jié)果做planing，進(jìn)行產(chǎn)品設(shè)計(jì)。

我們所要完成的任務(wù)：

• 重新塑造或完善品牌的視覺標(biāo)識(shí)。
• 重新設(shè)計(jì)當(dāng)前 Bloomsbury 開端網(wǎng)站重要頁面的 UI/UX（幫助用戶快速地了解到課程的重要性從而鼓勵(lì)他們注冊課程）。
• 帶著重要的資源（例如原型圖等）進(jìn)行新會(huì)員的創(chuàng)建，這是為了將 Bloomsbury Beginnings 活動(dòng)從面對面的活動(dòng)擴(kuò)展到可擴(kuò)展的在線資源，從而可以讓用戶與品牌建立長遠(yuǎn)的關(guān)系。

使用的工具: Sketch, Illustrator, Photoshop, InVision, Principle, Keynote

目標(biāo)設(shè)備: ios 設(shè)備

時(shí)間線: < 3周

客戶-Bloomsbury Beginnings

Bloubsbury Beginnings 由 Ann 創(chuàng)建 (位于倫敦市中心的 Calthorpe 項(xiàng)目) , 它通過引入企業(yè)之旅, 幫助具有可持續(xù)發(fā)展的社會(huì)企業(yè)或具有創(chuàng)立企業(yè)，慈善機(jī)構(gòu)的想法的人們，在他們的商業(yè)旅程的第一步中提供介紹，業(yè)務(wù)支持資源和服務(wù)來幫助他們進(jìn)行發(fā)展。

企業(yè)家在為期3個(gè)月的時(shí)間內(nèi)得到該領(lǐng)域?qū)＜业姆?wù)和支持。課程結(jié)束后, 他們將為客戶提供一個(gè)商業(yè)計(jì)劃、一個(gè)偉大的網(wǎng)絡(luò)和產(chǎn)品或服務(wù)。

我的角色：分析研究并設(shè)計(jì)用戶界面，與用戶體驗(yàn)研究人員進(jìn)行團(tuán)隊(duì)合作, 獲取用戶數(shù)據(jù)。

整體的步驟主要分為：研究 -> 計(jì)劃 > 設(shè)計(jì)，低保真和高保真的輸出，測試

Research 研究

挑戰(zhàn)：

• 盡管目前的網(wǎng)站, 大多數(shù)會(huì)員 (過去和現(xiàn)在) 仍然直接與Ann聯(lián)系, 以獲得更多的信息, 然后再作出關(guān)于課程等一系列的決定。
• 擁有“會(huì)員專區(qū)” 或創(chuàng)建過去和現(xiàn)在的會(huì)員都可以相互增加價(jià)值的方式。
• 目前大部分教學(xué)都是通過書寫完成，很難保持所有工作的完整性，因此新的 Web app 將以實(shí)現(xiàn)這些業(yè)務(wù)工具和資源的數(shù)字化為目標(biāo)。

用戶體驗(yàn)研究和發(fā)現(xiàn)

背景調(diào)查和訪談：

客戶啟動(dòng)項(xiàng)目的會(huì)話之一

客戶為我們提供了一個(gè)在她的創(chuàng)業(yè)課程中聽取會(huì)話的機(jī)會(huì)，最后, 我們有機(jī)會(huì)直接與現(xiàn)在的學(xué)生交談, 我們總共采訪了7名學(xué)生。

總結(jié)：

• 初始材料：例如畫布，學(xué)生很容易迷失在紙張的格式中（因此我們認(rèn)為可被編輯的可視化版本應(yīng)該是一種解決方案）。
• 起始材料：如畫布很容易丟失的紙張格式 (在這里, 我們認(rèn)為也許一個(gè)數(shù)字化版本, 可以編輯可以是一個(gè)解決方案）。
• 網(wǎng)站上的內(nèi)容不清楚。
• 很多學(xué)生并不是很懂技術(shù)。

競爭對手分析

我們分析了類似的競爭對手公司, 旨在幫助經(jīng)驗(yàn)不足的企業(yè)家實(shí)現(xiàn)他們的商業(yè)理念和目標(biāo)。

Bloomsbury Beginnings (BB) 與競爭對手之間的分析

Affinity Diagram

我們使用這種方法進(jìn)一步分解從訪談中收集到的信息, 并將其細(xì)化為用戶問題、需求、目標(biāo)、情緒和痛點(diǎn)等主題。

研究分析

用戶角色 User Persona

我們創(chuàng)造了兩個(gè)人物角色, 每個(gè)人物區(qū)分男性和女性的特點(diǎn)。這兩個(gè)用戶的時(shí)間都很有限, 因?yàn)樗麄兒芸赡苡幸环?(在他們的商業(yè)理念之外) 薪酬工作, 或者伴隨著孩子。

計(jì)劃 Planning

故事板：

這里使用故事板來可視化用戶旅程, 以進(jìn)一步構(gòu)建和理解他們的使用場景。作為一個(gè)設(shè)計(jì)師, 有時(shí)很難站在用戶的角度進(jìn)行理解, 因此故事板可以提供幫助。

Abbie升職并且負(fù)責(zé)Forest School幼兒園的發(fā)展，她希望打動(dòng)股東們對幼兒園的印象，但是她不知道該如何做，因此她報(bào)名了BB的課程，通過網(wǎng)頁進(jìn)行學(xué)習(xí)。

行程圖 Journey Map

行程圖用于分析用戶可能會(huì)在 BB 課程開始之前和之后遇到的痛點(diǎn)、挫折和滿意, 以及 web 應(yīng)用程序如何優(yōu)化用戶的使用場景。

上圖是Abbie關(guān)于如何發(fā)展她的商業(yè)計(jì)劃的行程圖。

MVP 功能列表 Feature Listing

為了這個(gè)項(xiàng)目的目的, 只對重要的功能進(jìn)行了優(yōu)先排序。

這些功能包括：

1. Lean Cavans: 用戶能夠在手機(jī)上創(chuàng)建和編輯數(shù)字化的Lean Cavans, 并能夠在創(chuàng)建后查看概覽。
2. 日常任務(wù) (任務(wù)板): 此功能通過提示用戶驗(yàn)證其原始假設(shè), 確保用戶處于其任務(wù)/待辦事項(xiàng)列表的頂部。這樣可以防止用戶偷懶。
3. 目標(biāo): 用戶能夠確定他們的長期目標(biāo), 并將其分解為更小的部分。
4. 論壇 (社區(qū))：論壇部分將允許過去和現(xiàn)在的學(xué)生在課程期間和課程結(jié)束后提供支持、交流、分享想法和保持聯(lián)系。
5. 統(tǒng)計(jì) (成就)：此功能顯示用戶的整體進(jìn)度。

（備注：Lean Canvas是Alexander Osterwalder改編的Business Model Canvas，Ash Maurya以精益創(chuàng)業(yè)精神（快速，簡潔和有效的創(chuàng)業(yè)）創(chuàng)造。 Lean Canvas承諾提供可行的，以企業(yè)家為中心的商業(yè)計(jì)劃。 它側(cè)重于問題，解決方案，關(guān)鍵指標(biāo)和競爭優(yōu)勢。)

用戶流程 User Flow

移動(dòng) web 應(yīng)用程序分為兩個(gè)部分, 分別是 “著陸頁” 和 “會(huì)員區(qū)域”，以下是總結(jié)這些部分中用戶流的信息體系結(jié)構(gòu)。

登陸頁的用戶流

會(huì)員區(qū)域的用戶流

低保真原型圖

在設(shè)計(jì)過程的早期, 很快就會(huì)產(chǎn)生低保真的原型圖如下圖所示。它使我們立足于移動(dòng) web 應(yīng)用程序的功能，可以對兩個(gè)主要部分 (著陸頁和會(huì)員區(qū)域) 內(nèi)的頁面進(jìn)行了有效和快速的設(shè)計(jì)。

低保真原型卡片測試

在將卡片變成數(shù)字化的原型圖時(shí)，我們進(jìn)行了一些假設(shè)的測試。

基于卡片紙張的測試

在卡片紙張測試之后, 需要改進(jìn)的方面包括：

• 用戶沒有完全理解與項(xiàng)目相關(guān)的一些 “流行語”, 如 “Lean canvas”、”Pivoting”。
• 需要提供進(jìn)一步說明, 以支持用戶完成所需的操作。
• 一些用戶用多頁面的跳轉(zhuǎn)覺得精疲力盡。

設(shè)計(jì)，原型圖和測試

中保真線框圖（測試）：

在這個(gè)階段, 對我們的原型進(jìn)行用戶測試，獲取重要的反饋。中保真度原型用于測試, 因?yàn)槲覀兿Ｍ@得有關(guān)功能、交互和可用性的反饋。

測試迭代結(jié)果

登陸頁網(wǎng)站: 下圖顯示了測試后對著陸頁所做的更改。

總結(jié)得出：漢堡菜單轉(zhuǎn)移到右側(cè)更容易訪問, 因?yàn)樵谡麄€(gè)應(yīng)用程序中, 登陸功能的使用率超過漢堡包菜單。這凸顯了整體的會(huì)員價(jià)值，并且用戶可以清楚的理解 BB 的價(jià)值所在。

通過測試后對登陸頁進(jìn)行修改

實(shí)現(xiàn)/統(tǒng)計(jì)部分: 這里使用選項(xiàng)卡設(shè)計(jì)來拆分頂部的時(shí)間間隔 (例如 “今天”)。通過不同地背景顏色更好地區(qū)分“課程完成度”和“主要目標(biāo)進(jìn)展”。

導(dǎo)航欄簡介：用戶在會(huì)員區(qū)域找不到主要的功能。因此, 我們引入了底部導(dǎo)航欄, 以幫助這些主要部分之間更容易和更快的導(dǎo)航。

UI設(shè)計(jì)概念

UI 設(shè)計(jì)的第一步是了解品牌的“原因”和核心價(jià)值, 以便創(chuàng)造一種被轉(zhuǎn)化為視覺元素的情感和感覺。與Ann (客戶和創(chuàng)始人) 的第一次會(huì)面有助于深入了解企業(yè)的目的和使命，她分享了她的商業(yè)價(jià)值觀, 以及 Bloomsbury Beginnings (BB) 使用 “可持續(xù)性” 和 “社區(qū)” 等詞的原因。

上面的設(shè)計(jì)概念表顯示了我想為BB創(chuàng)造的情感 (或聲音的語氣) 和視覺語言。

情感 : 對于網(wǎng)站上的用戶和新會(huì)員區(qū)域來說, 被喚起的情緒是專業(yè)的、培養(yǎng)的、支持的、激勵(lì)的和鼓勵(lì)的。

視覺語言: 形狀柔軟圓潤, 使視覺效果更受歡迎, 更容易接受。任何運(yùn)動(dòng)都會(huì)顯示出逐漸的進(jìn)展和增長。使用的顏色將是自然的, 涼爽和綻放的品牌名稱 (BB)。空間中的元素將被允許像人一樣可以呼吸, 具有簡約和清晰的UI。

心情板 Mood board

這里的情緒板可以直觀地理解用戶的感覺/情緒/心情，從而更好地為網(wǎng)站進(jìn)行創(chuàng)作。用這個(gè)方向，情緒板 2是目前在很多創(chuàng)業(yè)網(wǎng)站上都很流行的插圖設(shè)計(jì)。它給人一種異想天開和友好的感覺, 然而對受眾目標(biāo)來說, 如果沒有被徹底表達(dá)地話，可能會(huì)讓人感到有些隨意和不成熟。

情緒板1和情緒板2

情緒板 1 主要涉及團(tuán)隊(duì)合作的形象, 成長和支持是選擇的方向。之所以選擇這個(gè)方向, 是因?yàn)榭蛻?(Ann) 覺得這最好傳達(dá)了她的愿景和使命, 再加上這個(gè)可以產(chǎn)生與觀眾一種親密的感覺，對此我完全同意。

樣式 Style Tile

Style Tile 可以對按鈕、顏色、圖像和版式等元素的描述, 幫助翻譯網(wǎng)站和品牌的視覺標(biāo)識(shí)。

顏色: 調(diào)色板是為了吸引女性和男性。在色彩心理學(xué)方面, 綠色與成長和發(fā)展有關(guān), 這是這個(gè)項(xiàng)目的關(guān)鍵術(shù)語之一。眾所周知, 藍(lán)色代表了信任、安全和可靠性, 這也是我們希望用戶與 Bloomsbury 這個(gè)品牌產(chǎn)生關(guān)聯(lián)。白色指的是簡單、新的開始和新鮮的想法。調(diào)色板很好地融合在一起, 給人一種現(xiàn)代的感覺。

圖標(biāo): 選擇的圖標(biāo)被 “線條化”, 其視覺重量小于 “填充”。因此, 使界面顯得不那么笨重。

按鈕: 使用的按鈕有圓形的邊緣, 比起尖銳的邊角，更能表達(dá)歡迎和友好。線條按鈕 button 1 用于輔助號召行動(dòng)操作(secondary call-to-actions), 而填充的按鈕中用于主要的行動(dòng)操作(primary call-to-actions)。

排版: Avenir next 是用于標(biāo)題和正文文本的字體, 以保持一致性。它是友好的, 簡單的, 并在各種各樣的字體重量, 使其有更多的多樣性。

新的 Logo 設(shè)計(jì)

客戶的創(chuàng)意自由用于探索logo設(shè)計(jì), 進(jìn)一步發(fā)展品牌。我所追求的主題是新鮮的、現(xiàn)代的、通過與移動(dòng)設(shè)備的交互, 與目標(biāo)受眾建立聯(lián)系，并且傳達(dá)品牌信息。

從下面的標(biāo)志草圖，創(chuàng)意 a 顯示了兩個(gè) “b”的組合，從公司名稱成翅膀，代表飛行的高和增長。

想法 b 正在以字母 “b” 的形狀制作一個(gè)愛情符號，給人得到支持和照顧的感覺。想法 c 是想法 a 和 b的結(jié)合，想法 d 和 f 探索了相互關(guān)聯(lián)的元素, 以代表社區(qū)和團(tuán)結(jié)。想法 e 是使字母 “b”的植物形狀, 代表他們 “鼓勵(lì)他們的想法”。想法 g字母 “b”翻轉(zhuǎn)看起來像一本書可以展示出一種學(xué)習(xí)氛圍。

我覺得這兩種設(shè)計(jì)通過進(jìn)一步的探索設(shè)計(jì)后，可以在親近目標(biāo)用戶的同時(shí)代表品牌形象。

下面顯示了最終選擇的 logo, 不同的顏色下, 展示使其多才多藝和靈活。

如下圖所示, 新和舊的 logo 并排放置進(jìn)行對比?！癇” 的邊緣是更為柔和的，因此更受歡迎。中心的蜂蜜籽被刪除, 因?yàn)檫@樣的細(xì)節(jié)在縮小logo或者是在窄小的區(qū)域進(jìn)行顯示的時(shí)候，可能會(huì)丟失, 例如在手機(jī)上。一般來說, 新的標(biāo)識(shí)與舊的沒有什么大的區(qū)別, 所以現(xiàn)在的成員仍然可以很好地將它與品牌聯(lián)系在一起。

高保真原型

然后將線框轉(zhuǎn)換為高保真原型，下面顯示了主要部分的高保真屏幕：

設(shè)計(jì)決策 Design Decisions

高保真用戶工作流 High fidelity user flow

社區(qū)部分

目標(biāo)部分

Lean Canvas 用戶流

上圖: 用戶在其Lean Canvas 的隱私模式之間切換

Loading Share Experience 具體的原型

Loading Share Experience?projects.invisionapp.com

視頻展示

https://vimeo.com/334479437?vimeo.com

總的來說，我對項(xiàng)目結(jié)束時(shí)所取得的成果感到滿意，因?yàn)槲矣X得我們將客戶的愿景變?yōu)楝F(xiàn)實(shí)。 在這個(gè)項(xiàng)目中，我真正理解了在適當(dāng)?shù)臅r(shí)間讓客戶參與項(xiàng)目的價(jià)值（我們在情緒板和Style Tile階段獲得了客戶反饋）。 這確保了作為設(shè)計(jì)師，您可以理解他們對產(chǎn)品/品牌的愿景。

本文翻譯自Medium：Case Study: Mobile Web App

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

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