Interactive Design - Task 1: Digital Business Concept


21.4.2026 - 5.5.2026 (Week 1 - Week 4)
Cheyenne Liew Khye Yean / 0378330
Interactive Design / Bachelor of Design (Hons) Creative Media
Task 1: Digital Business Concept

TABLE OF CONTENTS


1. TUTORIALS

Our first tutorial was to learn some basic coding. We were instructed to download Visual Studio Code and set up the Live View on Google. Then, we were provided with this link: https://www.w3schools.com/html/html_basic.asp for help with the codes. 

We mainly learnt how to insert and change colour of text, add images, and hyperlinks. 

Figure 1.1 Code, Week 1 (28/4/2026)

Figure 1.2 Outcome, Week 1 (28/4/2026)

Return to Table of Contents


2. INSTRUCTIONS

Figure 2.1 Module Assignment Briefs

Return to Table of Contents


3. PROCESS WORK

Figure 3.1 IdeasWeek 1 (21/4/2026)

For our first class, we were briefed about our first assignment. As the first part of the task, we had to form a group and come up with business ideas to later develop into a website. We wanted the websites to be interactive, as mentioned in the briefing, so my ideas were mainly try-on websites.
 

My Ideas 

1. Digital Clothes Try-on
  • A website that allows users to virtually try on clothing via AR technology.
  • Includes body shape analysis to suggest flattering clothing options.

2. Glasses Try-on
  • A website that allows users to virtually try on glasses via AR technology.
  • Includes face shape analysis to suggest suitable glasses frames.

3. Pet Nutrition Meal Plan Maker
  • A website to create a meal plan for pets based on information provided (age, breed, weight, etc.).
  • Shows what exactly is missing from their current diet and how it helps them stay healthy.

After that, we decided on 4 final ideas which are highlighted in yellow. We had one person doing the competitor website analysis for each, in which I ended up with my own glasses try-on idea.


I started by finding the competitors, where I settled with these 3 websites:
Then, I proceeded with my analysis which can be seen below.

Figure 3.2 Competitor AnalysisWeek 1 (24/4/2026)

Advantages we can have based on analysis:

  • Try on, face scan/analysis, and glasses information all in one pop up
  • Price and glasses details shown at the side of the try on camera
  • Detects face size, shape, and pupillary distance for accurate fitting
  • Can use live camera or upload an image
  • Ability to compare between options side by side
  • Works when turning face for accuracy
  • Shows recommendations based on face shape + skin tone + hairstyles

Figure 3.3 Complete Business Proposal, Week 2 (27/4/2026)

Once done with this part, we showed all our parts to our tutor and decided on one final topic to proceed with, which is the POP MART Trading idea. For this, I was tasked to create the slides and make the website layout/moodboard.

For the website layout, I referenced another trading website, Nookazon, and one of the florist websites from the competitor analysis, Bloomthis.

Figure 3.4 Nookazon websiteWeek 2 (30/4/2026)

Figure 3.5 Bloomthis WebsiteWeek 2 (30/4/2026)


Figure 3.6 Colour PaletteWeek 2 (30/4/2026)

Figure 3.7 SitemapWeek 2 (30/4/2026)

I decided on a colour scheme first, mainly with the original POP MART colours plus black and white, but muted them a little bit to make it easier on the eyes. Then, I followed the sitemap made by Xin Yean and attempted to include everything into the website design.

Figure 3.8 Website Layout - Shop TabWeek 3 (4/5/2026)

Figure 3.9 Website Layout - Community TabWeek 3 (4/5/2026)

Website Features:
  • Navigation Bar: Shop, Trade, Sell, and Community
  • Filter System (Shop Tab): Location, Prices, and Series filters for easy searching
  • Condition Rating (Shop Tab): Star ratings based on product condition
  • Chats (Community Tab): Messages between sellers and buyers/traders
  • Forum (Community Tab): Space for questions, discussions, and etc., each tagged with specific hashtags for filtering purposes
  • Trending (Community Tab): Taken based on the popularity of the hashtags used in the forum posts

After our presentation, we were told to make some changes to avoid copyright issues. 

Figure 3.10 New Website Banner, Week 3 (5/5/2026)

We decided to exchange the visuals of the collectible toys to a banner with a simple crown logo, which POP MART often associates with, and the business logo.

Final Outcome

Figure 3.11 Final Submission, Week 3 (5/5/2026)

Member Contributions

Chan Xin Yean (Group Leader): Idea contribution, project timeline planning, competitive analysis (florist), sitemap
Chai Yi Jia: Idea contribution, competitive analysis (pet nutrition), user flow map
Cheyenne Liew Khye Yean: Idea contribution, competitive analysis (glasses), presentation slides, website design/moodboard
Brianne Tan Kai Ying: Idea contribution, competitive analysis (trading), business idea (main goal, UVP, target audience)


4. FEEDBACK

Week 1
Ideas like art workshop and parking finder are too complicated to make and need a large budget.

Week 2
Choose between POP MART Trading or Eyewear for final.

Week 3
Certain parts of the sitemap and user flow chart are redundant. Change the pictures and logo in the website layout to avoid copyright issues.

Return to Table of Contents


5. REFLECTION

Before this class, I didn’t really have any experience with coding, so the tutorial part was pretty difficult for me. I was also pretty confused about what we were supposed to do in the beginning, but working in a group made things a lot easier since I could ask my friends for help when I needed it. For my part of the group work (website layout design), I actually found it quite fun, even if I needed to look at a lot of references for ideas. Overall, I learned a lot of new things throughout this task and gained a better understanding of coding and web design.

Return to Table of Contents

Comments

Popular Posts