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. 整體的設計必須要為留下未來擴充空間及重複使用的可能性,以減少將來開發上的負擔。