‘22 PRODUCT DESIGN WORKS by SAMMGUO
"When background data and problems are clear, design comes into place."
1
SAMMGUO PORTFOLIO
Hi, there! I'm Samm. It's my pleasure to present my portfolio to you! Samm Guo 郭 彥呈
Education 2015-2018
Wu-Ling Senior High School
2018~2023
Department of Industrial Design, Shih Chien University
Awards K Design Award Industrial: Winner C-IDEA Design Award Industrial Design: Winner Red Dot Design Award Design Concept: Shortlisted
Capabilities Fusion 360 Figma
Alias illustrator
Premiere Pro
Rhino Photoshop
After Effects
Keyshot
2
SAMMGUO PORTFOLIO
CONTENT
Go! Metro App Redesign
BANDHEAD
Renderings &
UI & UX Design
Product Design
Visual Communication Graphic Design
3
SAMMGUO PORTFOLIO
Go! Metro app Redesign 嘗試對臺北捷運官方 app ，開發除了身心障礙者、 場館預約需求者之外，不同的使用族群。
Attempting to cater to different user groups beyond just individuals with disabilities and need of venue reservation users through the official Taipei Metro app.
Project Type
UI/UX design
TA
People with variety of commuting mode
Software
figma, photoshop
4
SAMMGUO PORTFOLIO
Backstory 重新整理資訊顯示層級
分離搭車相關功能
與捷運關聯事業功能 身為設計在學者與搭乘台北捷運超過十年的經 歷，卻未有使用「台北捷運 Go ！」的需要。
在測試當前的應用程式之後，理解到身心障礙
人士、運動愛好者等有有預約相關服務的需要， 但卻苦於未經梳理的介面，而產生使用上的阻
礙；而行動支付影響力愈見強大的當今，實體
服務與虛擬服務的結合是必然的結果，所以藉此 機會，實際操作在校所學。
As a design student and a long-time Taipei Metro user, I never need to use the app "Taipei Metro GO". After testing the current application, I understood the needs of people with disabilities, sports enthusiasts, and others who require reservation-related services. However, I struggled with the unorganized interface, which created usability barriers. With the growing influence of mobile payments today, the integration of physical and virtual services is an inevitable outcome. So, I saw this as an opportunity to put into practice what I've learned in school.
整合悠遊付核心功能
5
SAMMGUO PORTFOLIO
an
rc ea
Use
e rr
s
Com
tiv p eti
e
用戶體驗設計 ow
aly
sis
資料分析 h
使用者研究
r Use
fl
資訊架構草圖
u
in g
a
e ld
sign
Vis
m f ra
Wi
re
Scoop of Work
視覺設計
6
SAMMGUO PORTFOLIO
User Research
我使用了問卷調查捷運 / 非捷運使用者為何選擇
目前的通勤方式，並調查目前的問題與希望自己 的選擇有哪些特點。
I've conducted some survey about current metro-user and non-metro-user, to learn why they choose their current commute method. Based on these interviews I've made two different user personas and situations where this product could be uesd.
小智
痛點
期望值
•
•
•
• •
居住 在公館
大學生 / 19 歲
捷運 + 共享機車使用者
出門前在 wemo, 天氣 app, 與 google map 之間周旋 以決定出門方式
•
•
輕鬆抵達目的地 省錢
對台北地圖不熟
志明
痛點
期望值
•
•
•
快速衡量旅途使用大眾運輸
•
不須排隊等待、安全的
• •
居住在萬華
學校教務主任 / 48 歲 使用汽車通勤
• •
日間找不到停車位 假日停車費相當高 對捷運不熟
與開車之間的優劣 移動方式
7
SAMMGUO PORTFOLIO
Competitve Analysis
Visual appeal: high
路亞捷運
Bus+
Google Map
Extra features: few
Extra features: a lot 台北等公車 台北捷運 路線圖
Main Goals of the Redesign 重新整理資訊顯示層級
台北捷運Go!
Visual appeal: low
分離搭車相關功能
與捷運關聯事業功能
整合悠遊付核心功能
8
Section 7
SAMMGUO PORTFOLIO
首頁
User Flow Diagram 起 / 終點
根據競品定位分析和使用者研究，我定義了應
Entry Point
功能框架
用程式的使用流程圖。
Based on the competitor analysis and user research I've created the user flow.
按鈕
我的帳戶
顯示內容
路網圖
右滑
首頁
Ea y Wallet 到站時刻：21車站
到站時刻：:9車站
新鮮事
公共自行車
無障礙服務
服務預約
到站時刻： 搜尋欄
到站時刻：:HBA
9
SAMMGUO PORTFOLIO
路網圖部分
悠遊付部分
Section 5
Section 4
路網圖
旅程
旅程時間
Easy Wallet
票價查詢
列車動態
掃描
選擇起/訖站
Go
路網圖 車站
請選擇車站
路網圖 '+時間
請選擇車站
路網圖 票價
列車動態0
悠遊卡加值機
優惠卷
悠遊 oint
常客優惠
付款碼
最新消息
10
SAMMGUO PORTFOLIO
Typography & Colors
Aa Noto Sans TC
Text Styles
Color
H1
Bold/28
B1
Bold/22
H2 B2 B3
description
Medium/22
grey
#f3f3f3
main
Bold/16 Bold/14
Medium/14
#666862
#ffffff
#f4f6f7
#add1c2
#005386 #394C59
#cbdfed
#a5cc99 #5b905e #be312c
sub
11
SAMMGUO PORTFOLIO
Homescreen
[a]
[a] 即時資訊廣播
[b]
[b] 顯示天氣狀態以輔助使用者決定通勤方式
[C]
[C] 捷運關聯服務 / 事業 [d] 乘車即時資訊 / 已標記車站
Prototype with Figma
[d]
12
SAMMGUO PORTFOLIO
[a]
Easy Wallet [a] 直觀檢視捷運乘車優惠
[b] 將首頁廣告欄位、最新消息欄位移至此
[C] 新增 NFC 加值機，並使按鈕保持在下半部 使用者易於單手使用
[b]
[c]
13
SAMMGUO PORTFOLIO
Route Map [a] 整合乘車查詢的核心功
能，使用滿版的捷運路線圖 顯示查詢結果；票價查詢可 查詢多人搭乘總價
[b] 由首頁向右滑開啟 [a]
[b]
14
SAMMGUO PORTFOLIO
Trip-planning [a] 以時間帶的方式顯示路線選項 [b] 圖像化資訊呈現
[b]
[C] 整合大眾運輸資源，試圖提供更好的路線選擇
[c]
[a]
15
SAMMGUO PORTFOLIO
BANDHEAD 以改變當前的錄音方式，來解決當前創作樂團在 即興寫歌會遇到的問題的錄音產品。
BANDHEAD is a recording product designed to change the current recording method and address the issues encountered by creative bands during improvisational songwriting.
Project Type
product design
TA
New indie band
Category
Music & Media Equipment
Size
170* 82* 95mm
Material
Polyester/ ABS / Aluminium / Zinc Alloy
16
SAMMGUO PORTFOLIO
Backstory 寫歌的過程中靈感轉瞬即逝， 邁向創作階段的當代樂團時常 與無意間迸出的樂句擦身而
過。每次在「與樂手即興」的 階段，彼此在用音樂展現自我 之後，都會進入「剛剛那段我 覺得可以留下來」卻不知道要 怎麼描述對方樂句的窘境。
Inspiration comes and goes in a flash when musicians write a song. Modern bands often lose cool riffs when jamming. Someone would say “I think we should keep that cool stuff” but he don’t know how to describe it to other band members.
17
SAMMGUO PORTFOLIO
Process of Songwriting 不管是單人歌手、演唱組合或是三人以上的 樂團，歌曲在創作的時候鮮少由單人完成。 左側簡介兩種最常見的模式的流程圖。
Whether it is a single singer, a trio or a band, it is rare for a song to be written by a single person. The two most common models are described below.
Solutions Nowadays
#1 Zoom H1n
#2 SONY PCM-A10
#3 DJI MIC
對應樂團實際使用需求進行逐步確認，發現 電子樂器領域、消費電子領域與攝影器材領
域當中，優秀的錄音產品皆沒有「錄下按錄 音鍵前內容」與「選用輸入方式」這兩個在 此使用情境中重要的功能。
After confirming the actual usage needs of the band, it was found that solustions nowadays did not have two important functions in this usage scenario: "record the content before pressing the recording button" and "select the input method."
LINE-IN / MIC-IN in one
Rigid exterior design
Remote control recording
One instrument at a time
No LINE-IN option
No LINE-IN option
No pre-recording funtion
No pre-recording funtion
No pre-recording funtion
18
SAMMGUO PORTFOLIO
Prototyping of the hardware 從揚聲器、主機板、旋鈕和按鈕、顯示面板等元件的位置，到用戶的
使用邏輯，我經過了無數個原型和調整，以確保 BANDHEAD 使用起 來直觀易懂。
From the placement of components such as speakers, motherboard, knob and buttons, display panel...... etc, to the user's experience testing. Numerous prototypes and tweaks to ensure an intuitive way to use BANDHEAD.
19
SAMMGUO PORTFOLIO
20
Working Prototype 歷經使用 Arduino 發覺其運算能量不足運行、而後使用 Jetson
Nano 做為開發依據，將預想的功能透過 Python 撰寫，經過重複的 調試以達到驗證的目的。
After discovering that Arduino was insufficient for the task, Jetson Nano was used as the development basis. The intended functionality was implemented through Python and repeatedly debugged to achieve task automation.
SAMMGUO PORTFOLIO
21
Functions Intergrate through Jetson Nano
SAMMGUO PORTFOLIO LINE-IN Prototype
For Guitarist& Bassist
Clip Player Prototype
For Further Discussion
MIC-IN Prototype
For Vocalist& Drummer
22
SAMMGUO PORTFOLIO
User Flow Diagram
Recorder
Clip Player Box
23
SAMMGUO PORTFOLIO
Scenario
24
SAMMGUO PORTFOLIO
Recorder made for singer/drummer Cardioid Polar Pattern Microphone
Recorder aid for bassist/guitarist
Saved the clips via Micro SD card 6.3mm TRS cable connects from guitar / bassist amp to Clip Player Box
25
SAMMGUO PORTFOLIO
Design Feature
26
Close-ups
SAMMGUO PORTFOLIO
27
SAMMGUO PORTFOLIO
[a] [b]
[a] 裝置選取燈號
Indication for choosing devices.
[b] 可使用標記鍵重新命名檔案，以做後續 記譜、試混音使用
Use the "marked" button to label each segment for ease of use in future endeavors such as music notation or mixing.
[c] Type-C 接口作為裝置充電與資料傳輸使用
[c]
charging/data transfer for all devices.
[d] 使用 6 . 3 mm TRS 接口連接至音箱頭之 輸出口以擷取音訊
record the audio via 6.3mm TRS from amplifier.
[d]
28
SAMMGUO PORTFOLIO
29
SAMMGUO PORTFOLIO
Renderings & Visual Communication
30
SAMMGUO PORTFOLIO
31
SAMMGUO PORTFOLIO
32
SAMMGUO PORTFOLIO
33
SAMMGUO PORTFOLIO
34
SAMMGUO PORTFOLIO
35
SAMMGUO PORTFOLIO
36
SAMMGUO PORTFOLIO
fin. Let's Connect?