學朋 Open｜共學社群線上學習平台

Date: 2023.07.20-0802 (2 weeks)

Role: Lead Designer — Feature Scoping, Research, Interaction Design, Wireframing, Prototyping

Members: Amy, Mina, Mou, Stoos, 0方

Overview

在疫情期間，由於居家隔離、居家上班上課等因素，帶動線上學習產業的蓬勃發展。根據資策會 MIC 在 2021 年的統計，有四成用戶選擇使用線上平台進行學習，而付費使用的比例更是年增 15%。這顯示了人們對於線上學習的日益重視，也反映出知識學習產業持續增長的趨勢。其中，各家學習平台也紛紛崛起，各自擁有獨特的特色和經營方針。在這樣的背景下，本團隊將聚焦於特定目標族群，透過深入了解目標群體的需求和特點，打造一個符合使用者期望、滿足共同學習需求的平台。

My Challenge

在這個專案中，我擔任了組長的角色。由於該專案僅有兩週的規劃和製作時間，且大多數組員都非 UI/UX 領域工作者，同時也都有全職工作，這導致實際能投入專案的時間及如何執行專案的知識相對有限。因此，如何在僅有14天的時間內順利進行會議、確保順暢制定專案方向，同時合理分配並協調組員的工作成為本次專案的一大挑戰。透過積極的主導、明確鎖定目標範圍，以及其他組員的積極配合與互相協助，我們最終成功如期實現了本次專案的階段性目標。

Identifying the Target Customers

透過產品探索，我們將目標客群鎖定在設計領域中的初階設計師。他們通常擁有自我進修並積極探索新知的習慣，然而卻經常面臨缺乏與其他共同學習者交流的管道，同時也會希望能找尋相關領域的導師，以深入了解更多職涯規劃的可能性。

目標族群

・

設計領域中的 Junior Designer

行為

・

平時會自行尋找各種學習資源 (不只有設計相關)

・

個人學習為主，沒有其他夥伴一起學習

・

以輸入為主，比較少輸出練習交流的機會

需求與目標

・

希望精進設計技能，並希望有跨領域技能知識

・

希望能和其他設計師共同交流

・

希望找尋 Mentor 、了解更多職涯規劃

目標族群

・

設計領域中的 Junior Designer

行為

・

平時就會自行尋找各種學習資源
(不只有設計相關)

・

個人學習為主，沒有其他夥伴一起學習

・

以輸入為主，比較少輸出練習交流的機會

需求與目標

・

希望精進設計技能，並希望有跨領域技能知識

・

希望能和其他設計師共同交流

・

希望找尋 Mentor 、了解更多職涯規劃

Defining Key Differences in Motivations Through Competitive Research

我們將市面上常見的教學軟體分類為四個象限：「單一專業」、「多元課程」、「錄播」、「直播社群」，參考組員們自身使用過各家平台的經驗歸納出各優勢與痛點，最終結合社群以及即時直播兩個概念，將產品定位於可提供多元專業實戰課程，串連有共同目標的學伴一起學習交流、互助的共學社群線上學習平台。<View Detail in Figma>

Creating Structure and Narrow Down the Scope

為了讓專案能順利按照時程規劃完成，我們根據製作的網站地圖將本次專案目標更近一步地聚焦在「首頁」、「課程分類」、「課程列表」、「課程簡介」這四項主要功能頁面的執行上。接著便依照這四項主功能進行使用者故事的探索及推演。

web map

Exploring the Customers Needs (User Story)

最終我們可以更明確地知道本次專案需要面對的問題為何，以及實際需達成的目標

最終我們可以更明確地知道本次專案需要面對的問題為何，
以及實際需達成的目標

最終我們可以更明確地知道本次專案需要面對的問題為何，以及實際需達成的目標

Project Goal

如果我們能夠讓首頁分類清楚、直觀，除了要讓使用者可以更容易找到合適的課程、並前往課程內容頁面、了解課程資訊並購買課程，使用者也可以一目了然地看到自己所購買的課程的學習進度

專案範圍

將首頁課程分類及介面規劃清楚，幫助使用者快速找到合適的課程。

・

搜尋列 UX 選項：讓使用者可以快速篩選特定條件來找到合適的課程。

・

學習進度、即將直播的課程區域：讓使用者可以快速上課並安排學習進度。

・

課程分類選項：讓使用者可以探索特定課程類型。

專案範圍

將首頁課程分類及介面規劃清楚，幫助使用者快速找到合適的課程。

・

搜尋列 UX 選項：讓使用者可以快速篩選特定條件來找到合適的課程。

・

學習進度、即將直播的課程區域：讓使用者可以快速上課並安排學習進度。

・

課程分類選項：讓使用者可以探索特定課程類型。

專案範圍

將首頁課程分類及介面規劃清楚，幫助使用者快速找到合適的課程。

・

搜尋列 UX 選項：讓使用者可以快速篩選特定條件來找到合適的課程。

・

學習進度、即將直播的課程區域：讓使用者可以快速上課並安排學習進度。

・

課程分類選項：讓使用者可以探索特定課程類型。

非本次範圍

・

根據使用者過往的搜尋紀錄自動化推薦課程

・

購買課程流程

・

購買課程後學習流程

・

使用者註冊時的偏好興趣導向調查

非本次範圍

・

根據使用者過往的搜尋紀錄自動化推薦課程

・

購買課程流程

・

購買課程後學習流程

・

使用者註冊時的偏好興趣導向調查

非本次範圍

・

根據使用者過往的搜尋紀錄自動化推薦課程

・

購買課程流程

・

購買課程後學習流程

・

使用者註冊時的偏好興趣導向調查

為了將首頁課程分類及介面規劃清楚，幫助使用者快速找到合適的課程，本次專案將會著重於以下三個部分：「搜尋列UX選項」、「學習進度、即將直播課程區域」以及「課程分類選項」。

Problem Statement

使用者在平台上看到玲琅滿目的課程不知道要從何找到符合自己需求的課程
使用者在想要上課時，需要耗費許多時間找到自己購買的課程以及學習進度

HMW (How might we)

我們如何幫助使用者快速找到適合的課程，並且能夠快速瀏覽已購買的課程及上課進度？

ＵI Mockups Device—For PC Web

我們優先以 Web 版進行 UI mockups 設計。  考慮若學習項目為專業技術技能類，本身所使用的設計工程軟體介面複雜，使用手機、平版等螢幕尺寸較小的裝置觀看，會不易於學習者觀看授課老師的操作動作。未來，我們計畫根據行動裝置的規格，進一步優化後續的設計，提供更好的使用體驗，也能確保學習者在不同裝置上都能輕鬆學習，讓學習更加便捷與流暢。

Principles

活潑簡潔

對於網站的使用者介面，必須設計出易於使用又好看的界面，讓學習者容易瀏覽和搜尋符合自身需求的課程。

易於導航

針對網站上不同的功能區域，要有合理的資訊結構，確保學習者在網站上會找到他們需要的資訊。

清晰明確

如課程名稱、活動優惠、有時效性講座等都要以清楚的方式呈現，以激發學習者對課程的興趣。

Wireframing

在做視覺規劃的同時，我與組員 Stoos 先盡量將元件及版面定義好，讓負責 Mockup 設計的組員之後可以有更好的銜接。其中在課程卡片牽扯到了「募資」、「一般」、「直播」三種不同狀態，我們也在這個部分進行了多次的討論及迭代。<View More>

Wireframing

雖然後續使用者測試時仍得到課程卡片的資訊過多的回饋，三種類型課程的卡片差異性也不高、不易辨識。後續會再參考手機版本的歸類方式做調整，以橫式及直式的卡片外觀做區別

Clarifying Visual Design

Brand Concept

學習不僅僅是為了求取知識，更是一種啟發思維的過程。
「學朋」是一個開放的學習社群，匯聚了學校、線上課程、直播、實戰營等各種學習資源，並提供一個友善且充滿互助精神的平台，讓每個人都可以自由分享自己的想法與見解；品牌名稱將「學習」和「朋友」兩種力量結合在一起，讓學習不再是孤獨的旅程，透過這個平台讓四面八方志同道合的朋友，在尋求知識的世界中找到理想的夥伴！品牌英文名字為「Open」，取名自台語「學」與中文的朋，一起共創學習，展開職涯、改變生活！

Logo Design

整體形象呈現簡潔而有力的感覺，突顯 "Open" 的開放特質和無限的可能。 "Open" 有開放的特質，將 Logo 設計成一個半開啟的拱門、圓角設計的門，傳達品牌想帶給使用者親近、像朋友一般的感受，同時有書本開啟的意象。象徵著知識的開放和無限的可能，也意味展開學習之路或職涯、改變生活的開始。

Logo Design

Establishing the UI Mockup for Each Main Page Through Visual Design

我們基於已經明確的視覺設計和線框圖，對每個主要頁面進行 Mockup 設計。同時，也對「主頁登入前/登入後」、「學習進度狀態」、「有/無搜尋結果」以及不同類型課程的詳細資訊進行了顯示狀態的具體規劃。

Identifying Improvement Areas through High-Fidelity Prototype Testing

經過三位使用者對第一版本的原型進行測試後，我們歸納出了以下問題和潛在改進的方向：

某些畫面的視覺比例（包括間距、顏色、文字大小層級、陰影）缺乏一致性和協調性，需要進一步調整細節以提升整體一致性。
目前產品使用的顏色較多，且插畫複雜度高，這可能會導致產品內容被過多的視覺元素干擾。可嘗試將一些插圖移除，使版面更簡潔。
課程卡片因為標籤繁多、文字階層樣式多，一時間難以聚焦，可以思考什麼是最關鍵的訊息，收斂資訊、調整 UI 樣式，避免視覺干擾。

經過三位使用者對第一版本的原型進行測試後，我們歸納出了以下問題和潛在改進的方向：

某些畫面的視覺比例（包括間距、顏色、文字大小層級、陰影）缺乏一致性和協調性，需要進一步調整細節以提升整體一致性。
目前產品使用的顏色較多，且插畫複雜度高，這可能會導致產品內容被過多的視覺元素干擾。可嘗試將一些插圖移除，使版面更簡潔。
課程卡片因為標籤繁多、文字階層樣式多，一時間難以聚焦，可以思考什麼是最關鍵的訊息，收斂資訊、調整 UI 樣式，避免視覺干擾。

Road Map

為了在階段一的實施中確立明確的目標與方向，我們首先將目標客群定位為設計領域的學習者。未來，我們將以「多元學習」結合「社群共學」為核心目標，逐步完成各階段性任務，最終實現我們的品牌理念。

Conclusion

這次與來自不同專業背景的設計師合作，使我受益匪淺。特別是在開始的競品分析和產品定位研究階段，我從組員身上獲得了豐富的見解，讓我有機會用不同面向觀察市面上不同種類的教學平台。同時也在當中學習到如何與多位 UI 設計師協作，使專案能夠更有效率的完成。透過使用者測試，我們得到了寶貴的回饋，了解到在視覺一致性與資訊收斂方面可以進一步加強和改進。這次的專案不僅擴展了我的專業視野、提升了 UI/UX 相關的知識和技能，更強化了我在團隊領導和與組員協作的軟實力。期待未來的專案中能夠繼續運用這些寶貴的經驗和知識。