Have a question? Ask away!

Yes!, I'd like to enquire about

.

My name is . You can contact me at and email me at .

Robert Parker Wine Advocate

2016年新加坡米其林指南

將紙本米其林指南數位化,打造一致的體驗

English  |  正體中文

我們如何著手此專案

我們與來自Robert Parker Wine Advocate的客戶緊密合作,為新加坡米其林網站全端打造方便後台內容管理、適合消費者行動裝置瀏覽的響應式網站。

專案目標

  • 將紙本米其林指南轉為數位化方式呈現
  • 讓使用者可根據偏好建立個人化的內容
  • 確保內容管理上具有彈性及未來擴充性

工作範疇

  • 設計研究、使用者流程(user flow)、適合消費者行動裝置瀏覽的響應式網頁
  • 將米其林指南內容轉化為可適應數位格式、能重複使用的模板
  • 設計可對應到響應式網頁後台的內容管理、後台的工作流程(work flow)與文章編輯模板

專案參與者

  • 產品負責人(CTO, CFO, UX團隊主管)
  • 內容編輯
  • UX 設計師、前端工程師
  • 後端工程師、資訊架構工程師

我們採取哪些具體的行動

設計研究及探索

由於產品上線時間緊迫進而壓縮到工作時程,於是我們專注於設計研究及探索上,以加快設計流程。

在共創工作坊( co-creation workshops)中,我們發想時用情緒板(Mood board)及繪製草稿的方式和產品負責人及內容編輯溝通。

與產品負責人的共創工作坊

在我們與產品負責人、內容編輯、設計師共同討論出內容及參與策略後,我們確立可同時滿足商業目的及技術可行性的工作目標。 團隊成員達成共識並確認設計方向,及啟動設計衝刺(Design Sprints)。

設計衝刺

我們採用設計衝刺,其中總共有8個不同的衝刺,包含主要的頁面。這些頁面是整個網站的核心,且開發時需要花最多心力。

我們的設計衝刺通常包含使用者流程、根據使用者流程繪製畫面草稿、將草稿轉化為視覺稿(mock-up)。隨著設計和工程開發同時進行,我們確保設計會領先開發大約1~2個衝刺循環,包含回頭檢視設計成果、收集使用者回饋。

專案的產出成果

我們設計出適合消費者行動裝置瀏覽的響應式網站,其中包含數位化後的2016年米其林指南,同時我們也為內容管理者設計後台管理系統。

專案產出包括:
完成行動裝置瀏覽的響應式網站、後台管理系統、可互動的線框圖(wireframe)、網頁檔案(HTML, CSS, Javascript⋯⋯等)

具有搜尋橫幅(search banner)的首頁

首頁的設計著重在搜尋橫幅設計,目標是幫助使用者方便的找到符合自身需求、喜好的米其林星級餐廳。

餐廳列表

卡片式餐廳列表以及一致的資訊結構設計,讓整體頁面除能以乾淨簡潔的方式呈現並提升易讀性之外,也讓使用者能在視窗中輕易的瀏覽更多資訊。

文章模板

我們建立的3種不同的模板:文章、資訊圖表(infographics)、社評,讓內容編輯能夠創作出具有固定結構的內容。

模組化的內容區塊

除在不同模板中提供各自的內容模組,我們也讓內容編輯能透過彈性地增加、移動、移除內容模組來創作出想要的排版方式。

我們從中學到什麼

  1. 產品負責人、內容編輯、UX設計師與工程師之間需要有良好的溝通,才能創造出高品質的工作成果。
  2. 當前端工程師與設計師面對面一起工作時,能夠快速的發現並解決大部分的問題。我們發現,整體而言面對面合作會比起遠距協作更有效率。
  3. 整體的設計必須要為留下未來擴充空間及重複使用的可能性,以減少將來開發上的負擔。