Fast Company 2020 最佳使用者體驗獎 - 好設計就是好生意

Hi Elaine
AAPD — As A Product Designer
13 min readNov 3, 2020
Good design is good business.” — Thomas J. Watson
2020 Fast Company 創新設計獎
2020 Fast Company 創新設計獎 — 最佳使用者體驗

Fast Company 每年舉辦的創新設計獎 (Innovation By Design Awards),主要在表彰設計、商業與創新三個領域交集的創意作品,有超過 20 個項目,包含產品、時尚、居家、金融、工作場所等多元面向;和 iF, Red Dot, G-mark 這些耳熟能詳的設計獎不同,Fast Company 身為美國著名的商業媒體品牌,在評選設計作品時,除了功能性、原創性、美感、用戶洞察之外,也著重作品的「商業影響性」,白話一點,就是設計的好還要能賺大錢,這個概念在了解這些產品和服務的時候相當重要,請默記下來。

接下來,這篇文章會介紹今年最佳使用者體驗獎 The best user experiences of 2020 得獎作品和其中幾項入圍作品的基本服務,並從商業角度分析這些創新案例。

得獎 - Figma / Figma

Figma CEO Dylan Field, Evan Wallace
Figma CEO Dylan Field (右) 和聯合創始人 Evan Wallace (左)

23歲青年取得獎學金輟學創業,開發與 Adobe 抗衡的設計軟體

Figma 在 2012 年創立於舊金山,由 Dylan Field 和 Evan Wallace 創立。Dylan 是 Peter Thiel (PayPal創辦人之一的矽谷傳奇創業家、川普的科技顧問) 創立的獎學金得主之一,Dylan 和 Evan 也分別在 2015 年及 2017 年入選為富比世「消費性科技領域 30 歲以下傑出青年」。

市面上的介面設計工具很多,包括 Sketch、Adobe XD、Axure、InVision等,這些工具功能豐富也各有長處,例如 Sketch 適合製作線框圖和 UI 介面設計、Adobe 結合既有優勢讓使用者能直接導入 PS、AI、Sketch 作為原型素材。

然而,Dylan 在 Flipboard 和 LinkedIn 實習的時候,察覺到設計師最大的痛點並非在「設計」上,而是和其他團隊的溝通。過去讓產品經理、行銷人員或工程師參與設計過程是非常困難的,非設計圖隊想查看設計文件,設計師就需要把手邊的檔案整理好寄出,其他人的電腦上也要安裝同樣的工具軟體,而這些軟體對不常操作的使用者來說成本高、不易學習,針對介面設計的回饋也要透過 Email 來紀錄溝通,更糟的是,很難控管設計文件讓大家都取得最新版本;因此,大部分非設計師能參與設計流程的程度很低

Dylan 以「在 Google Docs 共同編輯文件」為發想,希望打造一個線上共同設計的服務;這個看似過於簡單的概念,在設計工具上卻是極其創新的解決方案,Figma 用三年的時間打造出這個工具,同時間也透過種子輪及 A 輪融資取得 1,787 萬美元的資金,投資方包含 Greylock Partners 、Kleiner Perkins 等知名風投。

Figma Collaboration
Figma 提供團隊在瀏覽器上進行多人協作設計的服務

以「協作」為中心,讓設計工具不只是設計師的工具

Figma 在 2016 年正式上線,是一款雲端設計協作工具。

相較於不重視「協作」的 Adobe,Figma 開放多人即時在線進行設計、分享回饋、共享資源的服務,而文件即時儲存到雲端則讓所有人同步;不用另外下載與更新軟體,產品經理可以隨時掌握設計進度,工程師可以輕鬆將設計轉為程式碼,讓非設計人員參與設計流程的程度大幅提高,也讓設計師在產品與商業決策中取得話語權;Figma 相信未來「產品將以設計為主導,而不是以程式碼為主導」。

為彰顯 Figma不僅僅是「設計師的設計工具」,而是「一個團隊的設計工具」,Figma 提供「觀察」功能讓使用者能透過其他團隊夥伴的視角瀏覽畫面、對齊溝通問題,提高遠端協作順暢度,還有「註釋」功能協助團隊保留各參與夥伴針對同一畫面的回饋與討論過程;透過把設計師和非設計師帶入相同的工作流程內,提升跨團隊的工作效能,越多人參與,它對組織的價值就越大,幫助 Figma 在組織中被廣泛採用。

其餘像是安裝簡單又穩定的插件 (plugin)、容易查看及比較的版本控管、豐富的社群資源等,加上 WebGL、WebAssembly 等新興 Web 技術出現,讓整體服務在瀏覽器上運作的速度及穩定性大幅提高,都為 Fimga 創造出更多優勢。

即使設計軟體百家爭鳴,但 Figma 依舊在短短幾年內異軍突起;根據 UX Tools 調查,Figma 在 2017 年的Wireframe項目排名第六、在 UI Design 項目排名第五,在 2018 年在兩個項目皆大幅躍進到第二名,並榮登 2019 年最令人期待的設計工具;許多新創公司和大型科技業者也紛紛從其他設計工具遷徙到 Figma,像是Airbnb、Microsoft、Slack、Uber、Volvo等,影響力不容小覷。

好設計就是好生意

2020 unicorn FIGMA
Figma 衝出疫市,估值上看 20 億美元

Figma 介面操作直覺、使用者體驗絕佳,加上在 Figma 之前沒有其他設計工具可以協助設計師省去組織內外部的溝通成本,使得它的商業價值非、常、高!上線不到四年已經是美國獨角獸代表,在 2019 年被富比世列為「下一個十億美元的新創企業」之一;今年上半年完成 5,000 萬美元的 D 輪融資,Figma 估值已經上看 20 億美元。

今年 COVID-19 肆虐之下,Fimga 反而成為乘著疫情之風起飛的獨角獸。因為能同時在螢幕上畫圖並加以說明的使用方式,適合作為遠端溝通工具,意外成為疫情之下現成的「虛擬白板和圖表」,廣受全球 Work From Home 上班族們的喜愛,原本就是設計界的當紅炸子雞,近來使用者更以前所未有的速度增加,未來發展值得大家關注!

入圍 - Adobe Color 新增色彩無障礙工具 / Adobe

Adobe Color
Adobe Color 色輪、調色盤產生器

不懂色彩理論也能找到顏色靈感

在實體文宣、簡報、程式介面或各種與視覺有關的服務中,除了資訊可以流暢的呈現以外,要透過版面和元素來營造特定風格、傳達理念,正確而舒適的色彩都漸趨關鍵。

Adobe Color 是 Adobe 推出的線上色彩輔助工具,功能強大,以多種色彩調和原則製作色彩組合,例如常用的鄰近色、互補色,提供色輪、照片、色碼等資訊;除了自行調配顏色,也能上傳圖片,透過網站擷取圖片中的顏色,再根據需求產生相對應的顏色組合。

另外,Adobe Color 也建立屬於設計師的配色社群,使用者可以在「探索」功能輸入關鍵字或主題做條件檢索,參考其他設計者製作的配色、找尋靈感,更可以直接下載匯入 Adobe 系列的軟體使用;例如要設計一個沙拉的網站,輸入「沙拉」或「salad」,就會出現很多其他使用者分享的沙拉配色。

Adobe Color: Bringing Accessibility Factors Into Color Creation
Adobe Color 色盲友善工具:調整潛在顏色衝突

新增色盲友好工具,協助設計師打造色彩無障礙產品

有些人天生具有較強的色彩敏感度,也有些人透過後天訓練強化色彩辨識能力,然而大多數的人沒有這種天賦,全球甚至有約 8% 的人口受到色盲所影響。色盲族群依照不同類型,對於色彩辨認有不同程度的障礙,這也是視覺正常的設計師無法親身體會的問題,因此在設計網頁、產品時經常需要反覆試驗、程序繁複

設計色彩工具 Adobe Color 今年中新增了「色盲友好」工具,協助設計師在早期選色階段就能判斷哪些顏色組合容易造成色彩識別上的困難,提高工作效率。

協助工具能檢測會使色盲的人感到困惑的潛在顏色衝突,設計師可以依照色輪上的指引,直接在網頁上使用滑桿編輯顏色,輕鬆避免做出對色盲族群不夠友善的色票組合;另外,對於色盲的人,某些色相和陰影組合會讓顏色辨別變得困難,Adobe Color 也為三種類型的色盲人士 (綠色盲、紅色盲、藍色盲) 提供無障礙色彩主題,這些主題不會使色盲的使用者看到和普通使用者相同的顏色,而是考慮「如果原始設計需要每位用戶看到五種不同的顏色,則必須確保任何人看到這五種顏色都不相同」。

強化非主要產品的優勢,商業價值有限

Adobe 的使命是將科技應用在創意當中,讓設計工作者可以更簡單地將腦中的想法實踐出來,Adobe 軟體也一直被設計界所重用。Adobe Color 新增色盲友好工具,能協助設計師同理色盲族群,解決特定使用者的體驗惡夢,是相當實用的功能;然而,我認為 Adobe Color 並不是主要產品項目,如果設計軟體是 Adobe 的軍火庫,這個功能就像 S 腰帶上面的小裝備升級,商業價值不容易被彰顯,加上通用設計已經不是新議題,分析這個案例的時候,反而會有「原來 Adobe 之前沒有這個功能啊!」的想法。

入圍 - Google 地圖實景導航 (Live View) 功能 / Google

Google Map
有史以來最重要的應用程式之一: Google Map

Google 地圖,顛覆瀏覽世界的方式

Keyhole 是一家 2001 年在美國加州成立的商用衛星圖像公司,從事數值地圖測繪等服務,創立後很快就燒光公司資金,直到 2003 年 CNN 在報導美軍攻打伊拉克時使用這項地圖技術輔助說明,使它聲名遠播、走出破產邊緣;到了 2004 年,它被另一家成立只有 5 年的公司收購,那家公司就是 Google!

Google 在取得 Keyhole 的關鍵技術及併購另外兩家公司後,在 2005 年正式推出 Google Map!上線後逐漸完善的功能、完整度極高的地圖與相關資訊,顛覆使用者定位、導航、規劃旅程的體驗,更讓不懂圖資技術的客戶,也能使用地圖解決方案,目前已有超過十億人透過 Google Map 來探索世界。

Google Map 持續根據使用者的意見回饋推出更多的介面和服務。

2007 年推出最受歡迎也最受爭議的街景功能,同年, iPhone問世,這是 Google Map 首次提供服務的智慧型手機,很快的這個產品就在網頁和手機端站穩腳步;另外 Google Map 推出靠群眾力量繪製地圖的工具 Map Maker,讓沒有圖資商、缺乏圖資的地區開始繪製世界地圖資料。另一方面,企業版地圖則成為最大的地圖新創孵化器,許多創新業者的商業模式都仰賴它的技術,像是叫車服務 Uber 及風靡全球的遊戲 Pokémon GO 等。

在商業上,Google Map 是個很神奇的存在。

想想看,當你今天到全世界多數國家的時候,你都能知道自己位在地球的哪個角落,你可以順利抵達今晚入住的旅館,你也可以找到某個區域裡評分最高的餐廳,隨便什麼地方都能找到,這個信心從哪裡來的?Google 打造 Google Map 這項卓越的產品,並將它「免費」送給所有人;推薦大家閱讀 Google地圖革命 這一本書,看看 Google Map 崛起的精采故事和非傳統的產品思維。

「在使用者的快樂和獲利之間,應該選擇前者」- Google

Google Map Live View
Google Map Live View 實景導航

Google Map 今年滿15 歲,仍舊不斷突破極限,實景導航 (Live View) 就是近期代表作之一。

地圖在過去幾千年的形式都非常類似,即便近幾十年來,地圖從實體移轉到數位介面上已是重大突破,使用者在操作 Google Map 還是容易遇到許多常見問題,像是開啓地圖也不知道要找的是哪條路,或是從捷運站、火車站出來就迷失方向、不知道指南針指的是哪邊,甚至是地圖上的小藍點定位不精準,導致使用者在目的地附近繞圈圈等;為了進一步強化導航、指引方向、尋路的能力,Google Map 利用 AR 技術結合街景資訊,打造全新實景導航 (Live View) 功能。

只要使用者選擇「步行」進行導航、點選「實景導航」後,手機會切換到當下鏡頭所拍攝的即時影像,在螢幕上呈顯結合「實體街景」與「虛擬指引元素」的畫面,而不是過去預拍的街景;透過虛實數據的比對,提供更精確的使用者定位,而明顯的 AR 箭頭引領方向,讓使用者更快速、更有信心的前往目的地,不用再管地圖標示的是哪一條路、要在哪個路口左轉還是右轉!

Google Map Live View Brainstorming
Google Map Live View: Brainstorming, Prototyping and Testing

值得一提的是,實景導航服務一開始並不是想打造成現在的形式

Google 設計實景導航的影片中,可以看到產品設計初期開發團隊展現很多創意提案,包含用虛擬動物帶領使用者、用 3D 模型代替街景等;其中較具體的是路人拿起手機後 AR 指引貫穿整個導航旅程的情境,他們在街景的道路上畫出一條 AR 虛擬路線,讓使用者都可以跟隨這條線前進;然而,在早期測試時他們就發現這是一個非常糟糕的想法。

開發團隊希望打造具象化又引人注目的指引元素,同時又不希望過於分散使用者的注意力,造成移動時的安全疑慮;因此,當開發團隊發現使用者會完完全全地走在虛擬路線上時,他們捨棄了在道路上標示路線的指引方式,以簡單明顯的虛擬箭頭代替,將服務調整為「給出方向」而不是「給出路線」,讓使用者找路時也保有在實體場域自由移動、探索四周的體驗。

Google Map 清楚使用者應該在非常短的時間內進行 AR 體驗,在城市中如果找到下一步的前進方向,就該放下手機、繼續移動。因此,實景導航功能不能邊走邊使用,每隔幾秒後就會自動關閉變回一般平面導航模式,畫面也會不時顯示「為了你的安全起見,請不要邊走邊看手機」的提醒文字。

這段開發過程展現 Google Map 從協助使用者前往目的地,到幫助使用者在實體場域自由移動與探索新地點的產品目標轉變

世界上最可怕的不是你不努力,而是比你厲害的人比你還努力

Google Design Sprint
Design Sprint: 繞過開發階段,透過Prototype直接測試想法並取得回饋

實景導航是所有入圍案例中我最喜歡的服務!

原因是 Google 一直以超快的步調在推進各項產品的創新,開發團隊願意大膽假設、快速進行實際驗證、產生回饋、再不斷的修正錯誤 (Google 稱之為設計衝刺 Design Sprint,透過這個方法確認使用者真正的問題,而不是想像使用者的問題);這個案例體現了在這間企業裡沒有不能變動的計畫,只要是為多數使用者解決問題的產品就會是好產品

從商業角度來看,Google 在既有強大的圖資技術和街景資料之下,結合新科技的應用,更加鞏固主要產品的優勢,這個創新項目讓 Google 已經無人能敵的軍火庫又再度升級;除了 Google,誰還有能力設計出這個服務呢?

這篇的分享就到這邊結束,因為篇幅的關係,剩下幾項入圍服務就留待下集文章介紹囉!

如果喜歡這篇文章,請用力拍拍手 👏
如果想閱讀更多 UIUX 實際案例分享,歡迎 Follow Hi Elaine!
也歡迎你在留言區提出你的想法,跟我聊聊天!
https://medium.com/as-a-product-designer

--

--

Hi Elaine
AAPD — As A Product Designer

熱愛體驗與分析各種數位產品,在傳統金融業觀察、踩線、改變 | Email: yijuwu1992@gmail.com