UI/UX, HTML/CSS
2024

Youdon App / 後台

Overview

Youdon App 是一款專門輔助物理治療的應用程式,初階使用者能透過 App 內的問卷,實施推薦的舒緩動作。也與相關物理治療所合作,物理治療師(PT)能開運動處方給患者,節省現場教學時間,也提高患者運動量。


Youdon App is a mobile application dedicated to assisting physical therapy.
It offers a convenient and effective way for patients to receive personalized exercise plans and track their progress. For beginners, Youdon App provides a self-assessment questionnaire that helps users identify their pain points and goals. Based on the results, the app recommends a series of gentle exercises that can be performed at home. Youdon App also partners with physical therapy clinics to provide a more comprehensive solution. Physical therapists can use the app to create customized exercise plans for their patients, which can be accessed and tracked by the patients on their own devices. This saves time during in-person appointments and allows patients to focus on performing the exercises correctly.

Issue

  • 進行物理治療時,患者需要紀錄物理治療師(PT)教導的動作,過去常以口頭衛教或現場動作教學為主。但患者離開後未必能記得所有的舒緩動作,物理治療師也難以追蹤患者實施的狀況。
  • 過去一段時間經歷 Covid-19 肆虐,導致物理治療實體門診人數銳減,也難以在有限的螢幕中教導運動。
  • During physical therapy, patients need to record the movements taught by the physical therapist (PT). In the past, this was mainly done through verbal education or on-site movement instruction. However, patients may not be able to remember all the soothing movements after leaving, and it is difficult for physical therapists to track the implementation of the patients.
  • In the past, the COVID-19 pandemic has led to a sharp decline in the number of physical therapy outpatient clinics, and it is also difficult to teach exercises in the limited screen time.

Design

  • Youdon App 提供數千種舒緩動作教學影片,物理治療師僅需選擇合適的運動處方,患者即可在 App 即時收到運動處方。運動過程中的回饋也會傳回後台,供 PT 查看以更精準的方式確認患者實施狀況。
  • 我們對 PT 進行質性深度訪談,了解不同 PT 在開立處方給患者的情境、開立運動處方的時機以及遇到的困難,透過訪談與實際操作後台收集到的回饋著手改善體驗。舉出部分已修改後的功能:
    1. 影片庫裡的部份動作僅有一側,導致 PT 沒有另一側的動作可以給患者:確保所有動作均有雙側。
    2. 動作篩選器中不論是同一類別或跨類別的篩選都是交集篩選,因篩選均可複選,導致容易篩選許多參數後,無法找到交集的項目:改成同一類別聯集,跨類別交集篩選。
  • Youdon App provides thousands of soothing movement teaching videos. Physical therapists only need to select the appropriate exercise prescription, and patients can receive the exercise prescription in the app in real time. The feedback during the exercise process will also be transmitted back to the background for PT to view, so as to confirm the implementation status of the patient in a more precise way.
  • We conducted in-depth interviews with PTs to understand the context in which they prescribe exercises to patients, the timing of exercise prescriptions, and the challenges they face. We used the feedback collected from the interviews and actual back-end operations to improve the experience. Here are some of the features that have been modified:

    1. Some of the movements in the video library only have one side, resulting in PTs not having the other side of the movement to give to patients: We ensured that all movements have both sides.
    2. The movement filter uses an intersection filter for both same-category and cross-category filtering. Since all filters can be multi-selected, it is easy to filter many parameters and not find any items in the intersection: We changed it to union filtering for the same category and intersection filtering for cross-categories.
Product Design
2023

pcpogo Platform

Overview

台灣電商有成功商業模式經驗的團隊計畫為來在美國營運的 B2C 電商平台網站。除了需規劃設計消費者使用的購物網站,也有供應商後台功能,如:商品管理、訂單管理、物流等等。以及公司內部端審核供應商、商品、客服等功能。

The team with successful e-commerce business model experience in Taiwan plans to operate a B2C e-commerce platform website in the United States. In addition to designing a shopping website for consumers, there are also backend functions for suppliers, such as product management, order management, logistics, etc. There are also internal functions for supplier, product, and customer service review within the company.

Background Information & Competitor Analysis

我們實際操作 Amazon 與台灣 B2C 電商的後台,以了解運作機制與規則。另外研究發現美國電商消費習慣的退貨率有 20-30 %,頻繁地退貨率需提供美國消費者方便退貨。另外美國電商網站不同於台灣會將同一商品一字排開在搜尋頁,美國習慣將不同賣家的同一商品收束於一個母商品頁的殼,但有時未完全收束而導致混亂。

We actually operated both Amazon and Taiwan B2C e-commerce backends to understand their mechanisms and rules. Additionally, our research found that the return rate for e-commerce purchases in the United States is between 20-30%, and frequent returns necessitate a convenient return process for American consumers. Furthermore, unlike in Taiwan where the same product may be listed individually in search results, in the United States, it's common practice to aggregate the same product from different sellers under one parent product page. However, this aggregation sometimes isn't complete, leading to confusion.

One of Solutions

要讓供應商快速上架商品,區分新增商品的必填與選填區塊。新增商品需要有「批次新增」與「搬家」功能,讓供應商無痛上架,商品搬家需能完整包容它網站的規格。而為了包容從其他網站的商品資料,管理商品群組需依據不同供應商刊登同樣的 ID 編號或 GTIN 或商品名稱,放進同一個群組裡,並主要由平台更新內容。

To facilitate rapid product listing by suppliers, it's essential to differentiate between required and optional fields when adding new products. The product addition process should include features for "batch addition" and "migration" to enable suppliers to list products seamlessly. Product migration should comprehensively accommodate the specifications of their website. Additionally, to incorporate product data from other websites, managing product groups should organize items with the same ID number, GTIN, or product name from different suppliers into the same group. Moreover, the platform should primarily update the content.

UI/UX Side Project
2023

Redesign Taipei Public Library Catalog Website

Overview

圖書館資訊與館藏網站是不同的網站,而台北市立圖書館館藏網站於2022年12月改版,除了剛上線時發生許多使用者無法登入、無法借書等等問題之外,網站介面仍顯得陽春,因此嘗試重新設計館藏網站。

The library information website and the collection catalog website are separate entities. The collection catalog website of the Taipei Public Library underwent a redesign in December 2022. Apart from encountering numerous issues such as users being unable to log in or borrow books upon its initial launch, the website interface still appeared rudimentary. Therefore, efforts were made to redesign the collection catalog website.

Issue

  • 台北市立圖書館首頁與館藏網站的風格並不一致,也無統一配色。
  • 登入畫面需要下滑才能看到所有資訊,使用者除了無法一目瞭然外,排版也不整齊。
  • 預約到館通知用紅色背景,雖能吸引使用者目光,但警示意味過重,可能讓使用者緊張。
  • 首頁的資訊少,且熱門排行區塊分成「熱門館藏」、「熱門借閱」、「熱門點閱」、「熱門作者」,然而前三項對使用者並無明顯不同,且熱門書籍的預約人數可能多達1000人,熱門系列=排隊系列。
  • 帳號頁面側邊欄命名不清,如:「閱讀紀錄」是借閱中、預約中的書籍;「我的書櫃」是收藏的書籍、薦購清單、新書通報;「歷史紀錄」是借閱、預約歷史紀錄。
  • 書籍資料頁的館藏資訊將「書在館」、「外借數」等等資料隱藏,使用者無法在預設狀態找到自己附近的館藏地的書籍狀態。
  • The Taipei Public Library homepage and the collection catalog website have inconsistent styles and lack unified color schemes.
  • The login screen requires scrolling to view all information, resulting in poor user experience and uneven layout.
  • The red background used for reservation notifications grabs users' attention but may induce unnecessary tension due to its heavy warning connotation.
  • The homepage contains limited information, and the popular ranking section is divided into "popular collections," "popular borrowings," "popular readings," and "popular authors," with no clear distinction between the first three. Moreover, the number of reservations for popular books can exceed 1000, indicating high demand.
  • The "popular series" may equate to "queued series." The sidebar labels on the account page are unclear, such as "Reading Records" for books being borrowed or reserved, "My Bookshelf" for saved books, recommended lists, and new book notifications, and "History Records" for borrowing and reservation history.
  • The collection information on book data pages hides details like "Books in Library" and "Number of Loans," making it challenging for users to locate books and their availability status at nearby libraries by default.

Goal & Solution

  • 以綠色作為主色,讓視覺上符合圖書館相關網站的調性。
  • 修改會讓人混淆的命名,如帳號頁面側邊欄。
  • 館藏分類放首頁讓使用者一目瞭然,並增加首頁豐富度。首頁新增「活動消息」區塊,讓使用者更容易看到圖書館辦的活動。首頁的熱門排行只顯示「熱門排行」與「熱門作者」。
  • 行動借閱證固定於網站右下角,使用行動裝置版時能方便借閱。
  • 預約通知以不擾人的方式呈現,並在首頁顯示借閱數量、逾期未還書等標示。
  • 在書籍資料頁中將館藏資料、書籍介紹資料以 tab 的方式分類,讓館藏資料一次呈現給使用者。
  • Using green as the main color to visually align with the tone of library-related websites.
  • Renaming confusing labels, such as those on the sidebar of the account page.
  • Displaying collection categories on the homepage for easy access and to enrich the homepage's content. Adding a new "Events" section on the homepage to make it easier for users to view library events. Displaying only "Popular Rankings" and "Popular Authors" on the homepage.
  • Fixing the mobile library card to the bottom right corner of the website for easy access when using the mobile version.
  • Presenting reservation notifications in a non-intrusive manner, and displaying indicators such as borrowing quantity and overdue status on the homepage.
  • Categorizing collection information and book introduction data on book data pages using tabs to present collection information to users at once.
UI, HTML / CSS, Graphic Design
2021

RutenJP Website Layout

Overview

日本露天是2021年上線的跨境購物網站,集中日本主流電商網站的商品,提供台灣或香港、越南等國外使用者購買與運送的服務。


RutenJP is a cross-border shopping website launched in 2021, consolidating products from major Japanese e-commerce websites. It provides services for overseas users from countries such as Taiwan, Hong Kong, and Vietnam to purchase and ship items.

*RutenJP ceased its services in 2023.

Job Duty

網站電腦、行動裝置版本的 HTML、CSS 切版,協助解決版面問題。
維護與更新網站介面、設計 icon,並設計活動廣告視覺。

HTML/CSS slicing for both desktop and mobile versions of the website to assist in resolving layout issues.
Maintaining and updating website interface, designing icons, and creating visual assets for promotional activities.

Web Design
2018

GUMU Website

Overview

GUMU 致力於研發一款最符合現下女性所需的熱敷產品,於 2109年在嘖嘖平台進行募資開發「月月暖暖墊」,共募得169萬。官網提供商品與品牌理念,並有部落格文章,提供舒緩生理期等相關知識。

GUMU is dedicated to developing a heating pad product that best meets the needs of women today. In 2109, they crowdfunded the "Monthly Warm Pad" on the Zeczec platform, raising a total of 1.69 million. Their official website provides product information, brand philosophy, and blog articles offering knowledge on alleviating menstrual discomfort and related topics.

Design

  • 以粉色作為網站的主色調,給予溫和暖心的氛圍,符合女性照顧女性的品牌調性。
  • 月月暖暖墊是 GUMU 推出的第一款產品,因此以該產品的輕薄特點作為首頁輔助元素呈現。
  • Using pink as the primary color theme for the website to create a gentle and warm atmosphere, aligning with the brand's nurturing and caring tone towards women.
  • The heating pad is the first product launched by GUMU. Therefore, the homepage prominently features its slim and lightweight characteristics as an auxiliary element.