Major Project II

03.02.2026 - 17.03.2026 / Week 01 - Week 07

ID name YANG HANWEN

ID number 0364085

Program name Bachelor of Design (Honors) in Creative Media

UI/UX

LISTS

• Instruction
• Project Process
• Final Submission
• Feedback
• Reflection

Instruction

Project Process

This all started with a post by Ms. NORANIS ISMAIL in September 2025 on the Microsoft channel Prep Group: Major Project 2 February 2026...

Let's look at this table↓

I was originally in group 15 in Major Project I...

Okay, back to the post itself and all the replies below, it's clear that some groups are maintaining the status quo, continuing to refine their work while keeping up with the original format and the progress of submitting Major Project I...

So, just as there are groups that proceed according to the original plan without changing their schedule, there are also groups that unexpectedly deviate from the original plan. Unfortunately, my original group was one of those groups; the group leader, Yong Xiao Tong, decided to go solo.

Fortunately, Wang Zilong, who was originally in group 13 in Major Project I, was in the same situation as me...

Even more coincidentally, when I was studying Experiential Design in my 5th semester of 2025, I ran into him again, who had the same class schedule. So, after we both learned about our respective "encounters," we decided to team up in Major Project II.

So, only now do I truly begin writing the progress for Major Project II.

So...In Week 1, in the post in the 202602 Major Project II (Everyone) channel, Ms. NORANIS ISMAIL clearly stated that what is important for all groups or individuals is...

to fill out this↓form to supplement our group's or our own information.

The new group I formed with Wang Zilong was Group 39.

Immediately afterwards, she posted the next post...

The first part of the post is the Module Brief Presentation for this module.

Secondly, we can choose a tutor from our own major for weekly in-person guidance. I chose Dr. Wong Chui Yin (D3.07, UI/UX) without hesitation. This is not only because she is currently the only tutor whose name includes Chinese characters, but also because she was in charge of my Minor Project module in the 5th semester, and we are quite familiar with each other.

So what follows is...

project workflow example for UI/UX projects.

Okay, back to the main topic. In the first week, our group first explained to Dr. Wong Chui Yin the awkward situation of being reassigned from our respective old groups in Major Project I, and showed her the projects our old groups had done in Major Project I...

that is, the PPT below↓ is my original group 15, and the one above↑ is Wang Zilong's original group 13.

At this point, Dr. Wong Chui Yin gave our group three options: First, each of us should complete the progress of our original group's project; second, we should start a completely new project; third, we should combine our existing group's projects with our current projects and choose one of our original group's projects to continue.

Wang Zilong and I basically chose a combination of the second and third options. Dr. Wong Chui Yin then asked what our group's previous project was about. I answered that it was a survey platform, while his group's was an app related to learning.

So Dr. Wong Chui Yin suggested to our group that we try to do a project related to the learning environment of high school students in China. She probably saw the immense pressure high school students face when taking the college entrance exam.

So Wang Zilong gave me the file ↑above, which I guess is a file containing survey data and a preliminary plan. Based on this file, I created the following↓ PPT.

So... in the second week, Dr. Wong Chui Yin did look at the↑PPT and gave our group some suggestions for revision. She asked what type of project our group would ultimately present, and Wang Zilong replied that it was a website (that's all I remembered at the time).

So, in the second week, I revised my group's PPT. Of course, before revising it, I first created the following draft of the Architecture presentation.

Then, below is the PPT I revised in the second week.

Then, because the third week was a public holiday week, I created the following low-fidelity prototype during that week.

Below is the interaction of that low-fidelity prototype.

So, in the fourth week, Dr. Wong Chui Yin pointed out many problems our group had encountered in the project. To summarize, we had focused primarily on the school's perspective in the early stages, neglecting the fact that our main target audience was students. Therefore, we needed to make a major overhaul, aiming to create a comfortable and free learning environment for students.

So I started redesigning a prototype primarily for students, but also catering to parents and teachers. Although it's still a low-fidelity prototype, I've added color to the prototype files this time, so I call it a "medium-fidelity prototype." Considering Dr. Wong Chui Yin's suggestion to our group to create a bilingual (Chinese and English) website that can be freely switched (Although I really want to complain, don't most browsers nowadays have built-in translation functions?), and due to time constraints, I created many Chinese pages at the time. Of course, the English version was retained for the classroom panel page in the end. Below is the prototype I created in the 4th week.

Then the following is the interaction.

After Dr. Wong Chui Yin saw my rework in the fifth week, she said it was good and showed great improvement. She also suggested that I make the page more lively and continue to improve all the pages in both Chinese and English.

Although I had screen recording enabled when I was talking to Dr. Wong Chui Yin, I didn't have audio recording enabled. As a result, my feedback at the time was based entirely on my immediate memory and was sent to Wang Zilong (and he was absent from class at the time).

Although she suggested I make the page more lively, to be honest, I wasn't quite sure what exactly constituted "lively." But thankfully, I didn't have time to think about it, so I just copied all the Chinese pages from the prototype...

interacting with all Chinese pages...

and all the English pages and...

interaction with English pages...

and I've integrated all the Chinese and English pages together...

and their interactions.

Then, in the sixth week, I combined what I learned in the Interactive Design module about how to upload website code and other files to the Netlify platform...

I fucking actually made the website! So, below is the first finished website I showed Dr. Wong Chui Yin in the sixth week.

I explained to Dr. Wong Chui Yin what I had done in week 5, and that at that time, the students in group 22 (Gu Qiankuan & Fang Yao Yue) reminded me that Ms. NORANIS ISMAIL had released the final week, which was week 7, on the Microsoft Teams channel, and which group needed to present to which supervisor.

That is, this table.

It was obvious that my group was assigned to a supervisor I was completely unfamiliar with.

Later, I discovered that this gentleman was originally a tutor in charge of immersive design.

So, I first asked Dr. Wong Chui Yin in the seventh week of class if it could be changed to "the final presentation week is for you," but she said that I would have to ask Ms. NORANIS ISMAIL, as she wasn't sure about it. However, she did know Mr. Ronald Chua, so she said it didn't matter; it was just a change of supervisor for the presentation. Later, I also left a message for Ms. NORANIS ISMAIL in the Microsoft team. She told me that the presentation, time, and location were purely randomized (although I think this purely randomized allocation mechanism is stupid, as it's very unfair, and it would be unfamiliar to present to a tutor from a different major, but after hearing from another student that the immersive design major was later removed from our school and merged into the UI/UX major, I felt relieved).

Okay, let's get back to the main topic. Dr. Wong Chui Yin's final suggestion for my website was to add a gradient to either the background or button colors. Also, the interaction between Chinese and English texts wasn't clear or dynamic enough.

Oh, I forgot to mention above. In the 5th week, she also suggested that I change the title of my final presentation slides to something like this.

➡️➡️
So, at her suggestion, I added some gradient effects to the webpage, as well as sufficiently dynamic Chinese/English toggle buttons. One last thing she didn't mention, but which I felt was crucial, was the login/registration process. Therefore, what follows is my final prototype, the high-fidelity prototype.

The final page interaction is as follows↓

So, integrating all the prototypes (excluding the low-fidelity prototype) results in the following↓

Then, in the seventh week, the website shown to Mr. Ronald Chua was the following↓

Oh, of course. I added Information Architecture to the PPT...

and the Main Flow of User Flow...

there's also the Detailed Flow in User Flow.

Given the poor network conditions, the links embedded in these three pages based on the Miro platform are very likely to get stuck in Cavan's slideshow and fail to display. Therefore, I embedded those three links above.

The PowerPoint presentation given to Mr. Ronald Chua in week 7 is as follows↓

Then, in week 7, most of the presentations were between Wang Zilong and Mr. Ronald Chua (although he was using my MacBook), so I didn't understand much of the content. I only caught the part where Mr. Chua asked me why I made a website instead of a mobile app. I replied that high school students in China aren't allowed to have smartphones or similar electronic devices. He immediately understood what I meant. I wasn't planning on modifying the website, but Wang Zilong told me that if we modified it further, our scores could improve. So he sent me this screenshot.

I was supposed to return to China in just a few days. I modified this website the day before I returned to China.

That is, the website below↓

I even recorded the interaction process as a video at the time↓

Then, coincidentally, on my way to campus (on the overpass) on March 20, 2025, I ran into Mr. Ronald Chua. I showed him the video, and he said a lot to me, basically saying that I still needed to revise it.

So I revised it again based on the recording↑above and explained my situation to him.

That is, the following website↓

Then, embarrassingly 😂, he didn't understand Chinese at all. So, my final revision was to make it so that he could log in by entering any Chinese or English characters on the login/registration page, and then I sent it to him.

After waiting three days without a reply (of course, I'm very grateful for his understanding during the two days I was on my way back to China), I changed the link I initially generated on the Netlify platform, https://taupe-narwhal-1c143d.netlify.app/, to https://major-project-2group39.netlify.app/ and then submitted it.

However, something even more awkward happened. After I submitted, he told me that the link I had originally sent him couldn't be opened. So he opened the link I had sent him before and gave me the feedback shown in the images below.

That's how it is now, but he did recommend I buy the book below, which I think is very worthwhile for future design work.

View on Amazon

So the following↓ is the final website.

The interactive demonstration is shown in the video below.

So, my next step was to replace the final website and interactive demonstration video in the final submitted PPT.

➡️
Finally, I'd like to add a video recording of the code section.

So, when we comes to the final submission...

Let's take a look at the requirements.

I think I don't need to explain the submissions corresponding to 2 and 4 here, since some of the files embedded above are based on those embedded in the two folders I submitted below. 

I'd like to briefly mention the first submission mentioned here...

Back in the first week of online classes (although this online course was only offered once throughout the entire semester), Ms. NORANIS ISMAIL posted in this thread on this Microsoft team channel that each group should...

Copy this online document and then send the copied document to her.

Fortunately, our group has already finished.

Then the third submission requirement...

Oh, just export the group's final PPT as a PDF and then rename it.

The last one...

Download this document, edit it, rename it, and then submit it.

So in the end, we also completed it.

Final Submission

1. Project Exploration 20%
   
2. Project Execution 30%
   
3. Project presentation 10%
   
4. Final Project 40%
   
5. Submission Declaration Form_Group 39
   

Feedback

Reflection

Through this Major Project II, I learned that choosing teammates for a graduation project really needs to be done carefully. A person may speak good English and do well during the final presentation, but that does not always mean they contributed equally throughout the whole project. This experience made me realize that in group work, it is important not only to look at who can present better at the end, but also at who is consistently doing the actual work during the process. In the future, if I work on a long-term project with others again, I will make the task division clearer from the beginning and try not to take too much onto myself just because I want to keep the progress moving. Teamwork should be shared more fairly, instead of one person becoming too involved while the other person mainly appears at the presentation stage.

Another thing I reflected on is that when doing a project related to education in China, it is necessary to understand the real context behind it. This kind of topic is not only about making a clean interface or adding useful functions. It also involves how students, parents, and teachers actually communicate, how academic progress is viewed, and how educational information is presented in a way that feels natural in the local context. At the same time, because this project was developed in an overseas learning environment, language also became an important issue. Some lecturers who could understand Chinese were able to read the content and log into the website more easily, while others who were not familiar with Chinese faced more difficulty when trying to understand or test the system. This made me realize that when designing a China-related project outside China, it is important to think not only about the local users in China, but also about the overseas reviewers, lecturers, or collaborators who may not be able to fully access the design because of language barriers. During this project, I realized that if the research and language consideration are not strong enough, the design can easily become too idealized. So in future projects related to Chinese education, I need to pay more attention to user research, cultural understanding, and bilingual accessibility in order to make the system more practical and easier for different audiences to use.

Lastly, based on the feedback from Mr. Ronald Chua and the book I bought afterward, I understood that design work in the future should not only focus on the final outcome, but also on the thinking process behind it. A design is not strong just because it looks complete. It also needs to be supported by clear logic, user needs, and a more careful way of organizing information and interaction. This reminded me that I still need to improve in terms of research, critical thinking, and responding to feedback. In future design practice, I hope I can move beyond only making things look finished, and instead create work that is more reasonable, more meaningful, and more connected to real problems.