HPVcancerbye

教育型網頁也適用行動優先設計,讓資訊變得更清晰

2022

Website

https://www.hpvcancerbye.com/

專案介紹

這次來跟大家分享我們設計團隊最新的作品HPV八成與你有關  ,相信大家可能會對於設計一個教育網站研究UI/ UX的過程、經驗可能會有興趣。HPV八成與你有關 並不是典型的教育網站,它的目標除了教育 HPV 知識之外,還需要把特定客群引導到診所並施打疫苗。因此並且做出符合完全 Mobile Friendly 設計的網站是我們首要任務。

HPVcancerbye

背景與挑戰

客戶想解決一直以來有的用戶問題,並創建身臨其境的線上體驗,這些問題包括:

- 因為每時期都有不同的Campaign資訊在同一個網頁上,讓用戶發現很難找到特定訊息,甚至不知道在哪裡尋找特定內容。因此重新考慮網站的訊息架構以提高內容的可發現性。

- 由於其用戶角色的多樣性,HPV八成與你有關在許多其他類似教育網站中是獨一無二的。透過不同病症來找到相對應的用戶,每個人都可以從網站中找到價值及資訊,因此很難確定一個理想的主要用戶角色來設計網站。

我們透過簡化信息的分類,來並確保所有用戶都能輕鬆地預先找到關鍵細節。

專案過程及成果

我們為每個用戶角色及病症設計了獨特的 icon,並在全站都使用以增加熟悉度。由於一般教育網站文字繁重,我們大量使用平面插圖來打破單調,降低內容的複雜性。我們在插圖中使用柔和的顏色綠色、咖啡色、黃色、米色等來增加文本和視覺效果之間的對比度。

設計一個教育用的網站一般來說可能沒有這麼有趣,設計團隊用了大量的平面插圖來打破教育網站常常會遇到的困擾,像是訊息過多、單調內容等問題。團隊利用 lottie HTML5 動畫巧思優化整頁的資訊與 CTA 按鈕,確保用戶透過大量的懶人包 infographic 去了解 HPV 的衛教資訊與 HPV 疫苗,確保用戶可以在最短的時間內看到重點引導至正確預約資訊欄。

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.