UI Design of Online Course System

Ryno Hsiao

Web Designer
UX Designer
Figma

Overview

The "Body Movement Laboratory," led by Professor Li Tsung-chin, is dedicated to the fields of dance therapy and body awareness. In the 2020 project sponsored by the Ministry of Science and Technology, they conducted a body image experiment for female college students using web and remote methods. As the professor and students were not familiar with digital tools, I served as the project manager, responsible for planning the website architecture, tracking progress, and assisting with the experiment and data processing.

How did we collab?

Effective collaboration was critical to the success of the project, as my role required close communication with both the lead researcher and the engineering team. I provided clear and concise project plans and updates to ensure everyone was on the same page, and was always ready to adjust course as necessary. By fostering a collaborative and communicative environment, we were able to overcome challenges and successfully deliver the remote body image experiment to our target audience.

UI demo

Home page, including links on the nav-bar to different main functions of the site.
Home page, including links on the nav-bar to different main functions of the site.
Card choosing: Each time user taking class, three cards are displayed for them to choose from. Then the system will guide the user to corresponding audio course.
Card choosing: Each time user taking class, three cards are displayed for them to choose from. Then the system will guide the user to corresponding audio course.
During the audio course, a picture will be shown to guide user working on the body movement.
During the audio course, a picture will be shown to guide user working on the body movement.
When a course is ended, survey questions will be shown to let us know more about how users feel about the course.
When a course is ended, survey questions will be shown to let us know more about how users feel about the course.
After finishing all the courses, this page will be shown.
After finishing all the courses, this page will be shown.
Partner With Ryno
View Services

More Projects by Ryno