INTERACTIVE DESIGN - PROJECT 1: DIGITAL BUSINESS CONCEPT

-
21.04.26 - 12.05.26 (Week 1 - Week 4) 
Michelle (0373843)
Interactive Design  / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 1: Digital Business Concept

TABLE OF CONTENTS

CLASS: LECTURES, TUTORIAL, & PRACTICAL

Week 1 (21/04/26)

Introduction, assignment brief, group forming, & idea brainstorming.

Web Languages:
  • HTML
  • CSS
  • JavaScript
  • PHP
  • Phyton
  • SQL
  • etc. 

Week 2 (28/04/26)

Code Learning Website: w3schools

AI Tools:
  • Deepseek
  • Qwen
  • Gemini
  • Microsoft Copilot
  • GitHub
Notepad

Fig 1.2.1 Notepad

Visual Studio Code
Install extensions:

Fig 1.2.2 VS Code Extensions

VS Code - HTML Tutorial
  • New folder - select folder - new file
  • Right click - open with live server
  • Safe file - refresh live server - updated
  • Insert link
  • Insert Image
  • Prompt AI chat box - to code for us
  • Try out HTML elements
Fig 1.2.3 VS Code - HTML Tutorial

Fig 1.2.4 VS Code - Result

HTML Elements
  • title = "I'm a tooltip"; (inform messages/context/functionality, appears when hover over).
  • <br> enter
  • <hr> line
  • <pre> extra space & enter will show exactly as typed.
  • style attribute
Note:
  • When quotation mark is written in text, use '
  • Empty tag: stand alone, no need closing tag
  • In paragraphs <p> extra spaces & enter won't show.

Style Attribute
=attribute:value;

Week 3 (05/05/26)

Business concept presentation.


INSTRUCTIONS


Assignment 1
Form in a group of 3.
  1. Come up with a unique business idea > transform it to a website.
    • Unique Value Proposition (UVP) - why choose us than others? what makes it different?
    • Primary goal, target idea.
  2. Analyze competitors (2-3).
  3. Create sitemap & user flow.
  4. Create moodboard (prototype) - figma/miro/canva
Presentation: Week 3.

PROCESS WORK

Week 1 (21/04/26)

Group:
  • Fann Wong Jing En (0382237)
  • Michelle (0373843) - Me
  • Ngo Ting Xuan (0382224)
IDEATION
Study by the Scene: study & productivity tool

Unique Value Proposition
Study by the Scene reimagines productivity as an interactive experience where every progress transforms the space.
  • Themed environment for different moods (lighting & atmosphere).
  • Time progression is visible through life movements.
  • Every task completion reveals new objects/items.
Goal
Accompany users stay focused and consistent through an ever-changing space that visually reflects their productivity and progress. 

Target Audience
Individuals seeking to improve focus and consistency in their goals, commitments, and responsibilities.


RESEARCH
Competitor Analysis: focusday.io

Fig 3.1.1 Focusday.io mainpage

Purpose & Goal
Improving time management & focus using customizable interval timer to optimize work and break balance.

Fig 3.1.2 Focusday.io visual design

Visual Design
Theme
Minimalist and simplistic. The website doesn't have any decorative elements. 

Color
Black text-boxes with white texts. Color (gradient) is applied only to the background, with a few customization options available.

Typography
Non-serif font with large size. Titles are big and bold, creating easy readability.

Imagery
No imagery, only simple icons as buttons.

Layout
Basic, tidy, with good hierarchy and spacing, supports the focused atmosphere.

Fig 3.1.3 Focusday.io functionality
Functionality & Usability
Navigation
Very straight-to-the-point and easy to understand.

Interactive elements
A few buttons and minor hovering effects.

Quality & Relevance
The website provides a straightforward and versatile tool which fulfils its purpose. The minimum technicality aligns with its focused theme. 

Fig 3.1.4 Focusday.io coampatibility

Performance
Load Time
Very fast due to the tiny amount of content, features, and interactivity.

Responsiveness & compatibility
The website are responsive to different dimensions, able to adapt its function in different navigation and layout.

Week 2 (28/04/26)

USER FLOW

Fig 3.2.1 Website User Flow
MOODBOARD

Prototype

Figma Workspace

Week 3 (05/05/26)

Business concept presentation


Final Business Concept (Presentation Slides)

Presentation Slides 

FEEDBACK

Week 1 (21/04/26)

General Feedback
  • Suggested software: Visual Studio Code - can use the help of AI for coding.
  • Learn to work in a team - important for the working world.
  • When coming up with ideas, don't think too much about technicality (but stay realistic).
  • Don't change sitemap & user flow too much - limited time.
Specific Feedback
  • Good idea (study & productivity tool), but include more environments (options) rather than focusing on one.

Week 2 (28/04/26)

General Feedback
  • For simple tasks, edit ourselves. AI took time, so use just when necessary.
  • Prompt AI: be very detailed and straightforward, no ambiguity. Use accurate keywords.
  • Make presentation in points, not paragraph. Create structure, communicate idea well.
  • Follow international 
Specific Feedback
  • Rephrase the UVP to be more accurate (not misleading).
  • Need to think about how to gain money/profit.
  • Idea suggestion: 
    • Consider having locked scenes.
    • Add music feature with attractive image/video.
    • Create icons to collapse the task manager.
    • Directly incorporate timer in the environment.
    • Make the user feel like travelling real places (around the world).
  • Either use game engine or just use images/vids to depict the function.
  • Find free pictures/can use AI to help generate images.

Week 3 (05/05/26)

General Feedback
  • Can use website templates and modify to save time. We can finish 1 website in 1 week.
  • Working as programmer could be stressful. Need to finish a website in 2 weeks, low salary.
  • In work place, ideas are important.
  • In a presentation, don't put things we don't understand. People will question it. Make sure we can explain every term we include.
Specific Feedback
  • User Flow
    • Start timer: change shape (process) & add description. Go directly to resume/pause then timer end. No need to split.
    • Timer done notification: change shape (process).
    • Add process after unlock items before reset.
    • After task list reset, go back to task list.
  • Prototype
    • Use standardize icons for each scene/environment.
    • Cafe & forest scene: task list is not accurate to concept (unlock items).
  • Add sitemap (navigation) to slides.

REFLECTION

Experience

!

Observation

- About
- More > subscription

Proper aesthetic
Supporting ilustrations for points

Findings

!


Comments

Post a Comment