悦懌生技顧問 | 網頁設計
Client
悦懌生物科技顧問有限公司
悦懌生物科技顧問有限公司
Duration
4 months
4 months
Category
UIUX Design
UIUX Design
「翻轉台灣傳產，用產品設計打造全新形象。」
【產品背景】
悦懌生技顧問是專門輔導生技相關的顧問公司，協助企業規劃、諮詢、研發、生產等服務。使用者可以在網站了解悦懌生技顧問與相關服務，也可以直接透過網站方便快速的聯絡。
【專案概覽】
台灣早期以傳統代工為主，近幾年陸續有許多企業轉化為「自有品牌」的模式，悅懌生技顧問也是其中之一。 作為一間生技領域的公司，如何在傳統的市場建立全新形象是一個挑戰，除了前期 CIS 的設計，到中期衍生物的應用，與後期的產品開發，都漸漸在大眾心中樹立起了鮮明的形象，也能確保循序漸進的設計流程，打造出完整的品牌體驗，此專案就是在這基礎之上，承前期的品牌規範設定，所完成的作品。
01 | 團隊目標為生技公司打造出耳目一新的產品，並有好的 CTA 讓使用者透過網站能直接取得聯繫。02 | 角色與產出這個專案的成員只有我與一位前端工程師。我負責UIUX 與 Webflow 製作，從視覺設計到網站頁面皆獨立完成。03 | 專案挑戰這個專案期望能建立出生技公司的全新形象，並且在技術上首次嘗試用 Webflow 建立網頁。04 | 專案成果與影響最終依照品牌規範建立出架構完整的網站，Webflow 的運用大大減少前端工程師的作業時間，幾乎由設計師獨立完成網站。
【使用者研究洞察】
1. 網頁資訊不足 |
作為企業官方網站，必須要有充足的資訊來建立專業感，也能讓使用者清楚認識該企業，網站是企業門面，也是培養使用者信心的第一步。
2. 無法及時聯繫 |
許多官方網站並無即時聯絡功能，用戶必須透過電話、信箱，甚至加 Line 才有辦法聯繫，無法藉由網站直接取得聯絡。
3. 無法提交完整的需求 |
用戶在提交需求需求時訊息常常會不完整，透過表單讓使用者填寫可以彌補這個缺失。
【第一階段：網站企劃】
確認網站內容、需求、定位 |
悦懌生技顧問，服務內容包含：產品開發生產、工廠規劃、驗證輔導、口碑行銷，是B2B、B2C的企業型網站。 我們針對悦懌的事業體，去建立起完整的架構，並且深入去了解每個服務的完整內容，整理網站每個頁面的資訊，呈現出悦懌生技顧問的網站全貌。
確認網站整體風格 |
在 CIS 設計階段，已經規劃好整體的識別形象，因此網站的製作必須要保有一貫的風格調性，並且在這個基礎上，延伸出網站獨特的設計面向。 因此在網站設計上，沿用悦懌前期制定的「朝氣、延伸、溫暖」概念，配色用大量的黃與橘色，搭配透明度延伸出日出的意象，多處應用 logo 的橢圓狀，與品牌相呼應，並導圓角處理。 整體風格是溫暖簡潔的，呈現出專業信賴感的同時，仍保有溫度。
【第二階段：網站視覺設計】
A. wireframe 繪製
Desktop
Mobile
B. 精稿製作
首頁
關於悅懌
ODM
工廠規劃
驗證輔導
口碑行銷
聯絡我們
Mobile
C. webflow製作
webflow 平台可以高度自由的客製化網站，即使是設計師也能很方便的製作，悦懌生技顧問便是利用此平台架設出來的網站。
【第三階段：網站維護】
網站維護與更新 |
後續網頁內容的更新，可以在 webflow 很方便的進行維護，及時依照客戶需求更改內容。
「翻轉台灣傳產，用產品設計打造全新形象。」
【產品背景】
悦懌生技顧問是專門輔導生技相關的顧問公司，協助企業規劃、諮詢、研發、生產等服務。使用者可以在網站了解悦懌生技顧問與相關服務，也可以直接透過網站方便快速的聯絡。
【專案概覽】
台灣早期以傳統代工為主，近幾年陸續有許多企業轉化為「自有品牌」的模式，悅懌生技顧問也是其中之一。 作為一間生技領域的公司，如何在傳統的市場建立全新形象是一個挑戰，除了前期 CIS 的設計，到中期衍生物的應用，與後期的產品開發，都漸漸在大眾心中樹立起了鮮明的形象，也能確保循序漸進的設計流程，打造出完整的品牌體驗，此專案就是在這基礎之上，承前期的品牌規範設定，所完成的作品。
01 | 團隊目標為生技公司打造出耳目一新的產品，並有好的 CTA 讓使用者透過網站能直接取得聯繫。02 | 角色與產出這個專案的成員只有我與一位前端工程師。我負責UIUX 與 Webflow 製作，從視覺設計到網站頁面皆獨立完成。03 | 專案挑戰這個專案期望能建立出生技公司的全新形象，並且在技術上首次嘗試用 Webflow 建立網頁。04 | 專案成果與影響最終依照品牌規範建立出架構完整的網站，Webflow 的運用大大減少前端工程師的作業時間，幾乎由設計師獨立完成網站。
【使用者研究洞察】
1. 網頁資訊不足 |
作為企業官方網站，必須要有充足的資訊來建立專業感，也能讓使用者清楚認識該企業，網站是企業門面，也是培養使用者信心的第一步。
2. 無法及時聯繫 |
許多官方網站並無即時聯絡功能，用戶必須透過電話、信箱，甚至加 Line 才有辦法聯繫，無法藉由網站直接取得聯絡。
3. 無法提交完整的需求 |
用戶在提交需求需求時訊息常常會不完整，透過表單讓使用者填寫可以彌補這個缺失。
【第一階段：網站企劃】
確認網站內容、需求、定位 |
悦懌生技顧問，服務內容包含：產品開發生產、工廠規劃、驗證輔導、口碑行銷，是B2B、B2C的企業型網站。 我們針對悦懌的事業體，去建立起完整的架構，並且深入去了解每個服務的完整內容，整理網站每個頁面的資訊，呈現出悦懌生技顧問的網站全貌。
確認網站整體風格 |
在 CIS 設計階段，已經規劃好整體的識別形象，因此網站的製作必須要保有一貫的風格調性，並且在這個基礎上，延伸出網站獨特的設計面向。 因此在網站設計上，沿用悦懌前期制定的「朝氣、延伸、溫暖」概念，配色用大量的黃與橘色，搭配透明度延伸出日出的意象，多處應用 logo 的橢圓狀，與品牌相呼應，並導圓角處理。 整體風格是溫暖簡潔的，呈現出專業信賴感的同時，仍保有溫度。
【第二階段：網站視覺設計】
A. wireframe 繪製
Desktop
Mobile
B. 精稿製作
首頁
關於悅懌
ODM
工廠規劃
驗證輔導
口碑行銷
聯絡我們
Mobile
C. webflow製作
webflow 平台可以高度自由的客製化網站，即使是設計師也能很方便的製作，悦懌生技顧問便是利用此平台架設出來的網站。
【第三階段：網站維護】
網站維護與更新 |
後續網頁內容的更新，可以在 webflow 很方便的進行維護，及時依照客戶需求更改內容。
「翻轉台灣傳產，用產品設計打造全新形象。」
【產品背景】
悦懌生技顧問是專門輔導生技相關的顧問公司，協助企業規劃、諮詢、研發、生產等服務。使用者可以在網站了解悦懌生技顧問與相關服務，也可以直接透過網站方便快速的聯絡。
【專案概覽】
台灣早期以傳統代工為主，近幾年陸續有許多企業轉化為「自有品牌」的模式，悅懌生技顧問也是其中之一。 作為一間生技領域的公司，如何在傳統的市場建立全新形象是一個挑戰，除了前期 CIS 的設計，到中期衍生物的應用，與後期的產品開發，都漸漸在大眾心中樹立起了鮮明的形象，也能確保循序漸進的設計流程，打造出完整的品牌體驗，此專案就是在這基礎之上，承前期的品牌規範設定，所完成的作品。
01 | 團隊目標為生技公司打造出耳目一新的產品，並有好的 CTA 讓使用者透過網站能直接取得聯繫。02 | 角色與產出這個專案的成員只有我與一位前端工程師。我負責UIUX 與 Webflow 製作，從視覺設計到網站頁面皆獨立完成。03 | 專案挑戰這個專案期望能建立出生技公司的全新形象，並且在技術上首次嘗試用 Webflow 建立網頁。04 | 專案成果與影響最終依照品牌規範建立出架構完整的網站，Webflow 的運用大大減少前端工程師的作業時間，幾乎由設計師獨立完成網站。
【使用者研究洞察】
1. 網頁資訊不足 |
作為企業官方網站，必須要有充足的資訊來建立專業感，也能讓使用者清楚認識該企業，網站是企業門面，也是培養使用者信心的第一步。
2. 無法及時聯繫 |
許多官方網站並無即時聯絡功能，用戶必須透過電話、信箱，甚至加 Line 才有辦法聯繫，無法藉由網站直接取得聯絡。
3. 無法提交完整的需求 |
用戶在提交需求需求時訊息常常會不完整，透過表單讓使用者填寫可以彌補這個缺失。
【第一階段：網站企劃】
確認網站內容、需求、定位 |
悦懌生技顧問，服務內容包含：產品開發生產、工廠規劃、驗證輔導、口碑行銷，是B2B、B2C的企業型網站。 我們針對悦懌的事業體，去建立起完整的架構，並且深入去了解每個服務的完整內容，整理網站每個頁面的資訊，呈現出悦懌生技顧問的網站全貌。
確認網站整體風格 |
在 CIS 設計階段，已經規劃好整體的識別形象，因此網站的製作必須要保有一貫的風格調性，並且在這個基礎上，延伸出網站獨特的設計面向。 因此在網站設計上，沿用悦懌前期制定的「朝氣、延伸、溫暖」概念，配色用大量的黃與橘色，搭配透明度延伸出日出的意象，多處應用 logo 的橢圓狀，與品牌相呼應，並導圓角處理。 整體風格是溫暖簡潔的，呈現出專業信賴感的同時，仍保有溫度。
【第二階段：網站視覺設計】
A. wireframe 繪製
Desktop
Mobile
B. 精稿製作
首頁
關於悅懌
ODM
工廠規劃
驗證輔導
口碑行銷
聯絡我們
Mobile
C. webflow製作
webflow 平台可以高度自由的客製化網站，即使是設計師也能很方便的製作，悦懌生技顧問便是利用此平台架設出來的網站。
【第三階段：網站維護】
網站維護與更新 |
後續網頁內容的更新，可以在 webflow 很方便的進行維護，及時依照客戶需求更改內容。
「翻轉台灣傳產，用產品設計打造全新形象。」
【產品背景】
悦懌生技顧問是專門輔導生技相關的顧問公司，協助企業規劃、諮詢、研發、生產等服務。使用者可以在網站了解悦懌生技顧問與相關服務，也可以直接透過網站方便快速的聯絡。
【專案概覽】
台灣早期以傳統代工為主，近幾年陸續有許多企業轉化為「自有品牌」的模式，悅懌生技顧問也是其中之一。 作為一間生技領域的公司，如何在傳統的市場建立全新形象是一個挑戰，除了前期 CIS 的設計，到中期衍生物的應用，與後期的產品開發，都漸漸在大眾心中樹立起了鮮明的形象，也能確保循序漸進的設計流程，打造出完整的品牌體驗，此專案就是在這基礎之上，承前期的品牌規範設定，所完成的作品。
01 | 團隊目標為生技公司打造出耳目一新的產品，並有好的 CTA 讓使用者透過網站能直接取得聯繫。02 | 角色與產出這個專案的成員只有我與一位前端工程師。我負責UIUX 與 Webflow 製作，從視覺設計到網站頁面皆獨立完成。03 | 專案挑戰這個專案期望能建立出生技公司的全新形象，並且在技術上首次嘗試用 Webflow 建立網頁。04 | 專案成果與影響最終依照品牌規範建立出架構完整的網站，Webflow 的運用大大減少前端工程師的作業時間，幾乎由設計師獨立完成網站。
【使用者研究洞察】
1. 網頁資訊不足 |
作為企業官方網站，必須要有充足的資訊來建立專業感，也能讓使用者清楚認識該企業，網站是企業門面，也是培養使用者信心的第一步。
2. 無法及時聯繫 |
許多官方網站並無即時聯絡功能，用戶必須透過電話、信箱，甚至加 Line 才有辦法聯繫，無法藉由網站直接取得聯絡。
3. 無法提交完整的需求 |
用戶在提交需求需求時訊息常常會不完整，透過表單讓使用者填寫可以彌補這個缺失。
【第一階段：網站企劃】
確認網站內容、需求、定位 |
悦懌生技顧問，服務內容包含：產品開發生產、工廠規劃、驗證輔導、口碑行銷，是B2B、B2C的企業型網站。 我們針對悦懌的事業體，去建立起完整的架構，並且深入去了解每個服務的完整內容，整理網站每個頁面的資訊，呈現出悦懌生技顧問的網站全貌。
確認網站整體風格 |
在 CIS 設計階段，已經規劃好整體的識別形象，因此網站的製作必須要保有一貫的風格調性，並且在這個基礎上，延伸出網站獨特的設計面向。 因此在網站設計上，沿用悦懌前期制定的「朝氣、延伸、溫暖」概念，配色用大量的黃與橘色，搭配透明度延伸出日出的意象，多處應用 logo 的橢圓狀，與品牌相呼應，並導圓角處理。 整體風格是溫暖簡潔的，呈現出專業信賴感的同時，仍保有溫度。
【第二階段：網站視覺設計】
A. wireframe 繪製
Desktop
Mobile
B. 精稿製作
首頁
關於悅懌
ODM
工廠規劃
驗證輔導
口碑行銷
聯絡我們
Mobile
C. webflow製作
webflow 平台可以高度自由的客製化網站，即使是設計師也能很方便的製作，悦懌生技顧問便是利用此平台架設出來的網站。
【第三階段：網站維護】
網站維護與更新 |
後續網頁內容的更新，可以在 webflow 很方便的進行維護，及時依照客戶需求更改內容。
