中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

目標設(shè)備: ios 設(shè)備

時間線: < 3周

客戶-Bloomsbury Beginnings

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

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

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

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

Research 研究

挑戰(zhàn)：

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

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

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

客戶啟動項目的會話之一

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

總結(jié)：

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

競爭對手分析

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

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

Affinity Diagram

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

研究分析

用戶角色 User Persona

我們創(chuàng)造了兩個人物角色, 每個人物區(qū)分男性和女性的特點。這兩個用戶的時間都很有限, 因為他們很可能有一份 (在他們的商業(yè)理念之外) 薪酬工作, 或者伴隨著孩子。

計劃 Planning

故事板：

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

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

行程圖 Journey Map

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

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

MVP 功能列表 Feature Listing

為了這個項目的目的, 只對重要的功能進行了優(yōu)先排序。

這些功能包括：

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

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

用戶流程 User Flow

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

登陸頁的用戶流

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

低保真原型圖

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

低保真原型卡片測試

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

基于卡片紙張的測試

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

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

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

中保真線框圖（測試）：

在這個階段, 對我們的原型進行用戶測試，獲取重要的反饋。中保真度原型用于測試, 因為我們希望獲得有關(guān)功能、交互和可用性的反饋。

測試迭代結(jié)果

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

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

通過測試后對登陸頁進行修改

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

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

UI設(shè)計概念

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

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

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

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

心情板 Mood board

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

情緒板1和情緒板2

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

樣式 Style Tile

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

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

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

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

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

新的 Logo 設(shè)計

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

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

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

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

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

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

高保真原型

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

設(shè)計決策 Design Decisions

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

社區(qū)部分

目標部分

Lean Canvas 用戶流

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

Loading Share Experience 具體的原型

Loading Share Experience?projects.invisionapp.com

視頻展示

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

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

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

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

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