top of page
Edu - thumbnail.png

EDUHK

The project aims to address the need for university students in Hong Kong to cultivate a deeper understanding of life and values education, enhance their personal development, and improve their overall well-being.

Role

UI/UX designer

Date

Sep 2024

Project

Client Project

My Duties

1. Low and High-fidelity wireframes - Design the component and screen for the mobile and desktop.

2. Prototype and Animation

3. UI/UX Refinement- Base on the clients' feedback

Design Process

The client previously developed a version of the website; however, a new function is needed to be added to the mobile version. As a result, my responsibility is to design the newly added features for the mobile version.

EDU Design Process.png
EDU DESIGN DRAFT.png

First Draft

Draft

Most of the website and app functions are the same, e.g., the mental health course and exercises part. The difference is app version has an evaluation part that allows users access to the assessment more easily. Therefore, I only have to focus on the assessment part, as there are only responsive issues for the course and exercises parts.

The solution

Let's see how I design it,

生態瞬間.png
Home.png
login.png
KNOWLEDGE HUB.png

Minimal Design

I adopt a simple and minimal design for this app with a warm tone color. The most crucial function of the app is to deliver mental health knowledge to Hong Kong students, especially to those who suffering from mental illness.  Also, warm tone colors like orange and yellow evoke feelings of happiness, optimism, energy, and passion, users might feel more comfortable and calm.

Assessment Result.png
Assessment Question.png
生態瞬間 details.png
生態瞬間.png
ASSESSMENT PORTAL.png

Evaluation

For the evaluation mechanism, the users must do the survey five times a day consecutively for 7 days. While the system sends notifications and alarms to remind users. If users miss the notification, user have to take the makeup test on the 8th day. 
 

For this part, I think the design should be simple and organized so that the users can keep track of their assessment progress. Therefore, I use green color to mark as "finished" while orange as "in process".

Course
Execrise Unit 1.png
RESPONSIVE.png

Flexible Access

The platform provides personalized learning pathways based on students' interests and self-assessment.

Overall Mockup.jpg
bottom of page