Imported Layers

草山金工: 品牌 + 電商網站的 UI 設計流程

終於盼到草山金工上線了,這趟從三月開始的旅程說實在並不短,是近期內接觸到蠻有挑戰性且有趣的專案,因此想拿出來和大家聊聊。 進入正題,這次的分享主要會分為幾個部分:

  • 從需求到設計:專案背景、建立研究資料
  • 設計流程:多位設計師之間的合作模式、協作工具分享、Design System
  • 專案管理與合作:開發流程以及團隊中不同成員間的資源分配

從需求到設計:釐清需求,設計出讓使用者喜愛的產品

近年來台灣有許多文創品牌及個人工作室,但能在大眾心中能佔有一席之地的品牌其實並不多,草山金工從一間落腳於陽明山腳下的金工教室,一步一步靠著課程口碑的經營以及通路點的開拓,至今成為擁有將近十間的實體門市座落在台灣各地的金工品牌,使得現在在台灣只要談到金工工作室,第一個想到的就會是他們。

經營超過十年的草山金工一路走來,其實花了很多心力在品牌的建立,隨著業務的擴大,擁有一個整合的平台來管理訂單、購物及會員資料,不僅可以讓用戶獲得更好的體驗,也可以使同仁更輕鬆的管理訂單,因此在這次品牌成立滿 12 週年之際,他們決定請転転來做專屬於草山的電子商務網站。

左:草山金工十年前的官網 / 右:草山金工五年前的官網

在開始進行設計以前,我們與客戶初步定義這次的網站改版的三大目標:

  1. 形象 rebrand:目前還尚未有一個一致的品牌調性,希望透過網站的建置,再次統整並提升品牌形象
  2. 電子商務建立:將所有線下資料轉為線上管理,並將各平台間的功能整合在此官網處理
  3. 會員制度:建立會員資料,以供行銷運用

定義好目標後,我們習慣開始搜集大量的相關文字資料在 Confluence 上,從 Google Analytics、Market Research、Brand and Industry、Rival and Related、Mission and Goal、Strategy……等幾個大方向著手發想;圖片的相關資料則是建立在 Eagle 裡,把所有相關聯的資訊建立起來,這一步若有做好,你會很清楚手頭上會有哪些資源、素材可以使用,也對未來設計方向的收斂、提案以及回顧時會起很大的幫助。

左:透過 Eagle 共同搜集 Inspiration & Idea / 右:透過 Confluence 將 Research 筆記與團隊分享


設計流程:實現 Single Source of Truth 並建立 Design System

經過研究,我們發現草山金工處在一個特殊的品牌位置,介於工藝品牌與珠寶精品之間,太過強調手作感或是精品購物導向都不夠合適,所以接下來的設計我們決定保留文藝的氣質、搭配優秀的圖片佐以貼近人心的文字,品牌的傳遞跟網站的功能性這兩者之間要找到平衡點。

Atomic Design: A methodology for creating Design Systems

這次我們的設計師與工程師們導入原子設計理論(Atomic Design),期待建立一個共通的語彙,當設計有遵循 Atomic Design 做設計規劃時,工程師們便能減少更多資源在元件間的管理,細節也更有獲得實現的可能(原子設計理論的內容我在這篇就不再多做贅述,有興趣的人可以自己再去找資料來看,我也會將一些好文放在延伸閱讀裡)。

如果將你的網頁比擬作一支手錶的話,透過 Atomic Design 的理論做元件的分析,就好比是將你的手錶拆解為錶帶、錶面、齒輪、時針、分針……等等這個動作,設計師的靜態設計稿是由這些元件組裝而成的,而工程師的工作就是將這些元件串連組裝,並使網頁得以運作。

由於工程師接手做開發的時候,大概只會收到 Invision 的視覺稿以及功能需求說明,此時若是有一份 Design System,工程師就像是獲得了一個類似 IKEA 的組裝說明書,他們就可以依照這份說明書下去組裝出網頁,Atomic Design 讓設計師們跟工程師們的多人協作不再是難事,也讓整個網頁系統更完整,使用者及客戶都能獲得一致的使用者體驗。

  • Base:Color/Typography/Grid
  • Components:Atom/Molecule/Organism

Pro Tips: 各個 componenets 並不是靜態的,他們會有狀態(Dedault/Hover/Active/Focus/Disabled)、動態、Error messages… 等狀況發生,設計師們對於這些期待會在Confluence 跟工程師溝通,也由於我們已經將大多數的元件用 Atomic Design 的系統分類出來了,所以每個元件都有屬於自己的 Confluence 頁面,設計師們和工程師們就可以在這邊做細節的溝通。

在這次實作下來,我們發現大多數的元件基本上只需要用 Atom/Molecule/Organism 這幾項就可以分類出來了,工程團隊我們不需要定義到 Template/Page 這麽詳細,所以後來在 Confluence 的資料夾分類就只建立了前三個項目。


專案管理與合作:開發流程以及團隊中不同成員間的資源分配

前兩個部分分享了:

  • 設計師如何釐清需求,設計出讓使用者喜愛的產品 — 建立資料庫,視野盡可能放到最廣,再從中找到最合適的解決方案聚焦設計
  • 設計師之間如何合作,並更有效率的和團隊成員溝通 — 版本控管實現 Single Source of Truth,並建立 Design System

看起來依照這個流程,從客戶需求到工程師開發的階段似乎已經不會遇到什麼問題了呢!但人生就跟一盒巧克力一樣,你永遠不知道下一顆吃到的會是什麼口味,這一次還是發生了不少前期沒有評估到的事情,接下來我想分享一下團隊在這整個旅程中是如何面對這些難題。


A|課程、商品、婚戒傻傻分不清楚:設計出通用且直覺的 UI 以整合各式不同的資訊

草山金工提供的業務在前面已經有稍微介紹到:金工課程體驗(原先是透過 Niceday 預約課程)、首飾商品訂購(原先是透過 Pinkoi 訂購商品)、婚戒製作所(包含婚戒課程及婚戒客製商品)、工作室的各式合作計畫(原先是透過 Facebook 社群經營)……等內容,就功能面而言,要在同一個電子商務完成這樣多種的產品規格已經是個很大的挑戰;就使用者體驗的層面來看,我們將要設計的網站和使用者平常熟悉的購物網站將會不太相同,使用者勢必要再投入部分注意力來學習操作模式,若介面操作過於繁複導致使用者不知道如何購買的話,這將會是我們所不樂見的。

因此在設計時,我們投入很多心力在整合各頁面間的元件樣式(包含相關聯的加入購物車以及結帳頁面),每個頁面的 RWD 因著資訊量的不同,得要找到一個通用的 UI,讓使用者在操作過程中不會造成混淆並且可以快速找到重要的資訊。

資訊層級差異大且繁複:重要資訊優先,並運用動態作輔助

  • RWD — Side Cart 前往結帳按鈕 考慮到商品從購物車到結帳的流程能夠有最好的體驗,我們在手機版的設計,將「前往結帳」的 button fix 在介面最上方,如此一來使用者便可在瀏覽購物清單的同時,也能迅速前往結帳頁面。

  • RWD — Product Single Filter 手機版的 filter 應該要讓使用者能夠更輕鬆的做選擇,因此在設計時,我們決定將同層級的資料(篩選條件/排序方式)並列,使用者便能很快的選取到他們希望的篩選規則,「清除選項」及「套用」也會是個重要功能,因此這兩個 button 擺放的位置及方式也需要謹慎規劃。

總結

網站的風格以及功能的兼具實在是一個考驗。要打造出像草山這樣需要品牌策略與電商結合的品牌電商,背後有著無數的転転與草山精工團隊在背後有著共同目標一起合作才能完成這樣的產品。