Interactive Design - Task2

Interactive Design - Task2

20.4. 2026 - 

week1-week14

HIYORI HYAKUICHI

Interactive Design / Bachelor of Design (Honours) in Creative Media

Taylor's University

---

TABLE OF CONTENTS

1. INSTRUCTION

2. LECTURE

3. PROCESS WORK

4. FEEDBACK

5. REFLECTION

---

1. INSTRUCTION

---

2. LECTURE

week5 ~ week9

Tutorial on HTML

week10 ~ week11

Website creation and presentation

(Fig 1.1 Tutorial (HTML))

(Fig 1.2 Tutorial (HTML))

(Fig 1.3 Tutorial (HTML))

(Fig 1.4 Tutorial (HTML))

(Fig 1.5 Tutorial (HTML))

(Fig 1.6 Tutorial (HTML))

(Fig 1.7 Tutorial (HTML))

---

3. PROCESS WORK

This is the stage where the proposal presented in Task 1 is brought into reality. It is the process of transitioning from a presentation-based concept into a fully interactive website that users can actually experience and interact with.

Deliverables:

• PDF or Google Document
• Online post on the E-portfolio
• Demo video
• Slides and presentation
• HTML, CSS, and JavaScript files

Members:

• Jocelyn
• Grace
• Gemma
• Hiyori

Each member is assigned specific roles, and the project is refined and improved based on the feedback received from Task 1.

Quiet Brew Website

(Fig 2.1 homepage)

We set up the navigation so that each item in the top menu bar links to its respective page.

(Fig 2.2 log in page)

(Fig 2.3 Forgot password page)

(Fig 2.4 Create Account page)

Here, we added new pages for users who have forgotten their password and for users who want to create a new account.

(Fig 2.5 Character Selection page)

Additionally, we changed the character customization page to a character selection page instead of customization. We designed four characters—two female and two male—and made them available for users to choose from.

(Fig 2.6 Main page)

(Fig 2.7 Main page (chat))

(Fig 2.8 Main page (complete session))

The changes and additions made here include:

• Timer control buttons
• Task display
• Chat show/hide function
• Current time display
• Settings button for navigating to different pages
• Display shown when a task is completed

(Fig 2.9 Plan page)

(Fig 2.10 Plan page (Purchase page))

(Fig 2.11 Post-purchase page (receipt page))

We added a purchase page for the learning plan and a post-purchase page (receipt page) that is displayed after the purchase.

(Fig 2.12 Dashboard page)

We made changes so that a Friends List and a To-Do List can be newly added. In addition, the Progress section located under the To-Do List now updates according to the To-Do List.

(Fig 2.13 About page)

On this page, we changed our icons to match each individual character.

(Fig 2.14 Survey)

(Fig 2.15 Survey)

We conducted a survey with approximately five people and received feedback on the pages.

My Role

Profile page

Character selection page (including character design)

Survey creation and feedback collection

(Fig 3.1 Profile page)

(Fig 3.2  Character Selection page)

(Fig 3.3  Survey)

In the character selection screen, we created characters and designed several selection screens based on those characters, then chose one from them.

(Fig 3.4  Character Design)

(Fig 3.5  Character Selection page 1)

(Fig 3.6  Character Selection page 2)

(Fig 3.7  Character Selection page 3)

(Fig 3.8 Character Selection page 4)

---

4. FEEDBACK

week10-week11

Login Page: Add a Sign Up page for new user registration.

Character Selection Page: Improve the functionality by replacing the customization page with a character selection page, allowing users to choose from different characters.

Game Page: Implement features such as Pause, Start, Chat, Current Time Display, and a To-Do List.

Shop Page: Add a section for entering credit card details.

Dashboard: Add functions that allow users to add friends and remove items from the To-Do List.

About Us Page: Update the profile pictures.

Profile Page: Make all tabs fully functional.

---

5. REFLECTION

In this task, we developed a website prototype based on the approved concept and presentation slides from Task 1. We improved the prototype by creating pages that appear after buttons are clicked, designing different screen layouts, modifying the navigation bar, and implementing features such as the timer on the game page. Each group member contributed to editing and improving different parts of the website, allowing us to create a prototype that more closely resembles a real website.

We also discussed our individual responsibilities as a group and made revisions and improvements to better achieve our intended design. There were some features that were difficult to implement, and some functions did not work exactly as we had expected. Although website development is not one of my strengths, I am very happy that we were able to complete the project successfully. Overall, this assignment provided me with valuable experience and helped me gain new knowledge and skills.