top of page

 the Mimir-教育網站

用最簡單的方式,了解最複雜的中文

用最簡單的方式,了解最複雜的中文

教育

UIUX

Web

Side Project

02.jpg
​設計概念

科技的發達讓我們在學語言過程有各種多元的管道,然而過多資訊會讓人感到困惑、不知從何下手,尤其外國人總是因為複雜的中文字而感到害怕。

 

設計the Mimir教育網站,最簡單的方式了解最困難中文並介紹有趣的亞洲文化,閱讀的過程感到豐富及有趣,增加學習上的堅持,以電子書、影片的方式設計,使用戶通勤、在家...等地方皆可閱讀,「每日一篇學習中文從來不困難!」

網站痛點處
  • 整體視覺設計凌亂、單調,例如:每個元件距離、大小及顏色皆不同、...等問題,讓用戶在閱讀時感到雜亂

 

  • 設計網站UI較單調、顏色過多、許多元素在其中。

  • 電子書、文章、訂閱網頁,最大的痛點是資訊雜亂、重要資訊不更明確、體驗上不流暢,用戶在過程並沒有了解書本內容及使用時無法上手(如圖)。

the Mimir_優化前02.png
the Mimir_優化前03.png
優化後資訊架構
  • Sign up

在做訪談、問卷時有反應希望有更多註冊管道,選擇Facebook方式註冊考慮一方面幾乎人人都有此社群網站,另一方面考慮用戶可能不只一個Gmail登入時可能因為不知道是哪個Gmail而苦惱。由於是新品牌上架用戶並不多,因此將Sign up設為第二層Log in第三層

  • Article

從Magzine頁面點選才能看到Articles,找有興趣的Article不知道怎麼找,因此多新增Article功能讓用戶透過Filter找到想要的Article

  • Magazine

與上述問題相似,過程中找不到之前或有興趣Magazine只能一個個點選,因此Magazine及Articles面新增Filter用戶找到想要的Magazine及Article

  • Mentorns

Mentors功能是提供用戶選擇家教老師進行線上或實體教學讓中文更往上一層,但老師們也有提供​其他課程,使人不了解網站是什麼,因此將功能拿掉並未來規劃以副品牌與此網站做結合,讓用戶更加了解品牌概念

the Mimir 資訊架構圖.jpg
圖:優化後的資訊架構圖
Wireframe規劃設計
  • Home

本網站TA族群為外國人且對亞洲文化有興趣,外國人喜歡直白的設計了解網站為何因此打開網站點進Home就知道,設置Fan favourite及News Magazine可推薦給用戶,灰色區塊讓人區別並了解如何使用網站,最後接著再次提醒用戶加入會員

  • Articles

上方Recommend用戶直接知道現在推薦Article,有發佈時間(Annals)、是否付費(License)、程度(Level)、主題(Topic)篩選找到想要Article

  • Articles Content

排版上以「報紙」概念設計整齊、簡潔且讓人感覺看報紙,不會有看空中美語雜誌的枯燥感,並將資訊視覺化將劃分清楚

  • Magazine

尋找雜誌須不停尋找才能找到且button設置並不理想,這次利用篩選快速找到

  • Price

Price放置在導覽列、廣告形式呈現,讓使用上並無廣告過多且使用體驗並不流暢

 

  • Log in、Sign up及Change Password

之前的Login難以發現,因此讓Sign up與Login做切換感按鈕

wireframe.jpg
圖:優化後的wireframe圖
UI設計

從logo能感受此網站是具有專業性、簡約,因此元件都是長型設計並大量給圖片影片及運用品牌色則是選藍、紅、白使整體和諧、簡單及俐落並將相同插畫風格放置網站增添一點趣味

02.jpg
03.jpg
04.jpg
05.jpg
06.jpg
bottom of page