Role
UI / UX Analysis, Redesign
Period
April 2023
Tools
Figma
Member
Self case study

Background

Case Study Start

起因於發現 2019 年製作的 Jella! 母語式學習 App 宣布在 2022 轉移至 WORD UP 平台上課,Jella! 說明到因團隊的人力和能力有限,在平台功能優化和開發上,需要強而有力的夥伴一起實現理想,於是決定和 WORD UP 合作,WORD UP 將持續提供穩定、有助學習的平台功能和上課服務,而 Jella! 則專注於開發優質的課程和教材。

雖然實習結束後,並未在原公司參與產品更長期的迭代,但身為課程擁有者也下載了 App 進行體驗。

Discover & Define

App 定位分析

Jella! 過去召集志同道合的授課老師加入,使用母語式學習法流程授課,App 的使用族群大多為已購買課程的學員,以 App 來推廣課程的力度有限。

相對而言,WORD UP 是平台單位,能為想在平台開課的老師們製作貼近課程需求的功能,運用模組化的方式組合符合課綱的功能。其中也有許多課程與出版社教材合作,比起過去使用光碟學習口說,WORD UP 能為這些書本教材注入新的數位學習方式。是較為開放式的平台系統。

User Journey

根據對線上課程、母語式學習法的認識,實際使用 WORD UP 進行學習,並運用 User Journey 記錄體驗感受,作為優化的依據。

其中 WORD UP 平台提供幾項功能,對積極推進學習有很大的幫助。另外,在首頁瀏覽未購買的可體驗課程時,會以「加入書櫃」的方式放入使用者的課程清單,雖然要跳回首頁切換 Tab Bar 才能開始體驗,看似不連貫,但彷彿「加入購物車」般,在線上逛街時把所有有興趣的商品列入清單,再一次從清單內做比較,是個能讓人在體驗之後增加停留於記憶的時間、或是易於拿來比較的設計。

而體驗中最大硬傷是影片的讀取速度。日前 Google 以及眾多體驗分析皆指出網站速度(以及頁面速度)為影響體驗的重要排名項目。可能因資料量變多、同時間的使用人數增長,資料讀取速度慢會是影響 App 操作體驗的很大劣勢。

Homepage UI / UX Analysis

針對首頁 UI / UX 分析,第一眼可見所有資訊所佔面積接近,無法判定資訊層級,容易出現同等重要但不知從何看起的狀況。App 基礎顏色、元件與 WORD UP 連結性低。

功能體驗面分為兩項:

① Banner 右上角出現關閉按鈕,但實際操作是點擊後會切換下一張 Banner。

② 搜尋、篩選功能目前其實不相互關聯,但容易誤認為 Search Bar 下的按鈕能作為建議搜尋篩選的關鍵字。

Develop

Redesign Strategy

以提升視覺層級、帶入品牌感為主要目標。視覺層級主要提升閱讀的優先次序,降低視覺選擇障礙。而以中性色調為主,品牌色點綴為輔的方式,在首頁做較大面積的品牌顏色置入,上課頁面則小幅度的應用,以營造專注的語言學習環境為原則來設計。

Homepage Redesign

Note Taking Page

在觀察階段,老師會運用影片講解,學員可在影片下方隨時做筆記。WORD UP 此階段的畫面將做筆記的區塊蓋版幾乎螢幕 80% 的空間,無法對照影片中的內容進行筆記。而影片下方的「take note」非實際可以點擊做筆記的感應區,卻相對「insert note」在更為明顯的位置會造成點擊後無反應的錯愕感。

Redesign 以 wireframe 示意,將筆記輸入區塊展開於影片下方,確保影片與筆記輸入框能對照,縮減做筆記的步驟,提高操作順暢度。

Learning

反思與心得

雖然在社群平台看到一些既有會員對平台轉換有些排斥,但身為設計者與使用者的我實際操作後,WORD UP App 運用模組化組合課綱、練習題需求是更具有彈性的作法,模組的多樣性能使語言學習者有更多元的訓練方式,也可降低重複步驟的學習疲乏;對課程設計者也有更大的空間可以發揮。同時有些貼心的小功能,能協助學習的推進(e.g. 安排學習進度推播、自由的切換練習題或學習階段等)。期待 WORD UP App 未來的迭代發展,克服技術問題提升體驗。

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
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.

Next Project

Side Project - Second-hand Treasure App