top of page

Belize City Tour

跟著我們的腳步一起走訪Belize City舊城區,見證殖民時期的輝煌

背景

​貝里斯市舊城區翻新計畫,需要提升景點曝光度及提升旅遊品質。

icon_icdf.png
HOC.png

  國合會與貝國政府合作推動「貝里斯文化之家與周邊擴建計畫」,推動社區發展、城市觀光,計畫目標為改善都會區歷史建物保存相關法令、完成舊城區指標性歷史建物之整建及公共空間,為了提升觀光旅遊品質,並提升其曝光度,故將開發觀光導覽的app,讓更多遊客能看到貝里斯市最真實、最吸引的人一面。

hocproject

角色

負責應用程式整體視覺介面及體驗的設計。

步驟方法

使用工具

​優先級矩陣

​Persona

利害關係人訪談

Prototype

Wireframe

易用性測試

Affinity Designer

Marvel app

Adobe Illustrator

Adobe After effects

Zeplin

Adobe XD

需求分析

為了解app需求,進行與對口單位的討論並實地考察了解使用情境。

 ​ 專案初期,由於國合會的對口單位在台灣,需求面談在線上進行。為了瞭解景點翻新計畫內容,僅從對方所提供的資料中了解是不夠的,我們前往Belize City實地考察,走訪所有景點,進一步了解旅遊情境、景點背景與特色及路線規劃等。

persona.jpg
competitveanalysis

  計畫目標為提高計畫曝光度,讓人更願意走訪舊城區翻新景點,主要客群將會是到貝里斯市旅遊之國內外遊客。接著persona創建,分析可能需求及行為,之後將所有想法點子整理列出先進行重要性/可行性的分析,挑出能在近期達成的功能。

​設計過程

  需求分析之後,進行App原型設計、元素製作,並利用工具將初期的低擬原型真到後來的高擬真各階段狀況讓客戶能隨時了解。

  最初根據需求分析製作低擬真手繪原型,利用工具分享讓客戶操作,了解是否符合計畫的構想。

marvel_已編輯.png

​  「貝里斯文化之家與周邊擴建計畫」所整建、翻新的景點多為19世紀英國殖民時期所留下之古蹟建築,所以配色選擇較陳舊、古地圖的風格。另外計畫中也希望未來能與先前所開發的Bus Times Belize整合,故沿用了該app部分用色。

#FFFFFF
#9B756B
#F9E3BE
#D89F5A
#C3C39D
#8C6239
#6D6D6D
#493628

   App Icon設計概念,用貝里斯市三個最具代表的地標Baron Bliss燈塔、文化之家以及St.John's天主堂為中心,外框以定位座標icon將其包覆,箭號串接外框各點,以此呈現我們將帶領使用者走遍舊城的概念。

AppIcon_org
AppIcon.png

  製作素材,將各景點設計成貼紙的風格黏貼於地圖中,讓按鈕看起來更加活潑,而後完成高擬真設計原型。

St.john'sCathedral.png
Eusey.png
Cockburn.png
BelizeWelcomeSign.png
Paslow.png
Battlefield.png
XDproto2.png

  將App前言以短片呈現,讓貝里斯國旗上的兩位小人帶領使用者走進故事。

  釋出平板與手機版本,由於螢幕大小不同,呈現方式有些許不同。如手機中點選景點資訊呈現於固定位置,而平板顯示於景點旁。

P1.png
P2.png
P3.png
P4.png

使用者測試

根據使用者測試結果,改善問題。

增加導覽:操作陌生的程式介面,許多內層的資訊者無法取得,於是我們設計導覽教學,帶領使用者先跑完一個景點的完整流程。

MOD2.png

強調計劃負責單位:國合會及文化之家等單位希望將其Logo一直顯示於關於及介紹頁面,並能點擊連結至網站。

mod1.png

​除去內嵌瀏覽器功能:許多景點網站並無響應式的設計,App內瀏覽外部網站非常吃力且不美觀,再次討論其必要性之後將此功能刪除。

mod3.png

收穫

​首次接案經驗,學習兼顧使用者的體驗及客戶的目的,嘗試使用更多種方法及工具提升技能廣度。

​首次接案,從與客戶的溝通與討論中提升經驗,除了考慮使用者外,了解客戶的需求,學習如何衡量權重並設計出符合雙方的系統功能。另外與政府單位合作專案中也要留意配色以及元素可能與歷史文化政治產生關聯。

  persona及優先級矩陣方法,能更快速有效掌握設計方向,原型製作過程中,​根據不同裝置設計不同的介面提供資訊數量的拿捏,對於​美工軟體及使用Prototype工具更加熟悉,快速地將原型呈現先進行測試提升效率。

​有什麼想說的嗎?

bottom of page