Datavideo 洋銘科技|國際官網

大型在地化多國語言網站建置,硬體公司官網的絕佳案例

Datavideo以提供高品質且高性價比的廣播和影視應用解決方案而聞名,其中包括了多達150種以上產品,例如攝影機、導播機、編碼器、錄影機、通話系統、轉換器和其他現場影片製作所需的重要配件。
Cover

如果你有一間跨國公司,你會選擇各國分別設立官網,還是一個國際官網全部整合呢?本篇文章即將介紹的案例Datavideo就是選擇了後者。讓我們從Datavideo簡介開始,一起來看看夏木樂如何協助Datavideo開發一個14種語言的大型B to B to C網站。

 

Datavideo簡介

Datavideo於1985年成立於台灣台北,是擁有超過35年經驗的專業導播器材供應商,以提供高性價比的方案聞名。

Datavideo的事業版圖遍佈全球,在全世界有超過10個據點,光是台灣,銷售通路就有75間,官方網站語言更是高達十四種。解決方案涵蓋範圍廣泛,從企業、教育、運動、電競直播到現場表演或宗教活動皆有適用選項。

近年來Datavideo也積極發展「洋銘學院」,以遠端學習為核心,制定一系列關於器材使用的課程,邀請產業內資深工作者作為講師,讓學生可以不受地域限制,隨時了解產品操作方式。

Datavideo 與我們的合作已邁入第六年,我們始終如一的替客戶提供優秀的服務品質,Datavdieo 也長期給我們充分信任,讓我們有足夠的空間打造優秀的網站。

國際官網的需求

由於舊版官方網站設計過於陳舊,語言種類不及業務版圖的擴張,因此希望更新國際官網。

再者,Datavideo 屬於廣電產業,其競爭對手的網站一個個比絢麗,用高畫質的圖片做火力展示。以往,類似廠商官網對「科技感」都有一種固有的呈現方式,這次投入大型開發網站,就是想跳脫這種視覺上固有的形式,讓人對洋銘科技的印象從第一眼就與眾不同。更要能突出其產品的拍攝品質,讓大眾感受到,許多電競、演唱會、運動會等等舉辦時,Datavideo 其實就在你我身邊。

而除了翻新視覺設計,以及增加語言種類外,更重要的是希望將經銷商專區以及保固註冊區重新規劃,方便不同目的的使用者,快速找到自己的目標。

這次的合作與以往最不同的是,這個官網不是從零到有把東西生出來,而是把舊有的資訊分類、整理、更新,變得更好,於是在製作的過程中,出現了幾個困難點。

 

執行過程的困難點

困難程度☆☆☆☆ — 照片的選擇

Datavideo為製作攝影相關的器材的科技公司,為凸顯特色,我們希望新網站的設計中,可以以影像為主,搭建出商品使用者平時工作時的場景,讓使用者更有帶入感。

然而,在舊網站中,並未有如此大量的影像運用,且網站中出現的任何影像,都會讓人直接聯想到器材的品質,因此這次在照片的篩選上,為了保障每張照片的主題與品質,花費了許多人力與時間。

(洋銘科技新國際官網截圖)

困難程度☆☆☆ — 設計元素

在提案階段,我們注意到Datavideo舊版網站在視覺上,與大部分的科技公司一樣,多為乾淨的背景搭配高清的商品照,雖然可體現出科技感,但整體而言欠缺有特色的設計風格,無法讓人眼前一亮,於是我們開始著手為新網站找定位與風格,因為網站資訊量龐大、無互動或動畫需求,因此必須要找能與商品平衡且不會喧賓奪主的設計風格。

(洋銘科技舊網站首頁)

困難程度☆☆ — 維護、保固整合

網站中,大部分的使用者為消費者或經銷商,有無註冊商品、註冊保固將會直接影響到消費者維修器材的權益,同時商品查詢、保固查詢功能,也是經銷商維修商品時的依據,是售後服務中很重要的一環,但在舊網站中,使用度如此之高的註冊頁面卻被藏在Footer的一片目錄之中,為了讓使用者可以更方便地找到申請保固的入口,我們的設計中將會改善保固申請動線。

(舊網站Footer截圖)

困難程度☆ — 技術支援目錄重整

在舊網站的設計中,整個支援中心的資訊屬於量多且龐雜的類型,因此我們認為,若要改造此頁,需先將資訊分類,才有機會從中梳理出適合做成目錄的、有脈絡的資訊。

(舊官網資源中心截圖)
 

我們的呈現及設計原因

讓使用者有共鳴的黑色設計

上一個段落中有提到,視覺上,設計師在尋找一個讓洋銘科技官網與其他科技公司官網做出區隔的方式。

以此為目標,設計師們從使用者角度出發,模仿大部分使者在黑暗中操做機器的經驗,最後決定以「黑色」作為網站設計風格,不僅讓網站在同行裡做出特色,同時,因為洋銘科技商品也多為黑色,順利解決了設計風格與商品不容易互相搭配的問題,也讓產品與網頁設計中多了互文的整體感。

事實證明黑色不僅提升網站整體專業度,也讓網站整體更有記憶點。

(暗處工作示意圖。照片出處:立楊文化有限公司
(洋銘科技新官網黑色設計呈現)

多國語系及在地化

此次官網更新的關鍵原因之一,即是語言種類不敷使用,因此,除了增加語種外,更要在地化,不只文字,資訊呈現、操作方式也要在地化,掌握當地客群需求,即使是同一個網站,依然能讓世界各地的使用者都感覺賓至如歸。

(相同頁面在不同區域呈現的樣貌不同)

保固註冊程序優化

考量大部分消費者對於網站動線的熟悉程度不同但目的相同,我們將註冊保固的按鈕單獨拉出並放大,讓有註冊需求的消費者可以更快速的找到自己需要的資訊。將登入頁面去除,並增加QRcode掃描註冊,加快手續。乾淨的背景圖片,也讓畫面更一目了然。

最貼心的是,當經銷商或消費者輸入序號,系統會根據序號自動對應商品型號,不只能管理保固日期,也能快速對應機種,方便有效率。

技術支援資料重整

技術支援頁面的資料,經過我們的重新整理與規例,畫面變得潔,配合簡約的icon與黑色背景設計,呈現出專業感,還能更有效率的幫助使用者前進,找到問題、解決問題。

經銷商專區權限

跨國企業的行銷活動當中,經常出現相同商品素材因地域不同而出現內容上的差異,以往的這種狀況,需要分別調整素材,再向世界各地的廠商分別發送。在這個狀況下,更事半功倍的方法是直接從網站後台「設定素材權限」,先將整包行銷素材上傳,再以登入地區劃分經經銷商可以看到的內容,省下手動調整內容的時間。

(新官網後台截圖)

檔案下載專區強化

與小型硬體如手機、平板相比,大型硬體的售後服務相對困難,因此,讓消費者在第一時間就能獲的正確的操作資訊,對硬體公司與消費者而言都相當有幫助。

此次「下載專區」的功能強化,消費者面有類別篩選、單筆勾選下載多個檔案功能,管理者面則有可依據不同國家上傳相應的檔案、可根據會員身份控管檔案權限、產品頁面自動帶入相關檔案,並在檔案更新時自動通知會員。可以說是一次相當全面的功能強化。

 

結尾

這次大型開發網站的誕生,雖然很燒腦,也很燒肝,但在合作雙方互相信任及尊重的基礎之下,過程順利,最終,雙方皆以高品質完成了各自的任務。

介紹完洋銘科技國際官網的案例後,如果你也想看看洋銘學院長什麼樣子,歡迎點這邊,本公司其他案例分享點這邊,如果你也有大型開發網站需求,或有遠大的網站計畫藍圖不知從何開始,歡迎聯絡夏木樂,品牌網頁設計專家,從網頁設計開始,提供您最好的服務。

Simular

如果您喜歡我們的作品

歡迎與我們聯絡取得服務說明