案例分享:2021–22 探索陌生產品,打造從0到1的思維 | #EchoX

設計丸編輯室
設計丸物製
Published in
12 min readFeb 20, 2023

設計丸,前言

2021 年是 NFT 觸發大眾視野的起點,也是被稱為 NFT 元年的時刻,我們用回顧的視角來窺看當時設計團隊是如何面對陌生題目?以及採取的思考與應變作為未來經驗的累積。

✍ ✍ ✍ 設計丸 線上商談室 → https://portaly.cc/designforu

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

⏰ 背景回顧:每次數位變革,像是鬧鐘響起的背景聲

2021 年的 NFT 議題大舉入侵了設計與藝術相關領域,同時引發不少行銷人的關注與加入及實驗應用。NFT 像是開啟了一道新科技幻想大門,各大型品牌爭先恐後地嘗試使用 NFT 作為會員渠道,透過大眾媒體擴散後回饋市場並產生更多反思與人性迴盪。

隔年,2022 年受到大環境的影響,其中涵蓋到戰爭、環境、經濟等多重因素。對比前一年的榮景,反觀 NFT 市場卻是逐漸緩慢地拉開大眾視野以外,但不表示已加入賽局的品牌們或早期投入者會突然採取放棄態度。從熱潮過後的角度來看,大部分的用戶或企業端在前景看好時取得制高點後,是從積極投入轉變成消極觀望,不少採取防守資源為優先選項。或許趁著 NFT 的題目跳離大眾話題外,不論是品牌或是用戶也是重新獲得休憩與思考的機會。

我們先制定粗略的方向感,開始進入專案時才不會跑偏。

恩。。。。大概吧。。。。/ giphy.com

[第一關]

當產品啟動時,便遇上許多模糊性的問題,如下:

🆀 1 如何定義需求 ?

🆀 2 有什麼資訊可以幫助我們?

🆀 3 相關利害關係人的期待?

為什麼會有模糊性的問題呢?產品開始啟動時,外在因素除了要找題目外,內在因素是在調節資源與如何動員,先理解這一層後,我們才能取得下一步線索的門票。

🆀 1 如何定義需求?

需求的起點,是要先找出方向感。

在此,我們稍微變換一下思維,使用大家都熟知的黃金圈理論 (Why ➤ How ➤ What),將層級(組織/產品/設計)由上而下融合出九宮格並在依據不同層級填入相對內容,即可生成下方資訊框架:

建立方向感 / image made by 設計丸

迅速整理後,我們可收斂其洞察:

  1. 組織:做商模
  2. 產品:打造團隊與平台
  3. 設計:共同孵化案例的機會

設計找到方向感,便可思考下一步:定義需求。

需求來源,大多圍繞著人、目標、資源而產生動態變化。
於是,我們一定要很清楚的知道,需求背後的執行單位及目標,才能往下推測所需花費的時間、執行方式。

考慮變因 / image made by 設計丸

使用流程架構:理解需求&變因。我們可從中得知更多線索。

例如,CI 執行重點會集中在設計身上,而 UI 看似需要設計執行其實真正權限會集中在產品團隊身上。

面對模糊的工作時,嘗試畫出流程是引導我們更深入思考:

  • 哪些需求與哪些參與者連動性高
  • 或與誰的溝通(提案)會更花時間等因素
  • 讓我們尋找更敏捷的思考方針

設計要嘗試探索:需求與變因之間的關係。

最後從變因,回推需求,展開行動規劃:

  1. CI 尚未確認產品名稱前,提早讓團隊思考協作,與提案的策略發想。
  2. UI 提案前,開始收集或紀錄利害關係人的意見、開發的想法、現階段的產品目標等。
  3. 持續蒐集 NFT 資訊並透過 Google Slide 集中管理&分析。

以上,如何定義需求,總結三步驟:

建立方向感 → 考慮變因 → 行動規劃

🆀 2 有什麼資訊可以幫助我們?

以設計角度,我們對於資訊上的分類如下:

  1. 領域:進入這個產業所需的知識與專業。
  2. 產品:開發產品所涉及的知識與專業。
  3. 個人:設計團隊的知識與專業。
領域與產品開發時的交集點 / image made by 設計丸

進入一個產品賽道,獲取的知識與資訊必然是動態的。

我們可嘗試將重點行動放在:領域與產品開發時的交集點,可能就是我們要去學習的重點項目。

例如,在區塊鏈產業內大多會碰到交易行為的情境,以及我們即將要去開發一個 NFT 服務平台也會用到交易情境。所以,獲取資訊的優先選擇便可針對在 NFT 買賣流程去做調查。

設計對於資訊的學習,要先嘗試找出優先序。

🆀 3 相關利害關係人的期待?

在第一題「如何定義需求 ?」中,我們已獲得不同層級的關鍵洞察,接著我們再把視角拉遠一點。不論是何種產品開發的終點都需要外觀與體驗。

而產品外觀有多種應用形式,比如 App本身,App Icon、上架素材、Web、Mobile Web、Logo 等,其中最直觀的題目除了 App Icon 外,是可運用更多場景的 Logo 設計。

盤點「利害關係人」的期待 / image made by 設計丸

上圖所示(註1),依據我們暸解自身企業文化與喜好後,會直接將「組織」、「產品」、「設計」放入共同交集後,透過利害關係人連結到產品本身最實際的需求,便可預知 Logo 設計會是第一階段的提案期待。

☞(註1):
左邊,是來自盤點需求背後的洞察。右邊,是來自產品開發上必然會設計的項目。每個組織文化的核心元素都會有差異性,對於組織內的利害關係人們想要的期待,不能透過盲目猜測,先有洞察才能建立有效連結。因為掌握期待是直接反映提案的成效上,設計的洞察決定了提案力。

設計需要盤點「利害關係人」的期待,是用來計劃提案的重點策略之一。

(才盤點完第一題,驚覺文字有點多。)

你考慮過。。。。閱讀的心情嗎。。。。 / giphy.com

(還有別忘了,當時的我們正遠端工作。)

[第二關]

確認了主題後,該如何讓 CI&UI 同時進行?

🆀 4 怎麼開始發想?

🆀 5 何時正式提案?

🆀 6 如何讓決策發生?

CI&UI 會同時進行並涉及不同執行層面。我們的工作會專注在已知與未知資訊之間,該如何進行思考與拆解它們。

🆀 4 怎麼開始發想?

其中的優先序&時程,都可使用任務 X 時間規劃的表格進行觀察。

任務 X 時間規劃的表格 / image made by 設計丸

接著從底層再思考:

  1. 「優先序 」 — 誰先誰後是種迷思,要找出有效率的工作方式。
    考量工作優先序,UI+CI 不必是流水線工作,不存在先有 A 才有 B 的規則。例如:實際情境可能是,發想中的 Logo 與尚未完整的 UI,兩者會因提案過程而互相「預演」。
  2. 「時程」 — 時間是線性,要透過規律找出執行上的想法。
    考量提案時程,在 Logo 不確定名稱與已知 UI 需求裡。例如:Logo 設計先要拉出一個時間上的拋物線(假設的時間成本),加上產品第一階段上線時間前的剩餘時間(已知的時間成本)。
  3. 簡單獲得,整體可擁有的時間成本=預想時間 或 剩餘時間,透過兩者間衡量是否加總或減少,才能感知進入提案的時間該如何計畫。

發想的條件:是來自時間與需求,才能展開提案計劃,反之沒有成本的提案,等於考驗運氣。

🆀 5 何時正式提案?

延續上個題目。
例如:若當 CI 與 UI 執行時間不能同步,我們仍可藉由 UI 主色的設定,回頭做好 Logo 延伸設計的準備。

提案要滾動思考 / image made by 設計丸

對於提案方針,我們應滾動思考:

  1. 不讓線性工作思維綁架行動。
  2. 敏捷思考是透過保留彈性,來創造有效率的產出。
  3. 創造有效率的產出,是為了讓提案有效被選擇。
  4. 正式提案不一定是透過正式會議,而是在溝通確認的那一刻起,就必須預想下一步的任務情境。

正式提案只是一種情境,好的提案透過累積的,從專業與互動中取得堆疊的信任感。

🆀 6 如何讓決策發生?

當設計從需求中逐步落地執行後,想達成提案目的,除專業分工外最重要的是產生決策。

為什麼決策很重要 / image made by 設計丸

為什麼決策很重要:

  • 時間是稀有資源,讓決策適時發生,也會讓團隊敏捷地往前推進。
  • 要獲得利害關係人的決策,也是產品和設計互相推進的確認機制。
  • 設計師在操作軟體中是激發靈感的時刻,在視覺編排過程會依需求判斷情境與狀況,也是設計師專業養成決策的最底層。

決策不會有終點,每次的決策,都是為了推進下次的預期結果。

UI 的決策 — 持續產出 Wireframe,團隊溝通的最佳場景

如何開始 UI 的執行,我們先選擇了「策展」的關鍵字。

  • 策展,應該要有哪些資訊架構?
  • 如何定義 NFT 策展?
  • 藝術類的線上策展都長什麼樣子?

上述是我們針對 Wireframe,一邊思考一邊溝通的初期框架。

重點並非要獲得那些很精確地規格,是透過 Wireframe 形成一個共同場景,團隊都可看到的場景,讓團隊口頭溝通與資訊想法可以提前落地。討論往返之間便會逐漸形成共識決策,搭建出團隊討論的底層資料。

Wireframe / image made by 設計丸

善用視覺化,引導團隊進入你的設計想法內。

CI 的決策— 從上線時間回推定期提案,讓團隊所有人看見進度

所有目標均是透過選擇而產生,沒有完美的項目但我們擁有選擇權。提案則是一場從已知條件進入未知的創意過程

提案過程示意 / image made by 設計丸

前述有提到從主色找發想設定:

  • 好處,先鎖定發展方向,可讓時間規劃跑出來。
  • 壞處,有了條件也限縮設計路線,不太容易跳出框架。
  • UI 是顏色運用最多的骨架示範
  • CI 是從數位場景反推而生的識別

視覺框架:UI 落地主色,CI 設定脈絡

團隊腦力激盪過程示意 / image made by 設計丸

確認產品名稱前後,我們採取了不同的行動方式:

  • 確認前,我們從區塊鏈到 NFT 的關鍵字,預先收集各種 Logo 的資料。用來感知這個產業的氛圍以及進行分類。
  • 確認後,我們開始排入會議討論並且多次進行腦力風暴,更重要的是透過 Figma 線上協作可有效率地留存討論內容。經由關鍵字聯想、卡片分類、透過每個人不同的提案差異,最後與視覺一同提煉出更精確地關鍵字,用以輔助最終版的品牌定位。
提案過程示意 / image made by 設計丸

Logo 提案過程的關鍵,團隊協作是廣度,定期推進是深度。

( 到這邊為止,恭喜你,看完了兩大關卡。)

你很棒。。。。 / giphy.com

👽 謹記,我們共同完成了一段經驗!

老實說這段執行過程,團隊非常辛苦又扎實的經歷從 0 到 1 的設計落地,其中不僅涉及到初期 Logo 的提案到協作產品開發的 UI 初始框架。內容沒提到的還有很多,比如如何規劃線上策展視覺、線下活動的主視覺與相關迭代等。

以上分享兩大經驗關卡是著重於設計團隊面對未知的推進,與整理出當時我們背後的思維脈絡是如何演化。在此,也感謝你的耐心閱讀。

我們會持續嘗試將敏捷設計的行動落地成專家經驗。

Photo by The Coherent Team on Unsplash

最後,設計旅程的啟發。

🧲 「敏捷」是善用回應&協作,加速參與者回饋提案的方式。

疫情期間,當時的我們正從混合式工作模式進入全遠端工作,由於企業風格 對於遠端作業並不陌生,組織公告啟動遠端時,團隊工作的調整是非常迅速的。關鍵還是來自於組織自身的敏捷性,讓團隊遇到變化也能適時作出反應。也能讓我們的工作不受限場所,參與者與團隊都能善用工具與即時溝通,替任務創造出可執行的空間。

☞ 延伸閱讀 — 設計面對敏捷的心態:#1 今天開始,重新打造你的工作思維 | 設計 X 敏捷 = 敏捷設計 | 一篇文章讓設計師內觀自我

🧐 關於開發旅程裡,任何事件都是「線索」。

啟動項目時,產品團隊最頭痛的大概就是命名。

許多需求和討論都是依附著產品定位&命名延伸而來,背後影響著產品目標以及開發資源等考量。確認分工與資源後來自不同夥伴間獲得的資訊,都將成為設計的底層素材。不論是每一場會議、每一份文件至團隊互動中的每一段想法,經過紀錄後皆能成為產品或品牌脈絡的基礎線索。

☞ 延伸閱讀 — 設計師面對未知:#2 如何使用敏捷設計面對「未知」 | 探索自己的不知道

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

設計丸,提供設計顧問、專案執行、教育訓練等服務項目。
線上諮詢 → https://goolink.cc/designservice

想詢問文章內的任何問題,或有興趣的議題找不到人討論?
歡迎與我們交流 → design.foruuu@gmail.com

--

--

設計丸編輯室
設計丸物製

設計丸使用敏捷設計的方法&概念,製造匯集專家經驗與設計知識庫。