Please enable JavaScript.
Coggle requires JavaScript to display documents.
TP webpage UI design - Coggle Diagram
TP webpage UI design
:one: welcome page
:two: main page
Group introduction board
company introduction board
job introduction board
learning board
1. class report content 2. glossary
a built-in mini-game
1 more item...
Dcard
(TP company)
:sunny::new_moon: model
language
:mag: Search block
a AI tool can guide to related interfaces
:three: Group introduction board
:four: company introduction board
:five: job introduction board
:six: learning board
Key Related Boards
Workplace Board
Job responsibilities
Company culture
Salary & promotion
Career dilemmas
Work Experience Board
Real job tasks
Pros & cons
Day-in-the-life
Part-Time Job Board
Duties in retail / F&B / tutoring
Pay & shifts
Interview tips
Internship Board
Internship job descriptions
Interview stages
Learning outcomes
Full-time conversion
Tech Job Board
Engineer / PM / Data / Design roles
Company culture
Interview processes
Interview processes
Types of Job Introduction Content
Job Descriptions
Responsibilities
Skills
Workflow
Company Insights
Atmosphere
Overtime culture
Benefits
Interview Processes
Stages
Test tasks
HR questions
Salary Information
Salary ranges
Bonuses
Comparisons
Home（首頁） → 職位介紹導覽
使用者操作：
使用者進入網站，畫面中央會看到「探索 Dcard 的職位」按鈕。
下方有四個主要入口：「產品 & 技術」、「設計」、「商業」、「社群營運」。
會看到的內容：
網站目的簡介
開始探索的主按鈕
四大部門的快速入口（用圖示呈現）
點擊後會去哪：
點選任一部門 → 導向該部門的介紹頁面
點「開始探索」→ 進入「部門選擇頁」
部門選擇頁（Team Categories Page）
使用者操作：
Product & Tech
Design
Business
Community
會看到的內容：
每個部門用大圖塊顯示，每塊都附短說明
滑鼠移到圖塊會跳出提示：「點我查看詳細職位」
點擊後會去哪：
點「產品技術」→ 進入 Product & Tech 頁面
點「設計」→ 進入 Design 頁面
依此類推
部門頁面（例如：Product & Tech）
使用者操作：
使用者可在同一頁看到該部門所有職位（卡片式呈現）
點選某個職位卡片 → 開啟該職位的詳細介紹頁
會看到的內容：
PM、工程師、資料分析、QA…等職位卡片
每張卡片顯示
職位名稱
一句短描述
「了解更多」按鈕
點擊後會去哪：
點 PM 卡片 → 進到 Product Manager 詳細介紹頁
點 Software Engineer → 工程師介紹頁
依此類推
職位詳細頁（例如：Product Manager）
使用者操作：
向下滑動查看詳細內容
也可以按右上角「返回部門」回上一頁
會看到的內容：
工作內容（列點）
專業名詞解釋
與其他職位的合作方式
一天的工作流程（可選）
「我適合這個職位嗎？」互動按鈕
點擊後會去哪：
點「返回部門」→ 回到 Product & Tech
點「看看我適合哪個工作」→ 前往「職位小測驗」
互動測驗頁（職位測驗 Quiz）
使用者操作：
回答 4–5 個題目（性格、喜歡的工作風格、強項等）
會看到的內容：
互動式單選題
測驗結果 → 推薦最適合的 Dcard 職位
點擊後會去哪：
顯示結果（例如：你適合 UI/UX Designer）
按「查看職位介紹」→ 跳到該職位詳細頁
按「再測一次」→ 重做測驗
按「回首頁」→ 回 Home
Meet the Team
:arrow_forward:
(left swipe into next page)
Job descriptions for each department
Job 3
Job 4
Job 2
Job 5
Job 1
(wish to use Product functionality from scratch to imtroduce)
job introduction board