Tenten的作品又被再次收錄於國際設計書刊
Hello, I am Poppy —我是Tenten UX Team 的 UX/ UI Designer。過去曾在 ISOBAR 與 JWT 等大型 Agency 任職設計師，但最後不想自己的青春被浪費在無止盡的加班只為了做一個又一個僅為了消耗媒體預算並用完即丟的設計。最後決心加入Tenten UX Team 走上 UX/ UI 的這條偉大航道。
雖然剛接觸 UX 沒多久，但在Tenten這一年讓我深刻體驗到要實踐 UX 的話必須要在有 Startup Vibe 的團隊下一起合作透過策略制定/ 實驗/ 反覆驗證加上有超強的 UX/ Tech 團隊才能夠做出厲害的產品。這我想是目前台灣的 4A 在媒體主導的思維下都無法孵化出這樣的團隊架構與經驗。
目前我仍然是努力要做出偉大產品的設計小資女? 。大家對我過去經驗有興趣的話可以前往這個連結 ➞ 我是Tenten人：Happiness is when “input = output.”
IG: 這次我們很榮幸有兩個作品入選善本於今年 8 月發行的 “E-Commerce Branding” 這本書。設計人對善本出版的各類設計叢書一定不陌生，例：BranD 雜誌。
BranD 雜誌應該是不少設計系學生的重要精神糧食
而這本2017年8月發行的 E-commerce Branding 是少數收錄將品牌設計與電商集結歸納的設計書籍 Tenten: 品牌建置與電商案例 E-COMMERCE BRANDING — Publisher/ SendPoints ISBN/ 978–988–77573–3–7
以下文章比較像個人好書分享並參雜著一點在Tenten這一年於 UX/ UI 領域的學習心得。希望大家可以一起來支持好的設計書 🙂
設計人對「品牌設計」、「品牌識別」可能不陌生，直覺認知往往不外乎其標誌、廣告、和其相關的輸出物件如：名片、包裝、手冊，但隨著更多的商業活動從線下轉往線上，因此，品牌於電子商務上的 UI 設計與規範也必須像現實生活中的任何商業空間一樣，需要仔細考慮其視覺呈現以獲得業務成功。而網頁的設計佈局和產品攝影將決定消費者對產品的印象以及品牌形象。
我們可能都有過相同的情境：購物時，品牌實體店舖或商業空間的體驗都非常棒，但回到家想要在網路上搜尋該品牌，會發生找不到官網，或是品牌網站形象跟當初在購物時的感受完全連結不起來。
舉一個自己的購物體驗：
工業風店面，圖片來源：HONEST BEE湯瑪士肉舖，是我自己很喜歡的品牌，不僅有自己的品牌故事，產品本身性價比也很高。
產品、識別應用，圖片來源：HONEST BEE湯瑪仕肉舖源自1952年，2013年第二代將老牌翻新，視覺上將復古和工業風格結合得相當好，識別延伸在產品的應用上也有一定的精緻度。
湯瑪士肉鋪官網示意
反觀官網的識別和網站易用性與線下實體店面體驗和各種印刷媒體所呈現品牌形象，還有一段落差。
經歷過不少類似的反差體驗，以下幾點，更成為為什麼這本書值得閱讀和分享：
接下來會節錄一些有趣的內容分享。
印後時代 (post-print era) 的品牌 & 線上品牌案例
從概念發想到專案實現都有在書中分享，其中我覺值得分享的是，品牌在不同平臺或裝置上，會有不同對應的使用者體驗和視覺設計。
案例1：COLON
COLON，圖片出處：善本
COLON案例內容，圖片出處：善本### 設計方法
根據規劃和提案策略進行創作，如果對設計過於重視，往往會導致網站易用性的不足。 所以網頁設計師的價值：要想出一種平衡設計的新穎性和網站易用性的設計，並把客戶特點容納在設計之中。 然而，這個網站的概念和故事情節已經決定了，因此我們使用空間感、透視、和線框圖去做視覺設計。
桌機 VS 手機
在桌機和行動裝置之間，我們認為瀏覽的目的是不同的。 例如，在移動裝置上，它旨在以易於理解的方式傳達信息。 在桌機上，設計重點是傳達故事的概念以及產品的優點和價值。
案例2：SOLARIN
這是一個號稱提供未來技術的智能手機品牌，是由一家位於英國並有領先通信技術的SIRIN LABS開發設計。
案例內容，圖片出處：善本### 設計方法
電商網站 VS 官網
品牌網站專注於品牌本身; 且應該“滲透”所有可以代表品牌的地方，像是品牌DNA，歷史和品牌故事。 電子商務平台應該也有同樣的感覺和說故事的方式，焦點也要放在是服務和產品。 那麼主要的事情不僅僅是乾燥的事實，而是放大使用者體驗、應用性和產品的品牌溝通，並嘗試從平面體驗提升到所謂的產品2.0體驗（如：weber.com）。
這些網站是品牌的延伸，他們應該：
-
擁有最佳的UX/UI
-
將銷售與故事結合
-
賦予產品生命和說服力
-
使其個人化、個性化
-
如果有多個（技術）系統和平台，使其成為一個無縫(seamless)的體驗
-
設計指南
標準的電子商務網站設計於 UI 上場出現的元素
如上圖，電子商務網站的設計規範整理，除了將各個元素加以定義外，右側特別整理出新的UI版面配置的設計，透過頁碼可以找到相對應的案例。 雖然網頁設計很強調使用的習慣性和合理性，但在一塵不變的版面配置中，不僅提供設計師靈感來源，更讓設計師在為品牌打造新形象網站時有更多的參考範例。
案例：MY BIRKENSTOCK
圖為加拿大勃肯的線上商店首頁，可以看到上方強調搜尋功能的設計，目的是要讓網站的使用者經驗更個人化，以確保用戶以最大的可能性去了解品牌。
第一個收錄案例: 有機新創與品牌思維的結合 田田蔬果
這是我首次在Tenten主導整個電商專案從規劃到設計的專案。並於上線後 3 個月即獲得出版社肯定並收錄於書中。所以，以下想分享自己在專案上的心得和過程。
前期的規劃非常重要，從 Wireframe 到設計
線上的品牌形象重塑
如果在設計初期能夠有個完整的 Brand Guideline 再衍生開發 UI Guideline 能夠對網站整體的風格與用戶體驗的提升有多幫助
設計思考
視覺風格定調有其意義：為了吸引年輕族群、產生連結，下修消費者年齡層，傳遞健康飲食的觀念。
Tone & Manner
- 扁平化UI和幾何圖形色塊的運用
- 簡單的色彩配色:配色的選擇，不超過三色去強化品牌色彩
- 溫和自然的照片風格去構成品牌的視覺形象，以突出有機產品本身
在新的LOGO和識別系統確定後，將圓、圈、循環的概念帶入整個UI的設計中。（LOGO設計：Joe Chang）
一頁式結帳，在E-Commerce的流程上簡化
創新思維: 線下的應用與 CRM/ POS 的結合
為了能夠跟讓店頭與電商的庫存更能夠有更好的接軌，Tenten的開發團隊更自行打造一個專屬於電商的 Web POS 系統，讓田田能夠即時將電子商務資料庫和庫存管理結合，並自行開發電子發票系統的串接，使後台操作與出貨流程能夠更快速與便利。
蔬果箱設計，將圓的像延伸應用在包裝上### 第二個收錄案例: VANMOOF
Tenten與 Vanmoof 已經合作超過 4 個年頭，從初期 Vanmoof 只是一個位於 Amsterdam 的獨立腳踏車品牌，而這幾年透過行銷與數位策略的結合。他們在歐洲地區已成為成長最快的設計師腳踏車品牌，而其最新推出的電動腳踏車更被 The Verge 形容為腳踏車行業的 TESLA。
我們為這獨特的電動腳踏車規劃設計了一個預購頁面並與位於荷蘭的行銷團隊一起打造出類似 Kickstarter 平台般創新產品的說故事方式的活動頁面，並成功於不到一個月內創下預購超過百萬歐元的記錄，打破了傳統腳踏車行業的思維，這也是我們Tenten與 Vanmoof 獨特的 Digital DNA 並勇於挑戰傳統思維下一起獲得的巨大成功。
更多專案內容可以參考Tenten官網。
以上分享只是書裡的一小部分，所以這麼精彩不如快去買來看吧！ 謝謝你的閱讀，買書去 〉