Interactive Design Assignment 2 : Interactive Prototype development

May 10, 2026

12/5/2026 - 23/6/2026 (Week 4-Week 10)

Zhao Jie,0387076

Interactive Design / GCD 60904

Assignment 2 : Interactive Prototype development

Table of Content :

I. Lecture

2. Instructions

3. Process Work

4. Final Outcome

5. Feedback

6. Reflection
1.Lecture

This task mainly requires us to develop and implement the fully functional website we have conceptualised in our earlier design stages. During our class, Ms Mia walked us through tutorials on W3 Schools, where we learned core knowledge of HTML and CSS coding fundamentals, as well as basic JavaScript syntax and layout techniques. These practical coding lessons helped us understand webpage structure and styling rules, which was incredibly helpful for us to build up the core framework and interactive features of our website.

In terms of accurately realising our original design and improving the user experience, Ms Mia gave us a lot of detailed, constructive feedback and practical suggestions. These included enriching the overall visual styling and consistent CSS design system, simplifying and optimising the checkout and payment process to make it more intuitive and user-friendly, and developing a new function that allows regular users to create and manage their own artist portfolios. This new feature transforms the platform into a dual-role system, enabling visitors to switch between general customers and independent creators, forming a two-way interactive community.

2. Instructions

Assignment Brief

Module Information

3. Process Work

Website Concept vs. Final Website Build:

Homepage-before

Homepage-after

Artists-before

Artists-after

 

Projects-before

Projects-after

Today's picks-before

Today's picks-after

Artist Profile-before

Artist Profile-after

Contact artist-before

Contact artist-after

Create order-before

Create order-after

Go for pay-before

Go for pay-after

Payment Successful-before

Payment Successful-after

Creation Process-before

Creation Process-after

ArtworkCompleted-before

ArtworkCompleted-after

Support-before

Support-after

My account-before

My account-after

New Features

A personal artist profile has been added to the My Account page.

Users can edit their personal artist profiles.

The profile can be displayed normally alongside other artists on the Artists page.

Users can also click the profile to preview it and check how it is displayed.

A restriction has been added to prevent users from placing orders with themselves.

Projects on the Projects page can now be clicked to view more details.

Users can also publish their own projects.

More artists and projects have been added, providing a wider variety of styles.

Division of Work
Zhao Jie: Webpage development, material provision, website testing

Wang Zihan: UI design, material provision, website testing

Wang Xinyi: Visual design, material provision, website testing

4. Final Outcome

Final Presentation Recroding :

ArtPicks Presentation Slide:

5.Feedback

Week 4 :

Ms. Mia advised us to plan the overall website structure, sitemap, and page flow before starting the development process. Based on her feedback, we organized the main sections of the website and clarified how users would move between the homepage, artwork categories, artist profiles, project pages, and account pages.

Week 5 :

Ms. Mia suggested that we add more complete content to the website and make sure that all pages, buttons, and navigation links were properly connected. She also reminded us to test the website regularly so that we could identify broken links, incomplete pages, and other functional issues during the development process.

Week 6 :

We began building the basic framework of the website using Visual Studio Code (VS Code). During this stage, we created the main pages and started arranging the basic layout, navigation bar, artwork sections, artist profiles, project section, and account section.

Week 7 :

We continued improving the website framework and adjusted the layout and structure of each page. We also added more website content, refined the visual design, and worked on connecting the main pages and functions to make the website easier to navigate.

Week 9 :

After presenting our website prototype, Ms. Mia pointed out that several important functions were still incomplete. At that time, users could not search for content, and only one artist profile could be opened. She suggested adding a search function so users could search by keywords, artist names, and types of artwork.

Ms. Mia also asked us to make the filter function usable instead of using it only as a visual element. She suggested adding more detailed art and artwork categories, such as Illustration, Character Art, Anime, Fantasy, Cover Design, Badge Design, Merch Design, 3D Modeling, Oil Painting, and Abstract Art, so users could find suitable artists and artworks more easily.

Week 10 :

Based on Ms. Mia’s feedback, we continued improving the Project and Account sections. For the Project section, Ms. Mia explained that a project should only be created after the client and artist had communicated and confirmed the commission details. Both sides needed to reach an agreement before entering the project stage. The Project page could then be used to manage the project information, progress, communication, and final delivery.

For the Account section, we improved the profile editing function and allowed users to upload or change their profile pictures. Before the final submission, we continued testing the website, fixing functional issues, improving the page connections, and refining the overall content and user experience.

6.Reflection

Experience :

During this project, I worked on the Artpicks website from the early idea to a more complete interactive prototype. Our process included planning the website structure, building the main pages, adding artist profiles, project cards, Today’s Picks, My Account, chat pages, order pages, payment pages, and creation progress pages. Based on feedback, we kept improving the website functions and layout. For example, we added more usable filters for Artists and Projects, improved the My Account page, created a personal artist profile feature, and adjusted small UI problems such as button size, image display, and page spacing. The process involved many rounds of testing and fixing, especially when some buttons, filters, image paths, or popups did not work as expected.

Observations :

Through the process work and feedback, I noticed that a website needs clear visual design and useful interaction at the same time. Some pages looked good at first, but after testing, the user flow was not always smooth. For example, some filter buttons were only visual elements before we made them functional. The Projects page also needed clearer categories, so users could search and filter different types of creative work more easily. The My Account page also became more meaningful after adding the user’s own artist profile section. Feedback helped us see that a platform should feel active and realistic, so we added functions such as editable profiles, project posting, chat input, profile links, and order tracking.

Findings :

From this project, I found that UX design needs continuous testing and adjustment. Small details can strongly affect the user experience, such as whether a button is easy to click, whether an image is cropped correctly, and whether a user can understand where to go next. I also learned that a prototype does not need a real backend to show a clear idea. Front-end simulation can still show important platform functions, such as uploading images, creating an artist profile, filtering projects, and switching page content. This project helped me understand how feedback, process work, and user flow are connected.