登山獸獸 App

這是一款專為登山愛好者打造的應用程式，透過遊戲化設計，將登山從單純的挑戰轉化為一種有趣且具互動性的體驗。

時程

2022 5月 - 2022 7月

2022 5月 - 2022 7月

角色

UI/UX 設計師

UI/UX 設計師

平台

App

App

Why

Why

Why

專案背景

專案背景

目前市面上的登山應用程式多著重於路線追蹤，卻缺乏情感連結與使用者動機。本專案旨在透過遊戲化設計、團隊協作與個人化推薦，提升整體登山體驗，讓登山變得更有趣、更具社交互動性，並更以使用者為核心。

目前市面上的登山應用程式多著重於路線追蹤，卻缺乏情感連結與使用者動機。本專案旨在透過遊戲化設計、團隊協作與個人化推薦，提升整體登山體驗，讓登山變得更有趣、更具社交互動性，並更以使用者為核心。

Overview

Overview

Overview

什麼是

什麼是

登山獸獸？

登山獸獸？

登山獸獸是一款以登山為核心的應用程式，透過遊戲化機制提升使用者參與度。它提供針對登山「前、中、後」各階段所設計的功能，讓整體登山體驗變得更加有趣且富有互動性。

登山獸獸是一款以登山為核心的應用程式，透過遊戲化機制提升使用者參與度。它提供針對登山「前、中、後」各階段所設計的功能，讓整體登山體驗變得更加有趣且富有互動性。

What we did

What we did

What we did

我們為了這款APP規劃

團隊規劃

團隊規劃

團隊規劃

行前準備

行前準備

行前準備

地圖引導

地圖引導

地圖引導

登山紀錄

登山紀錄

登山紀錄

叫車服務

叫車服務

叫車服務

任務解鎖

任務解鎖

任務解鎖

商城兌換

商城兌換

商城兌換

紀錄搜集

紀錄搜集

紀錄搜集

成果驗證

成果驗證

我們榮獲金赫獎 UIUX 類別 第一名 的殊榮。
我們榮獲金赫獎 UIUX 類別 第一名 的殊榮。

01

01

01

UX Research

競品分析

競品分析

競品分析

皮克敏

4.5

5.5萬則評論

  • 可以每天回顧跟寫日記，紀錄生活

  • 結合運動、可增加活動量的遊戲

  • 遊戲畫面很可愛、親切

正面評價

  • 畫面太多電箱、動畫太多可能干擾使用

  • 定位系統不夠快速

  • 連線常顯示錯誤

  • 明信片與種花機制功能需優化

負面評價

Hikingbook

4.8

1.1 萬則評論

  • 付費功能值得訂閱

  • 地圖爬山景點很詳細

  • 功能完整

Positive Feedback

  • 閃退問題，無法紀錄

  • 地圖跑很慢

  • 每塊版面內容資訊過多，閱讀體驗稍差

Negative Feedback

健行筆記

4.6

1170 則評論

  • 豐富的步道搜尋與完整介紹

  • 路線方便查詢，下載匯入離線地圖

  • 虛擬寶石功能有趣

  • 多種類型地圖

Positive Feedback

  • 紀錄軌跡為了避免偏移與亂飛的情形有比較多限制條件，可能部分的位置定位點被篩選掉，造成紀錄的線變成直線

  • 儲存資料意外不見

Negative Feedback

人物誌

人物誌

人物誌

Amy

年齡 22 | 女性 | 台北

大學生剛畢業 / 待業中 / 單身

登山年資：1年

用戶特性

  • 重度手機使用者

  • 數位化程度高，喜歡嘗試app新功能

  • 喜歡和朋友一起爬山

  • 喜歡關注最新流行資訊

需求目的以及痛點

痛點

  • 身邊比較喜歡爬山的朋友比較少

  • 想挑戰稍微進階的山，但專業知識不足

需求

  • 想在社團裡面可以找到一起爬山的朋友

  • 想要上登山行前講座，吸收登山知識

Mark

年齡 33 | 男性 | 台北

工程師 / 工作十年 / 已婚育有一子

登山年資：1年

用戶特性

  • 放假的時候習慣陪家人進行戶外活動

  • 喜歡樂於在社群媒體上分享自己的生活

  • 年紀到了跟工作壓力，開始注重身體健康

  • 喜歡參加商業團，學習更多登山知識

需求目的以及痛點

痛點

  • 想讓身體更健康，但市面上的健行app都太專業了

  • 背很重的登山裝備讓他很困擾

需求

  • 想要認識共同興趣的新朋友，希望app有交友的功能

  • 想要紀錄自己的登山日記分享給身邊的朋友

Andy

年齡 42 | 男性 | 南投

體育老師 / 居住在小村莊裡 / 單身

登山年資：5年

用戶特性

  • 有運動習慣，喜歡上山下海

  • 喜歡帶朋友爬山當領隊

  • 喜歡挑戰高難度或需要闢徑的山

  • 有加入很多登山社團

需求目的以及痛點

痛點

  • 臨時有組隊的成員退出，來不及找到替補的人員

  • 統整大家的行程上有困難

需求

  • 希望app能夠有分享自己爬山輝煌紀錄的功能

  • 希望app可以組一個團隊，有團隊的成員資料

用戶旅程地圖

用戶旅程地圖

用戶旅程地圖

定義問題

定義問題

定義問題

根據上述 Persona 以及用戶旅程地圖分析出的痛點與需求，進而歸納整理出App的目標：

根據上述 Persona 以及用戶旅程地圖分析出的痛點與需求，進而歸納整理出App的目標：

紀錄爬山過程

紀錄爬山過程

統整行程困難

統整行程困難

有共同
爬山興趣的
朋友不多

有共同
爬山興趣的
朋友不多

app過於專業
不知道如何使用

app過於專業
不知道如何使用

目標：
目標：
讓用戶能夠提前規劃好行程、並且找好一起爬山的用戶，並且在登山後也可以分享、紀錄自己爬山的過程。
讓用戶能夠提前規劃好行程、並且找好一起爬山的用戶，並且在登山後也可以分享、紀錄自己爬山的過程。

02

02

02

Information Architecture

03

03

03

Function Flows

地圖操作流程

地圖操作流程

地圖操作流程

建立團隊流程

建立團隊流程

建立團隊流程

04

04

04

Style Guide

Color

Color

Color

Primary Color
Primary Color
Primary Color

#FFCC68

#82DDCD

#FE9A76

Background Color
Background Color
Background Color

Linear 1

Linear 2

Neutral Color
Neutral Color
Neutral Color

#FFFFFF

#FAFAFA

#EFF0F6

#A0A3BD

#4E4B66

#14142B

#000000

Typography

Typography

Typography

PingFang TC

屬性

應用

Header 1

24px｜140%｜Bold

需要被強調的重點應用

Header 2

22px｜140%｜Medium

需要被強調的重點應用

Title

20px｜140%｜Bold

區塊主要標題應用

Subtitle

16px｜140%｜Medium

區塊主要標題應用

Body 1

16px｜165%｜Regular

內文資訊應用

Body 2

14px｜165%｜Regular

內文資訊應用

Caption

13px｜165%｜Regular

輔助資訊應用

05

05

05

Mockup

主視覺設定
主視覺設定

以台北著名的四獸山『象山、虎山、豹山、獅山』作爲登山小夥伴的主視覺角色設定，借用此意向象徵此款APP期待塑造的『陪伴』形象。

主視覺顏色使用夕陽橘、鬱金黃搭配，呈現溫暖、活潑、遊戲化的介面設計，另外搭配湖水綠作為輔助配色，帶有一些大自然元素之氣息。

以台北著名的四獸山『象山、虎山、豹山、獅山』作爲登山小夥伴的主視覺角色設定，借用此意向象徵此款APP期待塑造的『陪伴』形象。

主視覺顏色使用夕陽橘、鬱金黃搭配，呈現溫暖、活潑、遊戲化的介面設計，另外搭配湖水綠作為輔助配色，帶有一些大自然元素之氣息。

登山偏好數據收集
登山偏好數據收集

透過註冊帳號後引導式的方式做用戶初步的基本調查，以利未來做為您推薦路線的後台數據資料。

透過註冊帳號後引導式的方式做用戶初步的基本調查，以利未來做為您推薦路線的後台數據資料。

小夥伴選擇
小夥伴選擇

註冊帳號後可選擇一隻自己喜好的登山小夥伴，而小夥伴經過一段時間的餵食和解鎖登山路線會慢慢長大，使遊戲感的體驗隨著時間的累積變得更加生動及豐富，也給予用戶對於未來角色的期待與想像。

註冊帳號後可選擇一隻自己喜好的登山小夥伴，而小夥伴經過一段時間的餵食和解鎖登山路線會慢慢長大，使遊戲感的體驗隨著時間的累積變得更加生動及豐富，也給予用戶對於未來角色的期待與想像。

Map Page

Map Page

Map Page

按下爬山紀錄鍵，開始偵測紀錄行走距離、時間、高度。

按下爬山紀錄鍵，開始偵測紀錄行走距離、時間、高度。

按下爬山紀錄鍵，開始偵測紀錄行走距離、時間、高度。

1

寶物抓取
寶物抓取

在登山前後有網路連線的通勤路段，使用者可以主動點擊地圖上的寶物進行蒐集，豐富自己的寶箱內容，為整體體驗增添趣味性。

在登山前後有網路連線的通勤路段，使用者可以主動點擊地圖上的寶物進行蒐集，豐富自己的寶箱內容，為整體體驗增添趣味性。

地圖頁面也能偵測附近有哪幾個隊伍正在進行健行活動。

2

A floating toolbar with shortcut buttons is provided to explore more app features easily.

3

3

2

1

助手功能
助手功能

包含GPS定位、工具箱、通知、軌跡，協助使用者在登山過程中更順暢。

包含GPS定位、工具箱、通知、軌跡，協助使用者在登山過程中更順暢。

工具箱包含禮物、植物圖鑑、
急救箱、指北針、兩點側距等功能

工具箱包含禮物、植物圖鑑、
急救箱、指北針、兩點側距等功能

Team

Team

Team

我的團隊為用戶已加入的團隊列表，討論度越活躍的團隊會排序在前，而歷史已結束健行的團隊排序在後。

團隊功能
團隊功能

１/3版面設計權重為輸入團隊的邀請碼，團員可使用領隊建立的邀請碼加入團隊。

領隊可使用建立團隊功能，將此次登山資訊彙整在此app內互相提醒及交流。

領隊可使用建立團隊功能，將此次登山資訊彙整在此app內互相提醒及交流。

基本資料輸入完成後，按下建立團隊，即可獲取邀請碼及連結，團員可擇一使用加入團隊。

基本資料輸入完成後，按下建立團隊，即可獲取邀請碼及連結，團員可擇一使用加入團隊。

基本資料輸入完成後，按下建立團隊，即可獲取邀請碼及連結，團員可擇一使用加入團隊。

Search

Search

Search

依據資料庫數據後台管理自動推薦最近搜尋熱度較高的路線。

1

採用卡片式的設計，有助於將資訊量較多的內容區塊化，利用關鍵文字、公里數、時間讓用戶在點進去前先在腦中建立基本資訊。

2

為你推薦路線依據用戶前期登入調查及用戶瀏覽的類型做為大數據的資料庫，依照喜愛做推薦，使用戶可以節省時間探索更多新的爬山路線。

3

3

2

1

Task

Task

Task

廣告任務
廣告任務

與健行有關的產業品牌，進行互利合作，使此款app對於使用者有吸引力外，同時也具有商業性發展的需求。

與健行有關的產業品牌，進行互利合作，使此款app對於使用者有吸引力外，同時也具有商業性發展的需求。

特別任務
特別任務

下載特別任務的離線地圖後，用戶可以依據離線地圖的路線解鎖，當系統偵測到用戶在某個範圍內的經緯度行走完成並且上傳路線，寶物自動匯入到用戶的app內。

下載特別任務的離線地圖後，用戶可以依據離線地圖的路線解鎖，當系統偵測到用戶在某個範圍內的經緯度行走完成並且上傳路線，寶物自動匯入到用戶的app內。

每日任務
每日任務

每日登入簽到即可領取獎勵，增加使用者回訪率及滿足感。

每日登入簽到即可領取獎勵，增加使用者回訪率及滿足感。

Store

Store

Store

設置「商城」的初心是為了鼓勵用戶可以看到商城想兌換的商品進而努力解鎖任務的鼓勵因子，增加使用者對於app的黏著度及喜愛。

而另外一方面，「商城」對於品牌置入商業廣告有一定的吸引力，此app欲想邀請在登山旅程中有關聯的零售商，將自家些許產品放入此商城，打造提供雙方需求的平台，使app更具備市場商業潛力。

User page

User page

User page

我的頁面為使用者統整個人資訊，包含寶物山幣、已載軌跡、相簿分類、精靈養成等，方便提供用戶更清楚的資訊頁面。

同時也具備個人邀請碼推送好友，即可獲得額外山幣。

THANK
FOR
WATCHING

THANK
FOR
WATCHING

THANK
FOR
WATCHING

其他專案

LCDP跨網域解決方案

建構一套完整的顧客資料平台，整合線上與線下數據來源，實現精準的行銷自動化。

查看專案

LCDP跨網域解決方案

建構一套完整的顧客資料平台，整合線上與線下數據來源，實現精準的行銷自動化。

查看專案

LCDP跨網域解決方案

建構一套完整的顧客資料平台，整合線上與線下數據來源，實現精準的行銷自動化。

查看專案

產品整併

主導五個後台產品的模組化整合，透過標準化登入流程、整併重複模組，並建立可擴充的設計系統，以實現一致的跨平台使用體驗。

查看專案

產品整併

主導五個後台產品的模組化整合，透過標準化登入流程、整併重複模組，並建立可擴充的設計系統，以實現一致的跨平台使用體驗。

查看專案

產品整併

主導五個後台產品的模組化整合，透過標準化登入流程、整併重複模組，並建立可擴充的設計系統，以實現一致的跨平台使用體驗。

查看專案

Create a free website with Framer, the website builder loved by startups, designers and agencies.