top of page
group member

​組長 : 彭藝晴

組員 : 史婷宇

潘宣伊

林晏嬅

​劉景昇

徐誠毅

ilearning作業繳交
start from 2021/09/16
tool : wix mirro figma

細部分工/參與

end to end:全員

stakeholder map:彭藝晴

end to end:全員

user訪問:全員

low fi:全員

mid-fi V1:全員

​mid-fi V2:彭藝晴 潘宣伊 劉景昇

mid-fi V2動圖:彭藝晴 潘宣伊

前期調研整理:彭藝晴

作品集流程&負責之成員

徐丞毅

​​1.我們成員(各成員負責的部分),做的專題,使用的工具,專題開始的日期,story。
2.原先的產品有什麽問題,我們選擇了哪一個痛點去解決。
3.針對這個痛點我們用了什麽方法去找出真正的問題所在,使用用miro/stakeholder map end to end 等等説明

史婷宇
4.找出了這一些痛點,我們設定了那一些潛在user,訪問了那一些人,做出了end to end journey來厘清整個交作業的流程
5.理出我們的user的 pain point和真正的需求,從而衍生出indentify、investigate那一個表格,基於上面這一大堆東西,我們開始做我們的APP

 

林晏嬅
6.show出我們的low-fi,以及如何迭代,説明我們APP想要解決的問題
7.組員和潛在user的feed back,展現我們優化的過程以及優化了什麽

 

劉景昇
8.mid-fi怎麽樣改善了我們找出的問題,以及使用的流程(可能會做成動圖)

彭藝晴

匯總/整理/修正/報告

潘宣伊

​排版重新修改/上傳

首頁
Project selection
I-LEARNING

i-learning是中原大學官方的網頁,學生的教材以及繳交作業等等的工作項目都在這個平臺進行,但這樣一個舉足輕重的平臺卻有著不完善的界面設計,造成許多初次使用的user都無法清楚如何進入或是使用i-learning

​因此我們的團體決定調研I-leaning並找出其可以改善的地方,設計出一個新的APP改善其一個部分的問題。

ilearning.jpg
F19FC793-1F05-4F59-8D40-854748680025.jpg
    User Story

1.學生找不需要繳交的作業

2.結果成績不及格

3.發現其他人都也覺得不方便

4.把雜亂的版面更改成清晰的版面

5.學生使用更新的網頁完成繳交

6.學生完成繳交完成學業

User   : 老師與學生

問題點 : 作業繳交和收作業時的困難

開始項目
​初期統整

      在確認設計主題後,我們開

始對我們的產品做一些初期的統

整。

 

我的課程:排序混亂,沒有快捷

的方法讓學生馬上找到自己想找

到的課程

開始上課:不熟悉界面操作的老

師不瞭解如何上傳上課資料,學

生也難以找到自己相應正確的學

習資料(有時候舊資料和新資料

會混在一起,沒有分類)

作業/報告:不熟悉界面操作的老

師不瞭解如何開設交作業的畫面

繳交作業的期限有些老師不知道有

設限時間,造成學生和老師之間有

誤解。

統整.png
統整1.png
發展方向

上述三個項目中作業/報告是我們最好入手改善的項目

對學生影響較大
​原先版本沒有經過分類
作業繳交區有更多可改善的方向
em.png
empathy map

empathy map的思考方式。

透過不同的層面去思考了各個user可能面臨的苦惱,也用來決定我們所想的方向。                                   

「作業繳交的作業內容
「​自動提醒鄰近作業繳交」

並都是有關作業繳交的部分所以我們決定以,作業繳交區當作專題方向題方向

AS-IS JOURNEY

在AS-IS階段,我們設定了三個不同模式的user

  • 很常在繳交期限前一天甚至更短時間趕作業的大學生

  • 會提早或如期交作業的學生

  • ​第一次使用ilearning的老師

階段摘要

在這階段我們得知了每一個假設的user在不同情況的user的心理狀況,而在此過程我們假設出來的結論則是user都一致性的給與了ilearning較差的回饋。

as is 學生.jpg
as學生step.jpg
1好學生2.jpg
AS IS 學生2-2.jpg
as老師.jpg
AS IS 老師-2.jpg
Stakeholder map

         我們運用了stakeholder map 來尋找出我們使用者真正的pain point。

stakerholder56.png
學生在ilearning上的問題:
           

1.在繳交作業時文件太大會有無法上傳的問題凌晨一點三點

到三點無法進入

2.不用繳交的作業也會遺留在作業繳交區造成混肴

3.老師對ilearning的熟練度會影響課程資料的排序,從而

影響到學生的瀏覽。

4.會一直影響無用的視窗,影響繳交時的流暢度,特別是文

件特別大,趕著交作業的時候。

教授在ilearning上的問題:
           

1.東西丟到ilearning一旦洗版就會消失不見,如果是設計

系的老師需要對圖像打分的時候會有圖片預覽無法預覽的問

題,需要特地下載會很麻煩。

2.ilearning算是官方認真的區域,可以直接把記錄直接

上繳給教育部,因爲此會以ilearning爲主,而重繳交照

時間排得所以作業一多看了就很亂,同時也會影響教學評

量。

3.第一次使用的時候有很多選項會忘記改很多選項像在成

績佔比的地方沒改到之後打分數就會很麻煩,因爲每一節

課程的比重會各有差異性

stakerholder5.png
interview
​week1-2

受訪人數:6

受訪人:土木系的大四廖同學

訪問結果摘要

  • 較大的文件無法在ilearning上繳交

  • 絕大多時候都是透過第三方平臺交作業,因爲老師認爲ilearning不好用

  • 會有太多與本學期無關的作業顯示在同一個畫面上

  • 未完成作業是一個綜合的數字,導致自己有很多作業未做完的假象,如果能自己分類會更好。

  • 未完成的作業會有一個橘色點點提醒,但有一些作業根本無法打開(因爲和本學期無關)希望會有更好的提醒設計。

  • 查看結果的這個功能很鷄肋,不知道是顯示自己的結果還是一整班的結果。

訪問.jpg
訪問3.jpg

受訪人:理工科老師

訪問結果摘要

  • ​不會刪除學生的作業,為日後同學方便查看自己以往的作業

  • 上傳圖片比較麻煩,也不能直接複製貼上文字
     

受訪人:產品設計專任老師

訪問結果摘要

  • 無法預覽作業要一個個下載,非常耗費時間

  • 非同步的課程需要上傳較大的文件,這一點也頗爲耗時

訪問3.jpg
week2訪問3.jpg

受訪人:大三林同學

訪問結果摘要

  • 認爲ilearning的分類沒有經過設計,依然十分雜亂

  • 檔案大小限制一開始會對交作業的流程有影響,需要額外注意自己的檔案是否會過於龐大而影響繳交。

  • ilearning的整體體驗在電腦上會更加好。

受訪人:商設系大三的同學

訪問結果摘要

  • 必須要刪除舊有的作業才能上傳新的作業,兩者容易混肴​

  • 透過我的課程,再進入作業繳交區域

  • 需要有可以看見作業叮嚀的區域,以防自己寫錯

  • 橘色進度條時間交代並不清晰,不知道有什麽用

訪問2.jpg

      承接上面的階段,我們推導出最能發展的user,以及從這一些潛在user或者已經是user的人進行做訪談,以進一步瞭解ilearning背後可能會有的可改進空間。

week2訪問2.jpg

受訪人:通識課的助教

訪問結果摘要

  • 學生需要重交作業的話對於增加工作量不大,但只僅限於學生數量較少的情況下,有時候會直接選擇再重新開一個區域

  • 最常用到ilearing的課程都是通識課,但是通識課不太會用到上傳作業的部分。

進度條2.png
老師在ilearning上的問題:
1. 收作業時無法預覽
2. 會有一些多餘的功能與資訊
進度條.png
學生在ilearning上的問題:
1. 雖然有兩個查看作業管道但其中一項因為分類不好所以使用體驗不好               
2. 會有一些多餘的功能與資訊
3. 作業要求時常標示不清
4. 無法確認老師是否有接收到功課

 
作業.png


結論

1.需要分隔開不同學期的作業而非參雜在一起
2.需要有更直觀的提醒來顯示作業未完成
3.開始作業這個環節應顯示老師對於作業的要求,這樣user則無需再反復確認作業内容
4.由USER自行判斷作業的重要性,從而分類作業

​受訪者背景&特點
截圖 2022-01-07 下午2.02.02.png
截圖 2022-01-07 下午2.06.55.png

許多同學和老師在作業繳交的部分有操作上的問題,也常常因為一些混淆資訊在操作時的不順利,因此我們針對一些痛點讓操作更順暢。

截圖 2022-01-07 下午2.19.55.png

不同立場的使用者有不同的體驗感受,我們也在這方面的調查讓改善作業繳區有更完善的改進。

​當學生使用ilearning時

截圖 2022-01-07 下午2.26.04.png
截圖 2022-01-07 下午2.26.09.png

作爲學生需要登入ilearning進入作業繳交區域繳交作業,并且在開始上課區域查閲教材,以完成課程内容,完成老師交代的作業,確保自己能順利完成課程。

截圖 2022-01-07 下午2.25.54.png

​當一個老師使用ilearning時

截圖 2022-01-07 下午2.31.00.png
截圖 2022-01-07 下午2.30.50.png
截圖 2022-01-07 下午2.30.45.png

作爲老師需要登入ilearning檢查學生作業給予相對應分數,也必須要藉由ilearning發公告給學生課堂上的注意事項和提醒。

LOW-FI

1.我們想呈現作業繳交的區域可以更清楚明確,未開放與時間逾時作業區可以虛化或是間隔讓學生更一目瞭然目前需要繳交的作業。

2.希望可以根據不同科系不同的作業需求做調整,例如理科文科設計系要繳交的作業都不太同,希望可以根據文件或圖檔或是大檔案做作業繳交調整。

4.學生需要繳交作業完成老師代辦事項並且拿得分數

5.學生需要藉由繳交作業複習老師上課進度並完成當日功課

6.學生需要有每個科目統整的好的作業資訊中知道這禮拜需要繳交的部分

1.學生在針對需要繳交作業的項目會被其他不在期限內或是未開放作業影響

2.學生沒有作業提醒會導致忘記作業期限

3.沒有統整好期限內的作業會導致不同科目的誤導或是遺忘

​希望改善上傳作業和查閲内容混亂難以整理的問題

low-fi

鎖定需要解決的問題後,開始設計介面流程。

​我們做參照的對象爲IOS15系統

ilearning手機介面:
學生繳交作業的流程及版面設計,第一次先做出三種版本。

要解決的問題:
1. 整理ilaerning排版畫面
2. 簡化過多的資訊,只擷取必要的功能
3. 優化繳交作業的流程(從前面調查作業結論出需要優化的點)

1.png
2.png
3.png

找出前一次設計不足的地方,優化三個版本的介面設計。

改進的地方:
1. 增加下拉選單
2. 增加防呆彈窗
3. 豐富細節,完善介面流程

4.png
5.png
6.png

整合第二次優化的三個介面,設計更詳細且有標準規範的介面。

7.png

改進的地方:
1. 參考apple設計規範
2. 設定按鈕顏色
3. 統一字型及大小
4. 更加詳細介面內容及流程

mid-fi V1

Feed Back

1.文字過於多
2.介面設計屬於舊有的介面設計,不符合現在市面上現有的介面
3.迭代不完整,有過多重複的按鈕
4.(最主要的問題)看到作業的未繳交數量是最重要的,但是我們的首頁看到的不是作業而是課表
5.Mid-Fi的作業繳交環節設計基本上和電腦版一樣
6.Tab bar的功能不夠清楚(使用模式不合邏輯)
7.顯示作業繳交的區域信息量過多

mid-fi V2

改進的地方:
1.能夠更加直觀的觀察到自己有多少已經完成和未完成的作業
2.更專注在作業繳交這個環節,捨去了看作業,換學期等等的功能
3.每一個作業都有自己的封面,更好的辨識和分類是什麽作業
4.有更多的方式可以進入到開始作業,看作業信息。

Feed Back

474161.jpg
474162.jpg

1.界面的首頁不錯可以很清晰的看見有什麽作業需要做,以及自己做了什麽作業
2.希望收藏的類別可以有不同顔色的分類
3.倘若作業沒有照片可以以純色作爲代替而非顯示沒有照片
4.訊息功能很方便可以直接俄進入開始作業的環節

THE PROBLEM WE SOLVE

version1  vs  version2

在這一個階段我們透過課堂上同學、老師以及潛在user們的feedback從V1改進成

登入頁面

截圖 2022-01-05 下午4.31.12.png

​首頁

v1

v2

截圖 2022-01-05 下午4.12.53.png
截圖 2022-01-05 下午4.34.12.png

V1版本首頁為課表但V2版本首頁為作業分類更貼近使用者需求

​課程通知頁面

v1

v2

螢幕擷取畫面 2022-01-05 185028.png
螢幕擷取畫面 2022-01-05 190135.png

V1版本沒有分類V2有依照課程分類

​點選作業區

v1

v2

截圖 2022-01-05 下午4.13.19.png
截圖 2022-01-05 下午4.34.12.png

​作業內容顯示區

V1沒有明確分類已完成和未完成V2可以一眼就看出來那些事已完成哪些是未完成並且有小圖像可以看出來作業是發布甚麼

v1

截圖 2022-01-05 下午4.13.52.png

v2

螢幕擷取畫面 2022-01-06 011013.png

V1沒有圖像顯示的功能V2有並且有較大的截止日到期通知使使用者能夠容易注意到要繳交的日期

​作業繳交方式

v1

截圖 2022-01-05 下午4.14.13.png
螢幕擷取畫面 2022-01-06 131120.png
作業 (1).png

v2

申論題

文件類

V2區分作了兩種作業不同形式而區分成兩種不同形式的頁面

​上傳畫面

v1

v2

螢幕擷取畫面 2022-01-06 141559.png
螢幕擷取畫面 2022-01-06 141628.png

V1版本沒有上傳的頁面V2版本更加貼近IPHONE使用者習慣

1.學生沒有作業提醒會導致忘記作業期限

2.沒有統整好期限內的作業會導致不同科目的誤導或是遺忘

3.學生需要有每個科目統整的好的作業資訊中知道這禮拜需要繳交的部分

​4.已繳清和未繳清作業會混在同一個區域,無法直接看到自己實際上看見自己真正需要繳交的作業還有多少個

5.需要區分快過期的作業,未繳交以及已繳清的作業

PROBLEM:
 

SOLUTION:
 

​1.使用星星記號標註重要功課令學生部會忘記重要作業

2.根據每堂不同的客劃分不同的區域

3.把已完成和未完成分開簡潔明瞭

截圖 2022-01-05 下午4.31.27.png

PROBLEM:
 

1.在查看公告前需要先選擇課程,但顯示的課程選單也有顯示前面幾個學期的課程,然而學生並不需要查看上學期、甚至更久以前的公告,導致課程公告顯示的不必要的訊息太多。

​2.選擇完課程之後,可以找到該課程的課程公告板,就可以按照由新到舊的順序查看公告,但其實顯示的公告不完全只有該課程的公告,有時會造成誤觸。

3.學生需要通過課程公告,來確認該課程所需準備的事項,以確實完成老師發布的任務。

SOLUTION:
 

​1.在通知頁面有課堂分類可以選擇並且上方會顯示當前學期

螢幕擷取畫面 2022-01-05 190135.png

​繳交作業:文件類

上傳作業

上傳作業

播放影片
  • user點擊上傳文件後選擇欲上傳之文件,按「send」後將會跳出蜂窩網絡之提醒,若user選擇不在詢問後未來將不會再跳出該提醒。

  • user欲繳交作業時APP將會彈出框框讓user作最後確認,確定繳交後APP也會跳出繳交成功之對話框,并跳回首頁。

刪除文件

刪除文件

播放影片
  • 若user發現自己上傳錯文件,可以往左拉滑,以刪除文件。

​繳交作業:文件類

申論題

申論題

播放影片
  • ​user若未輸入内容將無法繳交作業

  • ​在輸入内容後若超過畫面,可以透過上下滑動確認自己輸入之内容,檢視後確認輸入完畢即可點選鍵盤的return或畫面任一位置後點選繳交作業,APP會作詢問是否確認繳交,若確定則會跳出成功繳交之對話框并跳回首頁。

申論題-返回

申論題-返回

播放影片
  • 該APP將不會保存user輸入之内容,因此在未繳交的情況下按返回將會跳出對話框提醒。

動畫呈現
作業分類及提醒功能

登入畫面

登入畫面

播放影片
  • APP登入之畫面

  • ​首頁將顯示每一課程有多少作業未完成。

訊息

訊息

播放影片
  • 訊息功能用於提醒user有新的作業發佈,或是老師發佈了與作業相關的訊息。

  • ​若user有未查閲之信息小鈴鐺將顯示紅色點點以作提醒。而點進小鈴鐺後未查閲之訊息將會有藍色點點作爲分類。

  • ​user若只想查閲單一課程訊息則可以點擊右上角之圖示以作篩選。

  • ​user點擊課程發佈之訊息後會自動跳到該作業詳細訊息之畫面。

收藏作業

收藏作業

播放影片
  • 收藏作業的功能用於user自行判斷作業重要與否而進行分類。

  • 點擊課程名稱左側之星星則可將該課程所有的作業進行收藏,再按一次則全部取消,也可單一選擇課業選擇收藏。

  • ​點擊Tabbar中的星星,則能夠進入到已收藏之作業。

  • user點擊課程後會自動跳到該作業詳細訊息之畫面。

feedback

feedback

林晏嬅
接觸了很多以前沒看過的設計工具,還學習了一整套設計介面的流程,覺得新奇之外也收穫良多。介面設計是我見過最複雜的設計類別,光是前置調查就花了很多時間,所以感謝我的組長及組員,大家作業都有準時交,討論也都很認真。尤其是組長,大部分時候都是組長在教我們做、發派每個人的任務,組員有問題也都會耐心回答,非常盡責。下學期的話,希望教材部分多一點中文,至少重點內容有個中英文對照。

劉景昇  
上完這堂課這之後我才發現原來事前的調研是那麼重要,學習到了很多不同的問法還有如何問出使用者的重點需求。在團隊合作的部分很感謝大家的幫忙,尤其是組長幫忙了很多在我們不懂的時候組長都會耐心講解。在課堂的進行也是收穫良多學習到了很多新的設計知識還有許多的規範和步驟

潘宣伊  
這堂課讓我知道如何用figma做介面,我很感謝組長對我們的照顧,有很多事情都是她上完課後再教我們的,訪問也是很有趣的環節可以認識許多新的朋友和知道更多不同的觀點,我也了解了UI/UX的前置作業有多麼費時間,我希望下半學期的互動介面的課程可以改成全英文授課,因為其實課程教材都是全英的了。

彭藝晴
UI,UX對我來説依然是未完全瞭解的領域,畢竟短短的一個學期并不能完全學會做UI設計的技巧,但算是讓我們試了水溫,也提起了我對UI設計的興趣。整體下來而言我得知了所謂“有邏輯性”的做設計是怎麽一回事,as-is用於假設 end-end 用於初步瞭解,到了interview就是驗證前面全部的假設,每一步都是規規矩矩有跡可循,再透過不斷的統整和梳理,修正出適合user的UI,這是一個漫長的過程,長到甚至可以用來做作品集,對於UI設計能夠作爲作品集,這是我意料以外的事情,倘若未來有機會的話我會希望有相應的UI課程可以修讀。每個成員都會有自己的事情需要做,因此需要約定一個固定的時間共同辦事於我來說是一件困難的事情,因此我i們大多時候都是在綫上直接分配工作給組員,當然組員也有主動提出討論的時候,而組員的參與度也會大程度的反應到成果上,大家都會完成我所下達的任務,不失不過。

史婷宇
在一整個學期下來我大致上了解了改善APP的一整個流程對於課堂上其實有很多并不太了解的東西,但是都能夠透過在網絡上查詢,以及詢問組長而得到解答,很大程度上深切的感受到團隊合作以及分工的重要性。對我而已最有用的是訪問階段的技巧,因爲我未來并沒有打算成爲UI或是UX設計師,但是訪問這一環即使是用在產品上也能夠適用。訪問的提問也比想象中的需要經過思考。  組員方面我認爲我們組的帶領上,組長是有完成他的職責的,每周也有將需辦事項好好分工給我們以及跟進我們的工作進度,遇到不會的問題也可以向他詢問。而其他的組員包也會做好組長交代的工作,有時候或許沒有在設定的期限内完成,但最後一定會完成組長交代的工作。大家的配合度都尚可。

徐丞毅 
在經由學期的學習,不僅學習到了前期的準備,對於使用者真正的需求,還有後期對產品的實際改善效果用許多方法來實測的實際辦法,老實說一開始真的完全聽不懂,而且又是英文,每次要做階段報告時都要去問別組意見或是跟組長討論。雖然過程挺辛苦的,但學到的東西相對於其他課程真的相對專業很多。

bottom of page