top of page

eTrans App

Platform: iOS, Android, Web (launched)

INTRO

科普一傳十是一個創新的科普教育媒體平台,透過和大學老師與業界專家的直播對談講座,以及線上即時的互動學習體驗,推廣時下熱門的科學議題和科技新知,打造沒有圍牆的虛擬學校,創造跨校共學的樂趣和終生學習的願景。

eTrans is an innovative science education and media platform that introduces the trending STEM topics and technology. We hold live streaming panel discussions with college professors and professionals in the industry, and design online interactions for students and audience to engage in the STEM topics and communicate with the speakers and peers. Our vision is to create a lifelong learning school without the walls of rigid school exams where students can acquire knowledge in breadth and depth, and learn together for fun.

appstore.png
googleplay.png

MY ROLE

我在IT團隊除了UX/UI的主要職務,包含繪製用戶流程圖、線框圖和設計稿切圖,也擔任Scrum產品負責人(PO),在每月一項功能的開發佈局中,搜集初期用戶需求、評估規劃功能優先序和時程,培養出跨部門的組織與溝通能力。另外我也和視覺設計師合作,參與平台icon、徽章、活動頁banner等元素設計,並規劃建構平台的設計系統。

In our IT team, my main role as a UX/UI designer included drawing user flowchart, wireframes, and exporting final mockups. I also acted as the Scrum Product Owner, gathering users’ needs, and evaluating features priorities and schedule in our monthly Sprint. It built my cross-functional communication and organization skills. Lastly, I worked with visual designer to create visual elements such as icons, badges and website’s banners, and built the design system for our platforms.

GOALS & DESIGNS

科普一傳十 Explore 

整理呈現多元的節目內容,讓用戶方便搜尋和瀏覽

Organize and display a variety of live shows, and make it easy to search and view

iphone7.png

學習社群快充 Forum

直播互動區 Live Interactions

設計直播互動學習模式,輕鬆上手體驗平台的樂趣
Create a live-streaming interactive learning experience that are simple and fun

iphone7.png

學習社群包含私人學群和學群快充:老師身份可以建立私人學群、發送學習任務、掌握學生的學習狀態和心得回饋;學群快充是老師們上傳檔案、交流教學資源的交誼廳。
In Forum, teachers can create forums and assignments to keep track of students' learning status, and also share teaching materials and students' performance at the lobby upload section. 

forum_lobby.png
forum.png
forum_file.png

我的一傳十 MyeTrans

「學習履歷」的學習成果和學習歷程記錄學生的學習行為和表現,未來大學申請可列為加分項目。
MyeTrans records students’ learning behavior and performance as bonus points for the college entrance application.

「成就專區」是宣傳最新系列節目的獎章收集活動,提升用戶在平台學習的動力和樂趣。
​The Badge section is an in-app event to promote the latest series of live broadcasts and to engage users with the platform.

myeTrans.png
porfile_resume_detail.png
badge_list_bag_full.png

吉祥物咕咕 Mascot GooGoo

咕咕是科普一傳十的吉祥物,陪伴學員在科學宇宙中學習成長。
GooGoo is the eTrans Mascot, accompanying users to learn and grow in the science universe.

設計系統 Design System

eTrans design system.png

PROCESS

我們採用每月一次Sprint的開發模式,初期進行用戶需求搜集、優先序和時程評估,接著繪製用戶流程圖和線框圖,與IT部和企劃部確認細節內容後,匯出設計稿和切圖。最後召開健檢會議,檢討開發流程和溝通效能。

We adopted the monthly Sprint development process. In the beginning, we gather user’s needs, prioritize features, and evaluate schedule. Next, I draw user flowcharts and wireframes while confirming details with IT and marketing teams, and then export final mockups and specs. Before we move on to the next Sprint, we held a checkup meeting to evaluate our development process and communication.

點擊下方軟體圖示瀏覽更多開發細節吧!Click the software icons below to view more development details

我向團隊主動提出建立設計系統的需求,方便管理跨平台設計元件的規格樣式。我參考“DesignCode Design System in Figma”的系統架構和命名規則,可以快速搜尋元件,加上Figma新功能Auto Layout自動排版物件間距和順序,以及外掛工具Google Sheets Sync,帶入資料庫的實際圖文資料,展示prototype更有真實感。

I requested the need to establish the design system for our team, which can streamline the maintenance process for components styles and specs. I looked into “DesignCode Design System in Figma,” learning the system structure and naming rule to fast search for assets in the library. I also applied Figma's new feature Auto Layout for setting elements' padding and sequence, and Google Sheets Sync plugin to export real data from database, making it realistic for prototype presentation.

bottom of page