李長榮化學工業網站2.0原型製作

設計思考網站開發專案

最後做了什麼: 辦4場設計思考工作坊，寫1份完整的網站需求規格書和設計提案

籌畫: Raymond Chang  創意總監: Willy Lin
專案成員: Owen Chen, 曾怡舜、趙卉屏、賴育婷、鍾岳容等
時間: 2011/06 - 2011/08

李長榮化學工業(1704)是台灣前幾大的化工廠，也是台大最早「創意設計」課程的主要贊助廠商，協助出錢出力邀請美國史丹佛大學設計學院(d.school)來台大教設計思考(design thinking)，後來間接促成了不一樣思考社(NTU design thinking club)的誕生。

在贊助很多很多次工作坊之後(包括台灣大學、清華大學和d.taiwan在政治大學辦的6場工作坊)，李長榮化工希望能真正運用設計思考來做些公司內的創新改變。2011年6月，在高層內部討論之後，決定用網站來試試看，當作第一個改造標的物。

過去，李長榮化工的網站較為生硬，風格與其他一般台灣的石化公司網頁沒有差太多。公司高層希望透過設計思考這套研究流程重新設計它，並將這個案子委託給當時的我。

圖: 李長榮集團首頁截圖

當時的挑戰是：怎麼樣透過這種新式開發流整，精確掌握網站設計的「客戶需求」，包括：

• 內部需求：跨部門協調成本高，無既有專案團隊人力來完成，但是可以結合教育訓練組暫時的專案團隊
• 外部需求：集團網站部門和子公司眾多，如何在多元意見和回饋中找出統一的視覺設計

在一周的研究之後，我們組了一個由設計師、開發者和課程籌劃講師組成的專案團隊。並把客戶端提供的近20位來自各單位的人力，依事業部、產品類別和子公司重要程度分為7組，分別給予不同的設計挑戰。在Hendrick的建議下，整個開發流程參考d.school的課程設計，把將專案拆成四期：

圖: project flow 手繪圖，拆成1+4期 （專案籌備與上圖四個）

0 專案籌備 專案開始前的準備

要做這樣子的設計思考專案開發，先要專屬的工作空間。在Stanford和Potsdam兩地的d.school，他們都投入很多資金打造特製的創意辦公室，因為一個常設的創新空間能激勵創意，產生良好的互動，並且讓專案進度可以一直累積下去。

那如果我們要執行這樣的專案，有專屬的創意空間變的超級重要。但是，客戶這邊的辦公室相當有限，若要只為這專案花錢裝潢嫌太麻煩，若要省錢只剩下地下室的廢棄空間。在這樣的限制條件下，我們該怎麼變出適合的專案空間呢？

在一陣子密集討論後，我們立刻決定自己動手改造地下室那個廢棄空間，用最精省的方法讓專案能做下去。為了快速學一些必備的基本室內設計知識，我們參考了Stanford d.school出版的<Make Space>這本書，學習創意空間必備的竅門：如桌椅務必不讓人久坐，創造可四處移動的白板、置物架等物件，和高聳的天花板等設計原則。接下來，我們去IKEA一毛不拔地學裝潢布置和色彩配置，卻到廈門街採採買便宜二手家具。施工階段部分外包，但省掉油漆的工錢，還請出會簡單木工的張老爸從桃園上來幫忙布置省工資（老爸謝謝你）。最後，我們成功地把裝潢成本控制在5萬以下！客戶和專案團隊都非常高興。

圖: 施工前的地下室，三年前還是書局，後來一直荒廢

圖: 施工後的專案空間-以紅白主題色調，

搭配IKEA和廈門街的便宜家具，打造創意空間

1教育訓練-設計思考工作坊

接下來，要讓每一個參與的客戶端員工都能學會設計思考。複製Stanford d.school的教學模式，我們舉辦1天的設計思考工作坊，主題刻意採用和網站無關的「重新設計人才招募體驗」，找來一些大學生當練習的目標用戶，讓客戶團隊體會這套產品開發流程。

圖: 設計思考工作坊的趣味原型創作－AKB49 故事版

2實戰工作坊-手繪網站原型創作

訓練之後，接下來要讓專案團隊玩真的。我們和李長榮化工的籌辦團隊策劃了一系列的深度用戶訪談。在2天的密集工作坊內，我們訪談董事長等高層，瞭解經營層對於公司形象，哲學和理念的規劃。我們外出訪談李長榮化工的上下游客戶，直接到他們的辦公室，甚至打開舊版首頁，直接讓客戶點擊，回饋最真實的心聲。比如說哪裡難用，哪些功能不需要，為什麼希望有某些功能，反應出怎麼樣的需求。

帶著滿滿記錄回來的專案小組，要馬上分析萃取用戶需求，並且在隔天馬上用手繪方式來創作自己負責的專區網頁。這個過程對於工程師來說非常痛苦，雖然有安排設計從旁輔助，他們上一次真正拿筆畫畫可能是10年以前的事，今天卻要拿彩色蠟筆自己把公司網站畫出來。這個看似無理取鬧的過程，卻是我們刻意安排的專案規劃之一。

圖: 網站首頁第一版原型，手繪的第一版

3實戰工作坊之二，提高解析度之剪貼原型

兩週之後，專案團隊再為李長榮化工舉辦『測試開發工作坊』。專案團隊帶著上次做出來的手繪網頁示意圖，直接和內部，外部的目標用護測試，搜集回饋後回來分享，並且用一個下午的時間來創作第二版原型。和上次不同的地方在於，這次我們準備了很多的報章雜誌，方便大家直接找出適合的圖片剪貼，一來激發團隊靈感，二來讓提升原型的解析度(resolution)，讓原型看起來更接近真實的網站。

圖: 成堆雜誌和報紙堆，讓專案團隊協助客戶製作網站原型

圖: 網站首頁第二版原型，色紙+雜誌剪貼後的第二版

4測試後beta版製作

最後階段，我們謝謝李長榮化工20個專案團隊成員的付出和努力。接下來專案團隊把棒子扛回自己身上：我們把這段時間7組不同主題的網頁回饋進行彙整和分析。打開Photoshop和Illustrator，把專案團隊的剪貼原型，變成真正的設計提案。最後，這份資料未來會交接給專業的網站設計公司，把這些經過2個月設計思考專案的成果真正變成網站首頁

圖: 第三版原型，設計師將BETA版在Photoshop中開發完成，作為後來的設計提案

開發哲學-低成本開發，敏捷開發，快速獲得用戶回饋

前面有提到，我們故意讓不善美工的工程師拿起畫筆和剪刀，自己動手做剪貼做網頁。為什麼？根據(Frederick 2007; Buxton2007)的實證研究指出，在新產品開發專案的早期，採用粗糙的原型如手繪插圖，拼裝樂高能產生典範性(paradigmatic change)的想法轉移，讓團隊更有創意，更不被現實考量所拘束。另一個對照組使用精密的原型如CAD插圖，精緻建築模型，只會讓團隊聚焦在細部修正和想法實際化，讓討論越來越聚焦在可行性上。因此，應用這個原則，在專案的早期，我們要讓團隊用粗糙的手繪插圖來激盪創意。經過慢慢修正，測試與搜集回饋後，在用更精細的原型制作方法來創作，把細節做的更美更好。

一般的設計開發流程並沒有前段這個『創意發想』的步驟，通常設計師和開發者通常希望把產品一次到位，做到最好後上市，這樣的方法本身沒有錯，卻有個很大的風險：若完成產品不符合需求，客戶通常會要求一改再改，對於設計師和客戶兩端都費時費力。用設計思考這種開發方法能有效彌補這個缺點 - 降低原型解析度，不需要一次到位，透過多次溝通降低失敗風險，並增加瞭解顧客需求的機會

圖：fail early and often 

這樣子的開發方法，其實國外早有大公司嘗試過，知名的投資機構Fidelity過去曾和Stanford d.school 用設計思考的方法改造網站首頁，讓整個網站更符合用戶需求，這篇經歷還被收錄在哈佛商業評論blog上。

美國富達投顧首頁 https://www.fidelity.com/

目前，這份完成的李長榮化工網站提案，仍在請設計公司開發建置中。

更多照片

專案團隊在衣架、木版搭成的移動式白板做腦力激盪

專案空間一角，利用過去的舊書架擺美工材料

 接近完工的專案空間: 

有廈門街撿回來的二手嘴唇沙發，只要5000元

用麻布袋噴漆製作的設計海報，提醒大家要以人為本

參考文獻

Make Space

Buxton, Bill. (2007). Sketching User Experiences: Getting the Design Right and the Right Design.

Morgan Kaufmann.

Frederick, Matthew(2007), 101 Things I Learned in Architecture School, MIT Press Cambridge MA