Project Details

Tools 

Sketch, Illustrator, InVision, After Effects

Time  

Dec. 2016

Role

UX/UI Website Designer

​波咔網站改版

波咔Pokaa Café&Bistro 是一家位於新竹的義法料理餐廳,其營業團隊在開業初期架設了網站。此網站包含餐廳的基本介紹、訂位資訊與最新動態,但由於架構不明確、資訊繁多且介面複雜,讓消費者無法明確快速地找到所需資訊。

 

概要

我在餐廳營運時擔任行銷管理,後期同時開始負責網站的主要維護。當我轉換為消費者的觀點去瀏覽網站時,可以明確發現網站的系統介面不友善、資訊繁雜。我知道一個良好的使用者介面是直覺性的,需要讓消費者不需要過多思考便迅速獲得資訊,然而這樣的設計背後其實需要多方考量,並不容易達到。當時我已對使用者設計有濃厚的興趣,於是以自己的認知試著幫網站改版,在設計過程中,我了解到實際會遇到的困難,因而促使我至帕森斯設計學院進修,學習互動設計。

 

在設計學院畢業後,我再度嘗試改版此網站。我的Design question很簡單:該如何改善Pokaa Cafe&Bistro網站的可用性,幫助消費者更輕鬆在餐廳網站上找到相關資訊?

該如何改善Pokaa Cafe&Bistro網站的可用性,幫助消費者更輕鬆在餐廳網站上找到相關資訊?

​目標

改善Pokaa Cafe&Bistro網站的可用性,幫助消費者更輕鬆在網站上,找到餐廳的相關資訊

​目前網站問題

1.

Redundant

Information

2.

Poor

Organization

3.

Hard-to-use

Navigation

​網站架構分析

​原本的網站架構有許多重複的資訊,如下圖星星的標注。

使用者訪問結果

於是我把許多顧客的問題統整,分為三大類:重複的資訊、網站架構不明確、與難以理解的網站導引。我同時做了市場調查,了解顧客使用網站時最常用的功能、最不喜歡的地方等問題,並參考了網站後台的點擊率。結果發現,首頁、菜單與地址的頁面最常被造訪(如下圖。最後,我統整出一系列的痛點與使用者需求。

 

顧客的痛點包括:

(1)難以找到訂位資訊

(2)網站圖片幻燈片連續更換讓人分心

(3)首頁上過多資訊讓人眼花撩亂。

 

而使用者需求則包含:

(1)明確的訂位按鈕或聯絡資訊

(2)顯眼的菜單頁面與資訊的統整,好讓資訊可以迅速被顧客搜尋到。

​用戶的痛點與需求
​更新後的網站架構圖

​製作原型Prototyping

Wireframes
Mainpage
Menu Page
Location & Hours Page
About Page
News & Events Page
Hi-fi Prototype

改版後波咔的網站首頁
我把顧客最常用的功能:菜單、地址與營業時間、餐廳故事、最新消息與訂位功能放置網站上的Top Bar,讓顧客可以清楚的看到。

菜單頁面
各種菜單都明確的列出,好讓顧客可以點選想要查詢的菜單。

最新消息頁面
有任何的新資訊,都會更新在各頁面上,消費者有都可以點進各個資訊,閱讀更詳細的資訊。

地址與營業時間頁面
把確切營業時間與餐廳地址提供在這個頁面上,並也有訂位的按鈕,鼓勵大家路過可先行定位。

​網站介面流程影片Final Video Prototype
 
 
 
 
 
Let's Connect!
I'm happy to chat about anything over coffee or tea!
Find me on LinkedIn, Dribbble, or shoot me an email at lynnn43@gmail.com!