Advance Interactive Design - Proposal & Prototype

Week 1 - Week 8 (23/04/25 -14/06/26)
Felice Jolin (0373636)
Advance Interactive Design / Bachelor of Design (Hons) in Creative Media 
Task - 1 Proposal

---

TABLE OF CONTENT

Instruction

Lectures

Task

Feedback 

Reflection

---

INSTRUCTION

 
Module Information Booklet

back to top

---

LECTURES

Lectures are in Exercise Blog 

back to top

---

TASK

Description 
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. For example, a thematic interactive site could be a museum. Users can go through a virtual exhibition space through interactive tours, games simulation, or questionnaires. In the event that it is a movie, the site can simulate movie universes offering virtual tours through time and space, or any other subject previously created in the movie. The aim of any such site is to keep the user engaged in the medium through interactive exploration.  

Requirements 
Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on:

• A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), 
• Beauty product launch (i.e.: Sephora compact powder) 
• Movie promotion Game release promotion. 
• Gallery/Museum exhibit launch Band/Artist latest release. 

To begin, I think of topics for the website. Initially, I have 3 ideas. The first one is the Pop Mart character 'Moly'. The second to show the palces in Southern Xinjiang, China, particularly Kashgar and Taxkorgan. The third idea is about 7 wonders of the world. Below I compile the ideas on docs. 

 
  Fig Logo (Week 2, 30/04/26)

After consultation with Mr.Shamsul, he didn't want me to do the website for 'Moly' as previously there were already a lot of students doing Pop Mart character. He suggested me to go with idea 2 or 3.

As in terms of popularity, Southern Xinjiang is lacking from the 7 wonders of the world. Therefore, I decided to go with idea 2 'Southern Xinjiang'. In addition to that, I have ever been there so I can use my photographs of the scenery to support my website. 

I went to Southern Xinjiang last April, and specifically to Kashgar and Taxkorgan. In the website, I will be introducing briefly about Southern Xinjiang, Kashgar and Taxkorgan while also alowing audiences to see various destinations and photo spot in the area. *Disclaimer therefore the images used is originaly from me. 

PROPOSAL 

Southern Xinjiang is a culturally rich and historic region. Although less well-known than Northern Xinjiang, it features diverse ethnic communities, traditional lifestyles, historic cities, and cultural influences from nearby countries such as Tajikistan, Afghanistan, and Pakistan. Common areas in Southern Xinjiang, such as Kashgar and Taxkorgan, preserve traditional customs, architecture, music, and markets shaped by centuries of cultural exchange. Taxkorgan is known for its Tajik Chinese communities and its location near Tajikistan, Pakistan, and Afghanistan, while Kashgar is known for its ancient Islamic architecture, local markets, and strong preservation of Uyghur traditions.

Therefore the objectives of the website are:

• To educate people about the history of Southern Xinjiang, mainly Kashgar and Taxkorgan  
• To promote cultural awareness and appreciation of the diverse ethnic groups in Southern Xinjiang, including Uyghur and Tajik Chinese communities.  
• To highlight famous destinations of Kashgar and Tashkurgan through engaging visuals.  
• To digitally preserve and promote the historical relevance and cultural legacy of Southern Xinjiang, mainly Kashgar and Taxkorgan 

Design Direction / Concept:
The theme for this website is a digital journal and documentary-style platform, and acts as a modern interactive museum. It presents Southern Xinjiang through narrative-driven exploration of its places and culture.  The concept focuses on heritage, authenticity, natural beauty, and cultural preservation, allowing users to experience the jourey through Kashgar and Taxkorgan. 

The target audience for this website:
Travelers and cultural tourists who are interested in discovering heritage destinations and historical sites. It also targets to general audiences who wish to know more about Southern Xinjiang and its cultural identity. 

1. Moodboard

Layout

The layout direction will be modern, minimalist and clean 

  Fig Logo (Week 3, 08/05/26)

Color Palette

The colour also was inspired from the golden desert landscapes in Taxkorgan. There were a lot of warm tones traditional buildings, alleys and towns in Kashgar. Gold also a give sense of warmth and authenticity.  

White will be the background color while gold will be the primary color, also used for headings and sub-heading. While dark blue color is for text.

 

 Fig Logo (Week 4, 15/05/26)

 

Typography

References

Fig Logo (Week 5, 22/05/26)

The website will utilize the combination of serif and sans-serif typefaces. Serif will be used for headings and sub-headings while sans serif will be applied to body text.

 

Headings & sub-headings : Cinzel

Fig Logo (Week 5, 22/05/26)

 

Body : MPlus Rounded 1c 

 

 

Fig Typeface (Week 5, 22/05/26)

 

2. Flow Chart

Fig Logo (Week 6, 29/05/26)

3. Logo

Mr.Shamsul suggested me to make a logo for my website. As the focus of the website will be Kashgar and Taxkorgan, I decided to take inspiration from Kashgar's mud-brick archway and combination of peak of mountains that is all over Taxkorgan. Below is the sketch. 

Fig Logo (Week 6, 31/05/26)

 

4. Wireframe

Here is the loading page, that will load and leads you to the landing page that reveals the text 'Let's Begin The Journey' and continuously leads you to the 'HOME' page. In the home page, there will be button 'Discover More' to direct you to the 'ABOUT' page. On the navigation bar, there will be 'HOME', 'CULTURE', 'KASHGAR', and 'TAXKORGAN'. 

Fig Loading, Landing, Home Page (Week 6, 01/05/26)

 

This is the 'ABOUT' page, there will be 2 buttons: 'Kashgar' and 'Taxkorgan'. When you clicke the button, it will appear overlay box of information. 

 

  

Fig About Page (Week 6, 01/05/26)

 

On the 'CULTURE' page, there will be a button 'Discover Culture' which direct you to the next page. Here you are introduce you to the culture of Kashgar or Taxkorgan by clicking the arrow button. 

 

 Fig Culture Page (Week 6, 01/05/26)

On the 'KASHGAR' page there will be button 'Explore Destinations' which direct you to a new page of 6 destinations (Old City, Baisha Lake, Aoyitake, Shache County, N39 Desert, and Karakoram Highway) in Kashgar to explore with arrow button.  

Fig Kashgar Page (Week 7, 02/05/26)

 

On the 'Taxkorgan' page there will be button 'Explore Destinations' which direct you to a new page of 6 destinations (Wahkan Corridor, Pamir Eye, Panlong Ancient Road, Togulenxia Village, Mustagh Ata, Happiness No.5 Bridge) in Kashgar to explore with arrow button.   

 

Fig Taxkorgan Page (Week 7, 02/05/26)

 

5. Proposal Slide

 

Below I combine the information into a Proposal Presentation Slides.

 

Fig Proposal Slide (Week 7, 03/06/26)

 

After consult with Mr.Shamsul, he suggested that beside the logo, I can add typography of 'Southern Xinjiang. Also for the 'KASHGAR' page, he suggested me to put all the text below the images or move the arrow allign with the text. 

 

Fig Wireframe Feedback (Week 7, 04/06/26)

6. Photographs

Next, I begin to compile the photographs I have of each destinations. *Disclaimer again the images are mine personally. 

 

 

 Fig Photographs Compilation (Week 7, 04/06/26)

 

7. Content

After compiling the pictures, I did research for the detailed informations of the 12 destinations in Kashgar and Taxkorgan. I also begin to research for the other content in the website whcih I gatehr in docs. 

 

 
Fig Content Compilation (Week 7, 05/06/26)

 

8. Logo Refinment 

 

As suggested from Mr.Shamsul, I added the text 'Southern Xinjiang' on the logo. The left side logo has 'Cinzel' typeface while the right one is using 'EB' Garamond' typeface. As my website will be using 'Cinzel', I proceed with that typeface to my logo too. I also tried variations of the arch below is closed. 

Fig Logo Digitalize (Week 7, 05/06/26)

 

Philosophy of logo:

The logo represents a link or bridge of the 2 locations in Southern Xinjiang with the 2 icon from Kashgar and Taxkorgan. Therefore, it represents the journey from the ancient city through a long way to the mountain peaks.  

 

Fig Logo (Week 7, 05/06/26)

9. Edit images color

For some of the pictures, I edit the color in Photoshop.

 

Fig Edit Picture Color (Week 7, 05/06/26)

 

PROTOTYPE

 

During the first consultation, Mr.Shamsul suggested me to change all the background color to white. then for the about page, he mentioned there is no title there. Also the layout is quite off. While for the 'CULTURE' page (Kashgar), he mentioned that the arrow stroke is too thick, doesn't looks good. Mr.Shamsul mentioned that the logo on the navigation bar is too close to the top, which I can refine it later. He also reminded me to makesure the space of the text and stroke is consistent across the website. 

  

 

 Fig Feedback from Mr.Shamsul (Week 7, 06/06/26)  

 

Lets start from the first step of the prototype. I begin to make frame with size 1024px X 768px. I export the logo png and start with the 'LOADING' page. Then I also made the loading dot animation by creating compound set and adding variations. 

Fig Loading Page Animation (Week 7, 06/06/26) 

 

From the 'LOADING' page to the 'LANDING' page, I added after delay animation. In the 'LANDING' page, I would like a text revealing so I did masking with compund set for each text. 

 

Fig Landing Page (Week 7, 06/06/26)

 

From 'LANDING' page to 'HOME' page, I also apply after delay so it will continuosly flow. I did the button for navigation bar and apply hover effect from gold to dark blue color. For the 'Discover More' button I also applied hover effect. 

 

Fig Home Page (Week 7, 06/06/26)

 

Next if you click 'Discover More' button will change to 'ABOUT' page. In this page, I want to include a map iamge, I took reference from the internet and draw in Illustrator. 

 

Fig Drawing Map (Week 7, 07/06/26)

 

The first image is the initial design, however Mr.Shamsul suggested me to add title and change the layout. Second image I change the layout. The third image I extend the map to see slightly outside of China as Kashgar & Taxkorgan is close to Afganistan, Kyrgyztan, Tajikistan, and Pakistan. Lastly, I also change the text color of Kashgar & Taxkorgan into gold color on the map.  

 

 

Fig About Page (Week 7, 07/06/26)

 

In the 'ABOUT' page, there are 2 buttons. 'KASHGAR' and 'TAXKORGAN' which when clicked will appear overlay box of information. I also apply hover effects to the button. 

 

Fig About Page Overlay (Week 7, 07/06/26)

 

Next is the 'CULTURE' page. Here I will apply infinite carousel. For the button I also added hover effect.

 

Fig Culture Page 1 (Week 8, 08/06/26)

 

To make the infinite carousel, I gather 6 images, then duplicate it to the right side. I create compound then add variant. The 2nd variant, I drag the same duplicated image to the left side, so it will be allign as the top image and flow continuously. 

 

Fig Infinite Carousel (Week 8, 08/06/26)

When you click the button 'Discover Culture' it will bring you to a new page. Here I apply 2 button animation for Kashgar and Taxkorgan culture made with compound set. For the strokes, I use all 1 point size. 

Fig Culture Page 2 (Week 8, 08/06/26)

This is the 'KASHGAR' page where there will be 'Explore Destinations' button with hover effect that will bring you to a new page of 6 different destinations. 

Fig Kashgar Page 1 (Week 8, 09/06/26)

 

When you click 'Explore Destinations' button, this will appear. 

Fig Kashgar Page 2 (Week 8, 09/06/26)

Below is the variations of layout. I proceed with the second layout as it gives more movement. 

 

Fig Kashgar Slider Variant 1 & 2 (Week 8, 09/06/26)

Next will be the 'TAXKORGAN' page where there will be 'Explore Destinations' button with hover effect that will bring you to a new page of 6 different destinations. 

 

Fig Taxkorgan Page 1 (Week 8, 11/06/26)

 

When you click 'Explore Destinations' button, this will appear.  

 

 

Fig Taxkorgan Page 2 (Week 8, 11/06/26) 

 

Below is the variations layout for the 6 destinations in Taxkorgan. For the strokes and tex boxes, I makesure all are consistent with 1 point size. 

 

Fig Taxkorgan Slider (Week 8, 11/06/26)

 

After finalizing the design for all pages, it's time to apply the effect in prototype pannel. 

 

Fig Apply Prototype (Week 8, 11/06/26)

 

Final Outcome 

Prototype link: https://www.figma.com/proto/vImZVuZrLViv4lJ0lKkznk/Southern-Xinjiang?node-id=439-138&t=syeQU6PubUs4Wa4w-0&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=4%3A5

Google drive link: https://drive.google.com/drive/folders/1caHtqDMKyBSkkeZvTXQ5Asgk_N4mxN68?usp=sharing

 

back to top

---

FEEDBACK

Week 2
Today I showed Mr.Shamsul 3 ideas (Moly;Popmart, Southern Xinjiang, 7 wonders of the worlds) for my website and Mr.Shamsul told me to go with either idea 2 or 3 as idea 1 is too mainstream. 

Week 6
Today I have gather a bit of information of Southern Xinjiang. Mr.Shamsul told me to proceed.  

Week 7
This week I consult with Mr.Shamsul my proposal slides. For the logo, he suggested me to add the text 'Southern Xinjiang' beside the icon. Also for the 'KASHGAR' page, he suggested me to put all the text (destinations name) below the images or move the arrow allign with the text. 

Week 8
Today I have done my prototype and ask Mr.Shamsul for feedbacks. 1. The logo on the navigation bar are too close to the top. 2. Mr.Shamsul suggested me to change the history layout as the initial one loosk messy. 3. I should reduce the thickness of the arrow to make it looks more premium. I also need to keep the stroke size consistent across the website. 4. I should ensure the space of text and line is consistent. 

back to top

---

REFLECTION 

back to top