Labels

Interactive Design: Exercise 1: Website Analysis

 Interactive Design

 Exercise 1: Website Analysis

Start from 3.9.2025
23.9.2025 - 1.10.2025 /Week 1- Week 2
LI XIN LI / 0379305
Interactive Design  / Bachelor of Interactive Spatial Design 
Exercise 1: Website Analysis

Exercise 1: Website Analysis

1. Select Websites: Choose five (5) websites from the provided link.

2. Analyze Websites: For each selected website, review it carefully by considering:
  • The purpose and goals of the website and whether they are effectively communicated to users.
  • The visual design and layout, including the use of color, typography, and imagery.
  • Functionality and usability, including navigation, forms, and interactive elements.
  • The quality and relevance of the content, including its accuracy, clarity, and organization.
  • The website’s performance, such as load times, responsiveness, and compatibility with different devices and browsers.
  • Identify the strengths and weaknesses of each website and how they impact the user experience.
3. Write Reports: Write a brief report for each website, summarizing your findings and recommendations. Each report should be at least 200 words. Ensure the report formatting is clear with headings/subheadings. You can include screen captures of each section or page of the website to explain.

4. Submit: Submit your e-portfolio link for submission.


5 Web Analysis Choosing:

Fig 1.1 The art of silk

1. Purpose and Goal:

The Gucci Foulards 3D Gallery is a digital platform focused on the "90x90 Project," dedicated to reimagining the artistic expression and interactive experience of the brand's silk scarves through 3D technology. Its core objectives include:

• Showcasing Gucci's cross-disciplinary collaborations with nine avant-garde artists, reinterpreting the brand's classic silk scarf collections through artistic creation.

• Providing an interactive "Design Yours" feature, allowing users to immerse themselves in the creation of customized 3D silk scarves, strengthening the creative connection between the brand and consumers.

• Cultivating Gucci's multidimensional brand image of "Luxury Fashion × Contemporary Art × Digital Innovation" and enhancing the brand's cultural value through artistic storytelling.

Sections such as "Gallery," "Design Yours," and "The Artists" clearly guide these goals, allowing users to intuitively perceive the depth of artistic collaborations and the value of digital interaction.


2. Visual Design and Layout

1) Color

The website primarily utilizes a minimalist black and white color scheme, maintaining the art gallery's refined aesthetic and purity. The contrasting light and dark, hue, and color of the white background and 3D scarf models naturally draws the user's attention to the scarf's texture and pattern details. This black and white palette makes the 3D scarf the absolute visual focal point, preventing extraneous color from distracting from the artwork and enhancing the immersive viewing experience provided by 3D technology.

Fig 1.2 Color matching examples

"About the silk" uses white as the main color to highlight the theme of the scarf style, allowing users to understand it more clearly and quickly."About the artist" uses black as the main color to highlight the authority of the art.

Fig 1.3 Scarf introduction page

Fig 1.4 Artist profile page

"Design your silk scarf" uses a light gray secondary color to inspire user creativity while keeping the page neat.

Fig 1.5 Design your silk scarf

2) Typography

The use of a serif font for titles conveys a sense of retro luxury, while a sans-serif font for body text ensures readability, balancing artistic appeal with information efficiency. Variations in font size, weight, and spacing create a clear hierarchy, helping users quickly locate core information. However, the title font size may be too small on small screens, potentially impacting the user experience.

Fig 1.6. Font display

3) Imagery

The interactive 3D scarf model serves as the visual subject, intuitively presenting texture, pattern, light and shadow to highlight the value of luxury goods. The "Artist" section builds the "creator-work" connection through the combination of "portrait + scarf 3D image", enriching the depth of the content.

Fig 1.7. Main image

The "Design Area" embeds step-by-step diagrams, using graphical language to lower the threshold for using 3D functions.

Fig 1.8. Design Area image

3D models and high-definition images may be large and unoptimized, leading to loading delays and disrupting the user experience.
Also, the lack of supporting images such as artist sketches and inspiration materials weakens the narrative of the artistic collaboration.

4) Layout

The layout has a clear functional orientation, with three major entrance sections at the top, ample 3D interactive space in the middle, and guide buttons at the bottom. The paths are short and the goals are clear. At the same time, the space is reasonably allocated. The core area (60%-70%) is used for 3D display and design, and auxiliary information is presented in sidebars/accordion panels to avoid information overload.

Fig 1.9. Design Area image

3. Functionality and Usability

1) Navigation

The navigation bar is concise and clear, including core sections such as "Gallery" and "About". Users can quickly jump to different content areas, and the navigation bar remains fixed when the page scrolls, improving operational convenience.


Fig 1.10. Navigation_dekstop view

2) Interactive elements

The "Design Your Scarf" feature is equipped with intuitive interactive controls, allowing users to visualize the scarf's texture, pattern, and light and shadow effects in real time, strengthening their creative connection and emotional resonance with the brand.

Fig 1.11. Navigation_dekstop view

Users can move the 3D scarf model and switch pages by dragging the mouse.

The "Artist" section features an interactive combination of portraits and 3D scarf images. Clicking on an artist's portrait takes you to their biography or related works, creating a seamless narrative connection between the creator and their work, enhancing user engagement. 

Clicking on a 3D scarf brings up the design concept and scarf image, and a click takes you to the purchase page.


Fig 1.12. Interactive element

It may not be friendly enough for users with low technical proficiency or users using old devices because 3D interactive functions may require updated browsers or enabling WebGL functions. At the same time, excessive reliance on 3D visual and interactive models may not be compatible with assistive technologies such as screen readers, limiting the access experience of groups such as visually impaired users.

4. Quality and relevance

The content focuses on the design, craftsmanship, and artistic concepts of 3D scarves, offering accurate and insightful information. Each scarf is clearly explained with a design concept, such as "Blending vintage floral patterns with modern 3D technology to recreate the brand's century-old aesthetic." The content is organized around scarf pieces, creating a clear structure that allows users to quickly understand the value of each piece.

5. Website's Performance

  • Loading Speed: Pages load quickly. While high-definition 3D images are optimized (such as lazy loading), they load efficiently and load reliably on major browsers (Chrome, Safari, etc.).
  • Compatibility: Compatible with Windows, macOS, iOS, Android, and other operating systems, the interface and functionality remain consistent across browsers.
Fig 1.13.Website adaption in different device

6. Strengths & Weaknesses

1) Strengths

  • Visuals: 3D high-definition dynamic presentation and brand color scheme highlight a sense of luxury and artistry.
  • Brand: Highly unified design and content reinforce the high-end creative image.
  • Functionality: Clear navigation, smooth interaction, multi-device and multi-browser compatibility, and fast loading times.
  • Content: Accurately explained scarf design concepts and clear structure.
1) Weakness

  • Interactivity: The lack of commenting and saving features leads to a lack of user engagement.
  • Content: The "Learn More" section could provide further in-depth information on craftsmanship, inspiration, and more.
  •  Conversion: Adding matching suggestions could help drive conversions.

WEBSITE 2 : Changer Capital ANRI-FunTech Inc.

Fig 2.1.Change Capital ANRI

1. Purpose and Goal:

This website serves as an introduction to the ANRI team. Its core purpose is to showcase the professional backgrounds and roles of its team members, conveying the team's expertise and collaborative strengths to clients and partners, thereby building brand trust. This goal is effectively conveyed through a clear list of team members and profile sections, allowing users to quickly perceive the team's professional image.

2. Visual Design and Layout

1) Color
Fig 2.2.Color


The website primarily uses a minimalist color scheme of black, white, and light gray. This professional, clean aesthetic aligns with the finance/venture capital industry, conveying a sense of maturity and reliability.

Fig 2.3.Color 2 

Each module guide page uses a different color to make it easier for users to distinguish and enrich the website.

2) Typography


Fig 2.4.Font display

A sans-serif font is used throughout to ensure readability. Headings are bold and slightly larger than the main text, creating a clear hierarchy (for example, team member names stand out against their job descriptions).

3) Imagery and  layout

Fig 2.5.Image Staff List

The layout is primarily presented in a grid format, with member profiles, for example, featuring avatars and brief bios. The layout is responsive—a multi-column grid on desktop; it may adjust to a single column on mobile. This consistency ensures usability across devices. However, the visual design is understated; while professional, it lacks visual flair that would make the team feel more approachable or distinctive.

3. Functionality and Usability

1) Navigation

Fig 2.6.Navigation_Mobile View


Navigation is intuitive, allowing quick access to pages like the company profile, investment case studies, and team. Pages are primarily scrollable, providing a smooth user experience, while convenient anchors or fixed menus make it easier for users to quickly find information.

2) Interactive elements

Fig 2.7.Interactive elements

The page contains interactive functions. Users can rotate 360 ​​degrees with the mouse and click to watch videos. The member profile page has a mouse hover function. When the mouse hovers, the photo is changed to simulate a dynamic effect, which increases the interest of the webpage.

3) Usability

The page loads quickly and the content is well organized. Users can easily find specific team members or roles, making information easily accessible. However, there's no search function for the team list, which could become a limitation if the team grows significantly.

4. Quality and relevance

Fig 2.8.Content and quality

The content is concise, and the team members' introductions are accurate and professional. However, most of the profiles tend to be resume-like, lacking personal elements (such as philosophy, investment views, or interesting descriptions), making it difficult for users to establish an emotional connection. Including team member quotes or investment philosophies would be more engaging.

5. Website's Performance

The page loads quickly and is generally responsive. It works fine on mobile devices, though the scrolling required makes the mobile reading experience a bit cumbersome. It's compatible across browsers, though some fonts appear a bit tightly spaced on small screens.
Fig 2.9.Website adaption in different device

6. Strengths & Weaknesses

1) Strengths
  • Clear goals, highlighting team strengths.
  • Minimalist design, consistent style, and fast loading speed.
  • Works well on both mobile and desktop.
2) Weakness
  • Monochromatic page colors, lacking visual focus.
  • Member profiles are reminiscent of resumes and lack interactivity.
  • Scrolling on long pages on mobile is average.

WEBSITE 3 : U x Machina

Fig 3.1.U x Machina

1. Purpose and Goal:

This website is the official English site of U x Machina. Its core positioning is a digital solution provider focusing on "creating human-computer interaction". It is committed to creating an interactive experience that is inspiring, enjoyable and high-quality through the integration of technology and design.

2. Visual Design and Layout

1) Color

Fig 3.2.Color

The main colors are orange to black gradient and white, which highlights the main color of the brand while keeping the page simple.

2) Typography

Fig 3.3.Font display


The concise sans-serif font creates a clear hierarchy—bold titles such as team member names and service categories stand out in the text, ensuring readability and visual flow.

3) Imagery and  layout

Fig 3.3.Imagery and  layout

The layout is dynamic and modular, with sections defined by subtle whitespace and visual separation. The team portraits are all high-resolution, professional assets, reinforcing the brand's premium positioning. While the design is refined, it could use more visual variety to highlight its immersive nature.

3. Functionality and Usability

1) Navigation

Fig 3.4.Navigation_Mobile View

The fixed header menu supports section jumps (team, service, work, etc.), and the clear section separation makes navigation intuitive.



2) Interactive elements

Fig 3.5.Interactive elements

The scroll-triggered animation enhances engagement. The sphere at the bottom expands to become a point, which can be connected into a line when the mouse hovers over it, increasing user engagement and website fun while demonstrating technical strength.

3) Usability

The site loads quickly and the content is logically organized (Team → Services → Methodology → Clients). However, adding a "Case Studies" section and breaking down the projects would be more helpful in showcasing the results.

4. Quality and relevance

  • Accuracy and Clarity: The content is precise and well-researched—the team profile includes academic qualifications, awards, and past positions, and the service description clearly outlines technical capabilities (WebGL, AI, and spatial applications). The language is professional and accessible.
  • Organization: The content follows a logical structure of "Who We Are → What We Do → How We Work," with each section progressing and providing a coherent narrative.
  • Relevance: All content directly supports the brand's positioning objectives. However, supplementary client testimonials or case studies can enhance credibility.

5. Website's Performance

Fig 3.6.Website adaption in different device

  • Loading Speed: Even with high-resolution graphics and animations, the website loads quickly, ensuring a smooth experience.
  • Responsive: The layout seamlessly adapts on mobile devices—sections reflow, and text and images remain readable.
  • Browser Compatibility: Testing on Chrome, Safari shows consistent rendering without formatting issues.

6. Strengths & Weaknesses

1) Strengths
  • Clear Brand Positioning: Effectively communicates Ux Machina's focus on innovative human-computer interaction.
  • Exquisite Design: Modern, minimalist design conveys professionalism and technical strength.
  • Strong Content Hierarchy: Logical information organization guides users through the brand story.
2) Weakness
  • Limited Interactivity: Lacks interactive elements that showcase "immersive" services.
  • Visual Uniqueness Needs Improvement: While the design is sophisticated, it could be more recognizable to reflect its creative and experimental nature.

WEBSITE 4 : Elodie Kimmel-msconnect

Fig 4.1.Elodie Kimmel-msconnect

1. Purpose and Goal:

The website's purpose is to introduce artist Élodie Kimmel's professional identity, artistic philosophy, and creative fields, aiming to attract artistic collaborators (creators, institutions, and brands) and build brand recognition. This goal is effectively communicated through the clear title "À propos" (About), the section structure (Artistic Philosophy, Background, and Creative Fields), and the first-person narrative. Visitors can quickly understand that she is a multifaceted artist focused on both vocal and textual expression, whose core value is "making the expressions of others heard through her own voice."

2. Visual Design and Layout

1) Color

Fig 4.2.Color

A predominantly black and white palette, with subtle touches of warm tones (such as brown text accents), creates a refined, artistic, and textured visual style that aligns with the artist's identity and conveys elegance and professionalism.

2) Typography

Fig 4.3.Font display

A predominantly black and white palette, with subtle touches of warm tones (such as brown text accents), creates a refined, artistic, and textured visual style that aligns with the artist's identity and conveys elegance and professionalism.

3) Imagery

Fig 4.4.Image and layout

The page primarily features a single-column layout, using white space and section separations (such as "Background," "Artistic Philosophy," and "Creative Fields") to organize the information flow. The artist's portrait is a high-quality black-and-white photograph, reinforcing the artistic tone of the personal brand.

3. Functionality and Usability

1) Navigation

Fig 4.5.Navigation_Mobile View

This is a subpage of the "About" section of the personal website. The global navigation (presumably located in the header) guides users to other sections (such as works, collaborations, etc.). Local navigation within the page is achieved through anchors or section headers, providing clear logic.

2) Interactive elements

Fig 4.6.Interactive elements
The page primarily presents information, without complex interactive elements. Audio samples (such as excerpts of her singing or reading) can be embedded to visually demonstrate her artistic abilities and enhance the immersive user experience.

3) Usability

This is a subpage of the "About" section of the personal website. The global navigation (presumably located in the header) guides users to other sections (such as works, collaborations, etc.). Local navigation within the page is achieved through anchors or section headers, providing clear logic.

4. Quality and relevance

  • Accuracy and Clarity: Written in the first person, the content is accurate and emotionally sincere. The artist's artistic philosophy ("disappearing my own voice, highlighting the expressions of others"), educational background (Conservatoire Supérieure de Musique, Royal Academy of Music, London), and collaborations (ORMAIE, Duo des Chats) are all clearly documented, and the language is literary and accessible.
  • Organization: The content is logically organized into sections: "personal background → artistic philosophy → creative fields → collaborations," with smooth transitions between sections, forming a cohesive personal brand narrative.
  • Relevance: All content directly serves the core purpose of "introducing the artist," comprehensively shaping Élodie Kimmel's artistic image, from her professional abilities to her creative style. However, additional details on specific examples of her work (such as project results and audience feedback) could be added to enhance the persuasiveness.

5. Website's Performance

Fig 4.7.Website adaption in different device

  • Loading Speed: The page elements are concise, loading quickly, and without lag.
  • Responsiveness: The page automatically adapts to a single-column layout on mobile devices, ensuring clear and readable text and images, ensuring excellent adaptability.
  • Browser compatibility: Displays consistently across major browsers like Chrome and Safari, without formatting errors.

6. Strengths & Weaknesses

1) Strengths
  • Clear brand identity: The visual and textual styles are highly unified, accurately conveying the artist's artistic and professional image.
  • Complete narrative: From background to philosophy to creative fields, the artist's personal brand story is fully constructed.
  • Readability: The layout and language style are both artistic and accessible, making it suitable for the target audience (art collaborators and enthusiasts).
2) Weakness
  • Insufficient interactivity: The lack of interactive elements such as audio demonstrations and work previews makes it difficult to intuitively demonstrate her artistic abilities.
  •  Lack of case details: While collaborative projects are mentioned, there is a lack of specific results or process descriptions, making the persuasiveness somewhat weak.
  •  Limited layout innovation: The overall design is rather traditional; dynamic visual design could be added to incorporate her "sound" and "text" artistic characteristics.

WEBSITE 5 : Fitzroy Travel-Creative Brand Design

Fig 5.1.Fitzroy Travel

1. Purpose and Goal:

The website's purpose is to promote Fitzroy Travel's travel services, attract travelers , and generate inquiries or bookings. This objective is effectively communicated through a striking hero image, a core service tagline , and a clear navigation bar. Visitors quickly understand that this is an agency that provides customized travel solutions, with its core value being "tailored travel experiences."

2. Visual Design and Layout

1) Color


Fig 5.2.Color

The white and light wood tones create a fresh, professional, and travel-inspired visual style, consistent with the travel industry's positioning and conveying a sense of reliability and vitality.

2) Typography

Fig 5.3.Font display

A sans-serif font is used. Headings (such as "Fitzroy Travel" and "Our Services") are bolded and enlarged to emphasize hierarchy. The main text is clear and easy to read. The overall layout is simple and elegant, ensuring effective information transmission.

3) Imagery and  layout

The layout follows a typical travel website structure—a hero area (large travel image) + services section + destination showcase + brand story. The travel images are high-quality and engaging (e.g., African savannah, European town), but the layout is somewhat templated and could benefit from adding dynamic elements (such as a carousel with transition effects) to enhance visual vibrancy.

3. Functionality and Usability

1) Navigation

Fig 5.4.Navigation_Mobile View

The top navigation bar clearly divides sections such as "Destinations," "Services," "About Us," and "Contact," allowing for quick navigation. Section dividers and anchors are used within the page for local navigation, creating a logical and intuitive experience.

2) Interactive elements

Fig 5.5.Interactive elements

A "Plan Your Trip" button (to guide users) and hover effects (slightly enlarge and darken the shadow) are provided for destination cards, but deeper interactions (such as destination filtering and itinerary preview tools) are lacking, resulting in limited user engagement.

3) Usability

The page loads quickly, and the content is organized linearly (Services → Destinations → Brand → Contact), making it suitable for quick browsing. However, there are minor mobile adaptation flaws (e.g., some images are not fully displayed on small screens), and the responsive experience needs to be optimized.

4. Quality and relevance

  • Accuracy and Clarity: The content is concise and clear, with clear and understandable service descriptions (customized tours, group tours, honeymoons, etc.), and clear destination categorization (Africa, Europe, Asia, etc.). However, there are a lack of specific itinerary examples, price ranges, or customer reviews, resulting in a low information density.
  • Organization: The content is logically organized into "Services → Destinations → Brands → Contacts," with smooth transitions between sections. However, the granularity of information within each section is relatively coarse (e.g., "Destinations" lists only regions, without detailed information on specific countries or experiences).
  • Relevance: All content revolves around "travel services," with a clear core purpose. However, detailed descriptions of the travel experience (e.g., itinerary highlights, unique services) could be added to enhance appeal.

5. Website's Performance

Fig 5.6.Website adaption in different device

  • Loading Speed: Page elements (images and text) load quickly, with no noticeable delays.
  • Responsiveness: The app is fully mobile-friendly, but the layout of some images and buttons needs optimization on smaller screens (for example, the navigation bar's interactive experience is poor after it collapses on mobile devices).
  • Browser Compatibility: Displays consistently across Chrome and Safari, with no formatting errors.

6. Strengths & Weaknesses

1) Strengths
  • Visual Appeal: High-definition travel imagery and a fresh color scheme effectively evoke a desire to travel, and the brand's tone aligns with the target audience.
  • Clear Navigation: Clearly defined sections allow users to quickly find core information (services, destinations, and contacts).
  • Loading Performance: Pages load efficiently, ensuring a basic user experience.
2) Weakness
  • Insufficient Interaction: A lack of tools like destination filtering and itinerary planning prevents users from exploring the product in depth.
  • Coarse Content Granularity: A lack of specific travel examples, prices, or reviews makes it difficult to build trust and provide a basis for decision-making.
FEEDBACK

After I finished the assignment, the teacher gave me feedback that I needed to add website citations and clearly label the images, and I made the changes immediately.

Reflection

Completing this website analysis assignment was a valuable practice in applying theory to real scenarios. From feeling stuck initially to finalizing the report, I gained growth while clearly seeing my shortcomings.

The most notable gain was the deepening of my understanding. Previously, I only cared about whether a website was "good-looking or easy to use" when browsing. After focusing on analyzing "positioning, functions, and user experience" this time, I learned to explore the logic behind the design. For example, a tool-oriented website hiding advanced functions was not "lacking features" but to align with its positioning of "serving beginners" and reduce users' learning costs. This shift from "looking at the surface" to "exploring the essence" helped me truly grasp the meaning of "user-centricity". Meanwhile, my structured thinking was honed—using the framework of "positioning - functions - experience - optimization" to organize information not only made the report logically clear but also allowed me to quickly identify core issues like "mismatch between functions and positioning".

However, the assignment also exposed many shortcomings. First, my professional knowledge was insufficient. When I saw content overflow or button overlap on mobile pages, I could only say "it's not easy to use" but couldn't point out professional reasons like "lack of flexible layout". When faced with user data, I could only describe it superficially without in-depth interpretation of the underlying problems, showing a gap between theory and practice. Second, my observation and comparative analysis were inadequate. When analyzing similar websites, I only described their individual features separately without delving into the connection between functional differences and user activity, leading to shallow conclusions. Finally, the suggestions I put forward were vague. For "slow loading speed", I only said "suggest optimizing" without providing specific solutions like "compressing image size" or "simplifying code", making them practically valueless.

I will make targeted improvements next. First, I will master knowledge points such as responsive design principles and core user experience indicators, and practice by disassembling case studies. Second, I will add comparative analysis of similar websites in future analyses and use tables to sort out differences. Third, I will focus on "feasibility" when putting forward suggestions, clarifying "what to change, how to change, and the expected effect after change". This assignment is a new starting point, and with these reflections to guide my accumulation, I will definitely do better next time.


Labels:

Comments

Post a Comment

Popular Posts