PROJECT DETAILS
2017-2018
UI Design / GUI Design / Prototype / Concept / Education
Sketch, Photoshop, Illustrator
DESCRIPTION
芝士公園為一個教育項目，與寧波萬科共同合作，芝士公園以教育為核心，建設形成教育培訓、教育產業孵化+配套教育辦公、國際公寓、以及教育配套商業+特色商業等業態聯動，APP 中的課程主要針對學齡前及中小學孩童，用戶為孩童的父母，可在線選購課程，也可實時關注孩童的動態，各項有關教育的服務及配套，用戶皆可透過在 APP 使用及查詢，目前僅有孩童之各項課程，往後將會陸續增加成年人課程可供選擇，用戶可透過自己及孩童的興趣愛好為自己及小孩們選擇適合的課程。
THE CHALLENGE
芝士公園為寧波萬科的教育項目，小兒教育的培養為現今為人父母最為重視的，所以打造一個教育項目是需要完整的準備及配套，芝士公園有著一整個園區，由於年齡較小的孩子們活躍性較高，所以孩子們的定位也成為了必要功能，孩子們的動向也是父母關心的，孩子們走失是父母最為擔心的，所以有著孩子們的精確位置，即便沒有當場看著，父母也能安心許多。課程的選取也是父母為孩子操心的，所以課程的介紹、師資團隊的介紹，也是很重要的一環。
THE PROBLEM
小兒教育的培養已成為父母最為關心子女的成長教育之一，人們常說孩子不可輸在起跑線上，尤其在獨生子女眾多的國家中，父母對於孩子們的教育是特別花心思的，盡可能地給予孩子們最好的，期望他們在學習的路上能夠更上一層樓，所以教育項目為近年來萬科的拓展業務之一，希望打造一個配套齊全的教育環境，不僅讓孩子能認真學習，父母陪同等待時，也有地方可以打發時間。現在的孩子，一週在學校外上的補習課程也相當多元，可能家長會忘記孩子的上課時間因而錯過，這樣可能就浪費了一次學習的機會，如果有個提醒功能，或許可以降低錯過課程的機率。課程主要針對學齡前及中小學孩童，所以課程目前偏向低齡的孩子們，在課程上的安排屬於較多才藝體驗課程，讓孩子藉由玩樂來開發潛能，所以在界面上的安排雖然是給家長使用的，但孩童也能一起參與選課的過程，選擇自己所喜愛的學習。
THE SOLUTION
由於教育上的不可或缺性，項目的規劃就尤其重要，課程的娛樂性、獨特性及師資也是吸引家長及孩童的選擇，雖然目前的課程偏向才藝課居多，但對於年齡偏低的孩童們，開發小腦是至關重要的，幫助孩童的教育發展，家長其實佔了不可或缺的位置，如果在週末空閒時間，家長能陪同一起去上課，對孩子們的關注多一些，也能幫助孩子們的成長，儘管只是陪伴上課的路程，等他們下課，路上一起聊聊天，也是很有益處的，在等待的時間，家長們也可到周邊的商場逛逛，可放鬆自己也可替寶貝們添購所需物品，園區有些設備屬於智能化，用戶們可藉由 APP 停車付款及室內地圖⋯等，藉由芝士碼可於商家中購物付款，還搭配了音樂廳，可讓家長與孩子們安排時間前往聆聽感受音樂的美，放鬆心情。
DESIGN PROCESS
THE PROBLEM
低年齡段的孩子雖然主導性弱，但已有自我意識，他們在選擇課程上其實也有很多的意見及困惑，父母在選課時也可以多加詢問孩子們的意願程度再進行購課的動作。低年齡段的孩子注意力較高年齡段的孩子差，所以在課程選擇上就需要以孩子們的興趣度作為參考。孩子坐在一個位子上的時常要過長，他們便會有些躁動，所以對於孩子們上課情況也是家長所關心的，希望自己的孩子能專心上課學習到課程所教學的，如孩子們不感興趣的課程，有可能會因此跑出教室或者出了教學樓尋找樂趣，也可能因為這原因導致意外的發生，為了讓家長放心，我們需要有相應的功能，家長可實時了解孩子狀況，避免不必要的意外出現，孩童的學習固然重要，生命安全更佳重要。
THE SOLUTION
芝士公園的主要用戶為孩子們的家長，孩子們的年齡段主要在學齡前及中小學，而學齡前的課程目前居多，雖然不是孩子們使用我們的 APP ，但介面上我們還是希望設計的偏適合孩童一些，較為可愛一點的風格，孩子們可以一同參與選課，看見可愛的介面，對於上課能更加感興趣，家長們也可藉由 APP 與孩子們一起討論課程，選擇雙方皆滿意的課程學習，我們還設計了吉祥物 - 芝士貓來做一個主角色，它會出現在許多地方或者搭配運營活動出現在其中，增添更多樂趣。功能流程的佈局，我們採用了與電商相似的步驟，不打亂原有用戶的使用習慣，對於選課購課的步驟，我們也設計了不繁雜的步驟，能讓用戶在步驟的引導下完成交易，也可在我的頁面中查詢自己添購的課程，我們也在首頁配置了課程任務，讓用戶可以一目了然並提醒即將開始的課程，也設置了課程簽到，在簽到後將實時定位孩子的位置，也可觀看孩子的上課情況，如孩童出了教室及教學樓，家長將會收到警報，這對家長來說可以掌握孩子的行蹤，以避免孩子走失的情況。
USER FLOW
PROTOTYPE
TYPEFACE & COLORS
PROJECT DESIGN
主要介面設計『首頁』
芝士公園為一款教育類App，所以採用活潑一些的顏色作為主色調及搭配，黃色作為主色調，輔助色彩用藍色、橘色及紅色做為搭配，輔助色則用了些許漸變現得更加有活力，icon的設計也選擇較為卡通且可愛的方式作為主軸，雖然用戶基本上為家長所使用，不過基於App目前定位為中小學教育類，所以畫面整體感覺還是採用較為鮮豔及生動的方式作為主設計思維。整體佈局與一般市面上App相差不多，設計以標題及間隔做區分，可使得畫面層次分明，有利於用戶快速尋找到所需的功能。
主要介面設計『課程商城』
課程商城這個頁面有著較為複雜的兩層篩選功能，所以採用兩種不同的欄位顏色及方式去做設計，讓用戶不容易混淆，且第一個篩選欄為篩選類別，這為主要篩選功能，第二欄為細節篩選，這功能就較為其次，不過用戶可透過更多維度的篩選去尋找到自己所想要的，如果他/她不知道關鍵字卻想搜索，那這篩選是最適合不過的功能。課程列表採用一般方式，一邊是圖片一邊是文字的方式呈現，不過有一點不同為我們將報名日期加於圖片上，因為這對用戶來說想參與課程，最重要的就是需要報名購買課程，所以日期為重要項之一，由於這為重要資訊，所以我們加於顯眼的地方卻又不搶課程費用的重要位置。調研結果得到課程費用是用戶們最關注的信息，所以使用了紅色最為重點提示並且也將字體放大。
主要介面設計『我的』
我的頁面中，由於購買功能是用戶在使用App最常使用且最為關注的功能，所以我們將購課單、待付款、已付款及退款至於頂部，且搭配icon做為標示，更加清楚地讓用戶一目了然，進到我的頁面也能迅速地找尋到目標，其餘佈局及設計則使用列表式的方式呈現，也因為它們為次要功能，不需要過於搶眼，且讓用戶進到頁面時，不易失去當前焦點位置。
主要介面設計『課程表』
課程表頁面可以查看各學員的課程情況，及上課狀況，且能在左上角的位置切換學員，如果用戶有多位學員，當前日期為橘黃漸變，如想查看其他天的課程安排，可點擊任一日期即可，點擊的日期將變為橘黃漸變，當日日期則將變為灰色，點擊右上角的”今天“，便可快速回到當日。每點擊一個日期，下列表會顯示該天課程的相關信息，如當前為課程正在進行中，用戶便可觀看孩子的上課情況，這在我們的用戶調查中發現這功能極為重要，大部分家長都很關心孩子們的上課狀況。
主要介面設計『課程詳情』
這為課程詳情頁面，有關於點選之課程相關資訊皆會在這頁面中展示，如用戶認為合適便可在此頁面點擊購買進行購買課程的動作，詳情內容可幫助用戶更加了解課程是否適合孩子們。設計佈局也採用簡潔乾淨的設計，將重要資訊以顏色及字體大小做區分，如有需icon輔助辨識也有做設計，以便用戶即時分辨。
