INTERACTIVE DESIGN - TASK2
FANN WONG JING EN｜0382237
Design Principles | Bachelor of Design (Honours) in Creative Media
GCD60904 Interactive design
TABLE OF CONTENT
MODULE INFORMATION BRIEF (MIB)
TASK 2
Theme Planning
In this group project, each member was responsible for a different study scene theme. My part was the forest theme, so I started by thinking about how a forest could create a calm and focused study atmosphere.
First Draft
For my first draft, I placed a large 25:00 timer in the middle of the forest background and added a simple to-do list on the side. At this stage, I mainly focused on the visual mood, using green colors, leaves, and a soft forest image to make the page feel relaxing.
After presenting the first draft, I received feedback that the page needed a stronger reward system. It should not only show a timer and tasks, but also give users something to unlock after completing their tasks.
Reward Idea
Based on the feedback, I developed the idea of unlocking animals in the forest. Each completed task could reveal an animal or a small visual element. This made the forest theme more meaningful because the scene could slowly become more alive as users made progress.
Research
.jpg)
I chose this dashboard because it presents a large amount of information in a clear and organised way. Despite containing several features, the interface remains easy to understand and does not feel overcrowded.
The main elements I referenced were:
- A sidebar navigation system that separates different functions clearly
- Rounded cards used to organise content into sections
- A larger card for the main feature and smaller cards for supporting information
%20Home%20_%20X.jpg)
The elements I referenced included:
- A circular progress indicator
- Large time information placed in the centre
- Clearly grouped timer controls
I selected this reference because it combines a timer, progress information, and scheduling features. These functions are closely related to the purpose of my study-management website.
The main elements I referenced were:
- Making the timer the main visual focus of the page
- Using soft and natural green colours
- Combining rounded cards with a light background
- Displaying progress through statistics, timelines, and progress bars
- Separating different functions into clear modules
Layout Improvement
During the process, I realized that putting everything together made the page look too crowded and unclear. So I used boxes and cards to separate the timer, to-do list, and garden reward area. This made the forest theme look more organized and closer to a real product interface.
Static Webpage
After that, I started turning the design into a static webpage using HTML and CSS. At first, the layout was still simple, but it helped me test how the timer, task list, and reward area could appear on the screen.
Final Forest Version
In this version, my forest theme became part of the group project’s study website. The design kept the calm forest atmosphere, but the structure became clearer. It included a timer section, a to-do section, and a garden reward section where animals could be unlocked after tasks were completed.
Cover Page Process
The cover page was designed as the first entry point of my project. Instead of showing only one study interface, I wanted the cover to work like a theme selection page, where users can choose different study scenes before entering the main app.
I created a large visual cover with the project title, navigation buttons, and several theme preview cards. Each card represents a different study environment, such as forest, beach, cafe, and picnic. This allows users to switch between different themes depending on the atmosphere they want for studying.
After receiving feedback from my tutor, I realised that using my own illustrations would make the project feel more personal and original. In the earlier version, some visual elements were based more directly on existing images, so the overall style did not fully represent my own design language.
To improve this, I used the original images only as references for mood, composition, and character direction. Then, I redrew the visuals in my own style. For example, I created a soft cartoon dog character with a red beret and bow, using a warmer and more playful visual style to match the calming study theme.
A short video demo was also recorded to show how the prototype works. The demo shows the timer, task input, and interaction flow, allowing viewers to understand how the interface functions.
REFLECTION
One of the most challenging parts was organising the different features on the same page. My first design focused mainly on the forest atmosphere, but after adding the timer, task list, and reward area, the interface started to feel crowded. Based on the feedback I received, I used separate cards and sections to create a clearer visual hierarchy. This helped the website feel more organised and closer to a complete product interface.
The reward system was another important challenge. At first, the webpage only included a timer and tasks. After receiving feedback, I developed the idea of unlocking animals when users completed their tasks. I felt that this made the forest theme more meaningful because the environment could gradually become more lively as the user made progress.
I also realised the importance of originality. After my tutor suggested using more personal visuals, I used reference images mainly for mood, composition, and direction, then redrew some elements in my own style. Creating the dog character and meadow illustration helped the final design feel warmer and more consistent with my own visual language.
AI assisted me mainly with organising the webpage structure and understanding parts of the coding process for the timer, task list, and reward interactions. It also helped me improve some written explanations. I adjusted the layout, spacing, visual elements, and illustrations so that the final outcome matched my intended style.
I learned that a successful interface needs clear organisation, meaningful feedback, consistent visuals, and functions that relate to the main concept. The process was sometimes difficult, especially when balancing several features without making the page feel confusing. However, seeing the project develop from a simple forest timer into a more complete interactive study webpage was rewarding. This task also taught me that AI can be useful as a supporting tool, but the final creative direction and design decisions still need to come from my own judgement.
Comments
Post a Comment