Task 1: Thematic Interactive Design Proposal

Advanced Interactive Design / Week 1 - Week 4 

Task 1: Thematic Interactive Design Proposal

Low J- Yin / 0352888

---

Introduction

---

Lecture

Week 1

Sir have give us brief for MIB.

Week 2

Public Holiday

Week 3

fig 1.0 exercise 1

By this week, we had try to learn how to draw animation using Adobe Animate.

Week 4

1. Squash and Stretch

2.Anticipation

3.Staging

4. Straight-ahead Action and Pose to Pose

5.Follow through and Overlapping Action

6.Slow in and Slow out

-slow

7.Arc

-using arc as animation path instead of straight lines.

8.Secondary Action

-use secondary action to elicit emotions in your users.

9.Timing

- quickly or slowly to show the information.

10.Exaggeration 

11.Solid Drawing

-visual drawing to help consistent.

12.Appeal

-animation need to appeal to the viewers.

Week 5

Public Holiday

Week 6

fig 1.1 exercise 2

By this week, we learned how to make animation for typography.

---

Exercise

Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which have interactive components that provoke the user. This dynamic experience is meant to keep the user interested in

addition to the thematic concept. Themes in such websites vary from educational, cultural, promotional campaigns to product launch. 

Students are required to create a thematic interactive website proposal with the topic of their choice.

fig 1.0 Y8 website screenshot

My initial idea for this project is inspired by my childhood memories of playing dress-up games on the website "Y8." This nostalgic element drives my vision for a Barbie dolls game website, focusing on the theme of dressing up Barbie dolls.

fig 1.1 inspiration 

The website concept revolves around a retro, early 2000s aesthetic, featuring pixelated Barbie dolls that users can dress up with a simple button press. This design aims to evoke nostalgia and fun, showcasing a variety of styles reminiscent of that era. The dolls will be displayed on one side, with different series of Barbie outfits available for dressing up on the other.

fig 1.2 research of barbie website

Initially, I planned to incorporate official Barbie doll brand clothes into the project. However, due to limited available information, I decided to pivot to a local Malaysian clothing brand that aligns well with my concept. I chose "Mother Chucker's," a brand by Jane Chucks, known for its trendy and suitable clothing for this project.

fig 1.3 mother chucker's official website

The updated concept is akin to stepping into a time machine, capturing the excitement and fun of fashion through our pixelated dolls. By changing outfits, users gradually get introduced to the "Mother Chucker's" clothing brand. The theme is nostalgic, fun, and engaging, designed to attract fashion enthusiasts, nostalgic individuals, young ladies, and teenage girls.

fig 1.4 mood board

The colour theme will primarily use pinks and gaming style graphics, creating a cute and engaging vibe. This design aims to make the audience feel involved with the brand by dressing up their dolls, appealing particularly to young ladies and teenage girls.

My Goal & Objectives:

1. Engagement: Incorporate interactive elements to keep users engaged.

2. Interactivity: Enable clickable elements for easy outfit changes.

3. Exploration: Allow users to explore various outfits and styles.

fig 1.5 flow chart

The user journey on the website begins with the homepage, where users are immediately greeted by a 1:1 pixel doll and a welcoming message popup. 

Homepage: Users are greeted by a 1:1 pixel doll and a welcoming message popup.

Dressing Up Page: After pressing the "start" button, users can dress up their doll by clicking and dragging accessories and dresses. Functional buttons display various categories like dresses, shoes, and accessories. Users could also click on the doll to preview their outfit.

Outfit Page: Showcases different dolls in their "Outfit of the Day," providing inspiration for users on how they can dress up their own dolls. By swiping to left or right to check the different type of outfit.

Product Showcase Section: Displays individual dresses and shoes. Clicking these items directs users to the "Mother Chucker's" website for purchase.

fig 1.6 flow chart

The wireframe is designed to facilitate a smooth and engaging user experience across four key sections:

1. First Page: This page features a prominently displayed 1:1 pixel doll alongside a welcoming message. This setup serves as an entry point, drawing users into the interactive experience.

   

2. Second Section: Here, users can interact with the dress-up game. This section is designed for high interactivity, allowing users to easily click and drag accessories and dresses to style their dolls. The intuitive design ensures that users can enjoy a seamless and engaging dress-up experience.

3. Third Section: This section showcases different dolls in their "Outfit of the Day" (OOTD). It provides users with inspiration on how to style their dolls, highlighting various outfit combinations and styles. This section aims to enhance user creativity and engagement by offering fashion ideas.

4. Fourth Section: The fourth section features individual dresses and shoes. Each item is clickable, taking users directly to the "Mother Chucker's" website for purchase. This section serves as a bridge between the interactive dress-up game and the actual clothing brand, facilitating a smooth transition from play to shopping.

5. Last Section: There will be the information to check on Mother Chucker's social media account and website.

The overall design of the flow chart and wireframe ensures that users are guided through a cohesive and engaging experience, from the initial greeting to interactive play, fashion inspiration, and finally, to making purchases and company profile.        

Here is the proposal slide:

---

Reflection

Throughout this project, I learned the importance of flexibility and adaptation. When initial plans did not work out, pivoting to new ideas and incorporating local elements enriched the project. The process of designing an interactive and engaging website also deepened my understanding of user-centered design principles.

Engaging with the project from concept to execution was a testament to the power of combining nostalgia with modern design. It reinforced my belief in creating user experiences that are both meaningful and enjoyable. By focusing on interactivity and user engagement, I aimed to create a platform that not only entertains but also connects with users on a personal level.