INTERACTIVE DESIGN - Exercise 1: Websie Analysis

on

25.9.2025 - 2.10.2025（Week 1 - Week 2)
Lee Xiang Ling / 0384095 
Interactive Design / Bachelor of Design (Honours) in Creative Media 
Exercise 1 / Website Analysis

LIST / JUMPLINK

LECTURES

Week 2 _ Usability: Designing Products for User Satisfaction

Usability refers to the effectiveness, efficiency, and success with which users can interact with a product or design in a specific context. It represents the second level of User Experience (UX) design. A highly usable design enables users to easily navigate and achieve their goals without difficulty.

  • Consistency
    Consistency is a fundamental principle in web design, both in terms of visual elements and functionality.

    It plays a crucial role in helping users recognize and learn usage patterns. Consistency ensures a unified design across navigation, layout, menu structures, typography, and branding. Similar elements must deliver similar outcomes; otherwise, users may become confused or frustrated.

    Fig. 0.1 - Example of Consistency

  • Simplicity
    User interfaces should be as simple as possible, minimizing unnecessary steps and using clear, understandable symbols and terminology. Such design reduces the likelihood of errors and enables users to achieve their goals more quickly and efficiently.
  • Visibility
    The more visible an element is, the easier it is for users to notice and use it. Therefore, the interface should clearly display the available options and actions, allowing users to understand how to interact with it at a glance.
  • Feedback
    Feedback communicates the outcome of any interaction, making it clear and easy to understand. It ensures that users are aware of whether their actions have succeeded or failed.

    Fig. 0.2 - Example of Feedback
  • Error Prevention
    The system should be able to alert users to potential errors, reducing the risk of mistakes. Since humans are prone to making errors, design should aim to minimize and prevent them whenever possible.

INSTRUCTIONS


<iframe allow="autoplay" height="480" src="https://drive.google.com/file/d/1tcDY9tWQDWifRXmBV5E5en214xlpXnk8/preview" width="640"></iframe>

EXERCISES

For this first exercise, we are required to select five websites from the links provided by the professor and conduct a detailed analysis of each, focusing on aspects such as design, layout, and content quality. Through this process, we will learn how to evaluate website design and user experience, while also improving our skills in web design, critical thinking, and report writing and presentation.

What do we need to analyze:
  • Purpose and Goals - Evaluate whether the website is able to convey information to users clearly and effectively.
  • Visual Design & Layout - Observe and analyze the colors, typography, and imagery used on the website.
  • Functionality & Usability - Observe and analyze the interactive elements and functionalities used in the website.
  • Content Quality & Relevance - Evaluate the accuracy, clarity, and organization of the content
  • Performance & Compatibility - Examine the website’s load speed, responsiveness, and compatibility

WEBSITE 1: 100 Lost Species by Immersive Garden

Fig. 1.1 - 100 Lost Species

1. Purpose and Goal
100 Lost Species is an educational interactive website that showcases 100 animal species documented to have gone extinct. Through an immersive experience, the site allows users to learn about their stories and the reasons behind their extinction, while raising awareness of biodiversity loss and the ongoing ecological crisis. Its introduction states:

“A digital memorial that unfolds across time. In 100 seconds, 100 lost species are remembered, before the site itself disappears, echoing their silence.”

This concept vividly conveys the irreversible nature of extinction and evokes strong emotional resonance, enabling users not only to see the facts of extinction but also to feel the weight of loss.

2. Visual Design and Layout
a) Colour
The website uses a strong contrast of black and off-white as its primary color scheme, creating a solemn and dignified atmosphere. The website transitions from a black homepage to an off-white page, evoking a sense of passage and fading. The typography also adopts the contrasting colors of the pages, highlighting the narrative content and enhancing readability.

Fig. 1.2 - Main Colour

The interactive elements on the page employ low-saturation, grayish tones, creating a quiet, vintage, and natural atmosphere, with a subtle sense of restraint beneath the softness.

Fig. 1.3 - Accent Colour

Although the overall color scheme is harmonious, some text does not contrast strongly with the background, which slightly affects readability. It is recommended that the logo graphic adopt contrasting colors to enhance recognition and visual hierarchy.

b) Typography

Fig. 1.4 & 1.5 - The Typography's sample (from 100 Lost Species)

The website primarily uses a modern serif typeface, complemented by selective use of sans-serif fonts. The headings are large in size and strongly contrasted, effectively highlighting key content. The line spacing is relatively generous, which, combined with the scrollable layout, enhances readability. 

Slight adjustments to letter spacing for better alignment could further improve the overall reading experience.

c) Imagery

Fig. 1.6 to 1.8 - Some Images in this website (from 100 Lost Species)

Since the featured species are extinct and most lack any photographic documentation, the images on the website are not realistic photographs but watercolor-inspired illustrations. This approach ensures a cohesive visual style across the site. As users scroll, each species illustration fades in and out, effectively echoing the theme of “gradual disappearance.” 

However, the imagery, being somewhat monotonous and abundant in number, may lead to visual fatigue after extended viewing.

d) Layout

  
Fig. 1.9 to 1.11 - Different Layouts (from 100 Lost Species)

The website adopts a diverse layout structure:
  • Cover Page – full-screen display
  • Species Information – presented in segmented sections
  • Main Page, About, and Ending Sections – a combination of horizontal and vertical scrolling
In addition, the main page allows users to explore content through three different modes: Visual, Name, and Extinction Date. This layout creates strong visual tension in the browsing experience, while the scrolling transitions guide users deeper into the story of each species, enhancing immersion. Generous use of whitespace ensures that the text does not appear overcrowded, maintaining clarity and readability.

However, the frequent sliding of images may cause visual fatigue, potentially diminishing the browsing experience over time.

3. Functionality & Usability
a) Navagation
The navigation is somewhat unclear, and users may get stuck on the initial screen without knowing how to proceed into the content.

b) Interactive Element
The interactive elements are well-executed and strongly emphasize immersive user experience. By moving the mouse or swiping a finger, users can rotate the images, creating a rendered visual effect. The animations throughout the site align seamlessly with the theme: species information fades in and out sequentially, while the 100-second countdown intensifies the sense of urgency, underscoring the irreversible pace of extinction.

4. Content Quality and Relevance
a) Quality
The overall design and animations of the website are highly impressive, with concise and clear textual information, making the overall quality commendable.

However, the site leans more toward artistic presentation, and some factual and contextual details are not sufficiently elaborated. Moreover, the abundance of dynamic effects may distract users’ attention, leading to a diminished focus on the explanatory text.

b) Relevance
The content and design are closely aligned with the theme, using a 100-second countdown to showcase one hundred extinct species. This allows users to profoundly experience both the rapid pace and the irreversible nature of extinction, effectively conveying the intended message.

5. Performance & Compatibility
The website features extensive animations and dynamic effects, which place relatively high demands on device performance.

6. Conclusion
a) Strengths
The design style is distinctive and the typography is clear. The visual interplay between content and interactive design enhances user engagement while ensuring effective communication of information, thereby achieving the intended purpose.

b) Weaknesses
An excessive use of animations may impact loading speed and device compatibility, while also making it difficult for users to absorb all the species information within a limited timeframe.


WEBSITE 2: The Birth of Oill by Aramco

Fig. 2.1 - The Birth of Oill, Of a Kingdom, Of Aramco

1. Purpose and Goal
“The Birth of Oill” is an explanatory interactive website featured in Saudi Aramco’s “Our History” series, primarily narrating the origins of oil and its development.
a) Purpose
To showcase the company’s historical foundation and highlight how oil has evolved into a cornerstone of national economy and energy.

b) Goal
To communicate the company’s culture and historical trajectory to the public while providing educational value, enabling users to understand the significant impact of the oil industry on the nation and even the world.

2. Visual Design and Layout
a) Colour
The overall page design employs a clear and professional cool-toned palette, with a light bluish-green background that conveys a sense of reliability, professionalism, and friendliness. Compared to highly saturated colors, this approach feels more approachable and user-friendly.

A minor drawback is that the use of white text against a light background reduces readability.

b) Typography

Fig. 2.2 - Typography  (from The Birth of Oill)

The typography primarily uses sans-serif fonts, presenting a standard, modern, and formal style. Clear distinctions between headings and body text, along with well-considered spacing and alignment, greatly enhance reading comfort.

c) Layout
The layout is clean and straightforward, primarily adopting horizontal scrolling, with the content organized sequentially by timeline and subheadings.

3. Functionality & Usability
a) Navagation
The overall navigation is relatively clear; however, due to the color scheme, some navigation indicators are not easily visible, which may hinder user recognition.

b) Interactive Element
Horizontal swiping allows for quick page transitions, with smooth and seamless animations throughout. Each section is equipped with an audio narration feature and a language switch option, enabling access in multiple languages. In addition, users can follow links to explore other series from the company, making the functionality comprehensive and well-rounded.

Fig. 2.3 - Interactive Element  (from The Birth of Oill)

4. Content Quality and Relevance
a) Quality
The content is concise yet informative, complemented by a “Read more” feature that allows users to explore details further. The overall language is formal and standardized, reinforcing a sense of professionalism and authority.

b) Relevance
The content stays closely aligned with the theme, with a clear and well-structured narrative that is both rich and highly educational.

5. Performance & Compatibility
The website demonstrates good device compatibility, with moderate animations, efficient loading speed, and a smooth overall experience. However, the audio feature tends to lag when pages are switched rapidly.

6. Conclusion
a) Strengths
The layout is clean and well-structured, with historical narratives that are clear, rich, and educational. The navigation and language-switching features are user-friendly, making the site accessible and suitable for an international audience.

b) Weaknesses
  • Audio tends to lag when pages are switched rapidly. 
  • The segmented structure of the information is not very user-friendly for those who wish to browse key content quickly. 
  • In addition, the absence of images makes the overall presentation visually less engaging.

WEBSITE 3: Tracing Art by Getty

Fig. 3.1 - Tracing Art

1. Purpose and Goal
“Tracing Art” is a thematic interactive website with strong educational and cultural value.

a) Purpose
To guide users in understanding the importance of art history and cultural heritage through the theme of “tracing the movement of artworks across history.”

b) Goal
To reveal the intricate relationships between artworks, museums, and the art market, while using interactivity and information delivery to enhance public awareness of cultural heritage and the provenance of art.

2. Visual Design and Layout
a) Colour
The overall design primarily employs black, white, and gray tones. A neutral and soft background of white and light gray is paired with black text, creating a comfortable yet distinctive reading environment. This color scheme avoids distracting from the visibility of the artworks while effectively emphasizing the textual content.

b) Typography
The typography primarily uses serif fonts, complemented by limited use of sans-serif fonts. Variations in font size create a clear distinction between headings and body text. Well-balanced letter spacing and line spacing further enhance the overall readability and typographic presentation.

c) Imagery & Layout

Fig. 3.2 - Imagery and Layout (from Tracing Art)

The artworks are arranged on both sides of the text in a layout that appears irregular yet orderly, continuously shifting as the page scrolls. Some images are accompanied by captions placed beside or below them. The textual information is clearly segmented and hierarchically organized, significantly enhancing readability.

3. Functionality & Usability
a) Navagation
The navigation is clear, with guide bars placed at both the top and bottom of the page to facilitate user understanding and browsing. 

b) Interactive Element
The site features a vertical scrolling design, with images and content on both sides changing dynamically as the page scrolls. Language options and section indicators are clearly displayed, allowing users to navigate selectively. All images include external links pointing to the respective museums and sources, facilitating in-depth exploration.

4. Content Quality and Relevance
a) Quality
All content is grounded in factual information, supported by concrete examples and relevant references. The main text is clearly articulated, with a well-defined purpose, and the timeline and factual milestones are presented in a coherent and organized manner.

b) Relevance
Each section revolves around a subheading and illustrates multiple art stories as examples, ensuring that the content and images are closely aligned with the theme and presented in a visually intuitive manner.

5. Performance & Compatibility
Although the site contains numerous images, most are static, placing minimal demands on device and browser performance. The images automatically resize according to the device, ensuring a smooth and seamless browsing experience.

6. Conclusion
a) Strengths
The content is clear and highly evidence-based, making it suitable for academic communication and educational purposes. Navigation is intuitive, with well-balanced integration of text and images. The overall design maintains a clear hierarchy, emphasizing key elements without distraction, and presents a formal and professional style.

b) Weaknesses

Fig.3.3 & 3.4 - The website in the Desktop and Mobile Phone (from Tracing Art)
  • While mobile layout and orientation adjustments have been considered, large graphics may still be partially obscured on smaller devices.
  • Although chapters are provided for quicker browsing, the overall volume of text is substantial, making it less user-friendly for those seeking to quickly grasp the content.

WEBSITE 4: Watches & Wonders by Cartier

Fig.4.1 - Cartier's Watches & Wonders

1. Purpose and Goal
Cartier “Watches & Wonders” is an interactive commercial website.

a) Purpose
To showcase Cartier’s new products, design innovations, craftsmanship, and the brand’s aesthetic and creative capabilities at the Watches and Wonders luxury watch exhibition.

b) Goal
To enhance brand awareness and establish brand positioning, while providing users with an immersive experience that allows them not only to learn about the products but also to engage with the brand’s “worldview,” deepening their impression of both the brand and its offerings.

2. Visual Design and Layout
a) Colour

Fig.4.2 - The colours (form Cartier's Watches & Wonders)

The overall color palette primarily features bright beige and off-white, complemented by accent colors such as brown, black, and gold, which enhance depth and convey a sense of elegance, stability, and luxury.

A minor drawback is that some text uses white on a beige background, which reduces contrast and diminishes the visibility of the information.

b) Typography
The headings use serif fonts to convey elegance, while the body text employs modern, brand-aligned sans-serif fonts, providing a distinctive style and good readability. Both headings and body text are set in relatively large sizes to emphasize key information, with ample whitespace to create a comfortable and refined layout.

c) Imagery & Layout
The combination of large images and background visuals, along with scrolling effects, creates a sense of depth and effectively showcases the watch models. The products are positioned at the center of the page, with decorative background elements emphasizing their distinctive features and design highlights.

3. Functionality & Usability
a) Navagation
The navigation uses a light color, making it difficult for users to clearly see and locate.

b) Interactive Element

Fig.4.3 - The Interective Element (form Cartier's Watches & Wonders)

The website utilizes a scroll-wheel design, where content and background change dynamically as the user scrolls, creating a layered browsing experience. Each product features its own unique background, visual style, and animations. When the screen is static, the product automatically rotates to showcase its side design. Beneath each product name, links are provided to detailed information. Additionally, background elements exhibit different effects during scrolling, and ambient sound is incorporated to enhance the immersive experience.

4. Content Quality and Relevance
The content is focused and comprehensive, covering each product’s exterior design, craftsmanship, and brand story. The detailed sections combine images and text, allowing users to closely examine and understand the value and uniqueness behind each product.

5. Performance & Compatibility
Due to the high density of animations and image resources, the page may experience lag during loading. While the overall experience is smooth, devices with lower performance or specifications may see simplified or downgraded animations, significantly reducing the sense of immersion and visual impact.

6. Conclusion
a) Strengths
The overall design showcases a strong brand identity and distinctive design style, while emphasizing the details and features of the products. Rich visual and interactive experiences capture users’ attention and curiosity, with accompanying sound further enhancing the immersive effect.

b) Weaknesses
  • Device compatibility is somewhat limited. 
  • Navigation links and headings have colors too similar to the background, making them less noticeable and potentially causing users to miss important content.


WEBSITE 5: InkWell

Fig.5.1 - Inkwell

1. Purpose and Goal
Inkwell is an interactive website for a technology company offering commercial

a) Purpose
To showcase the company’s core AI technologies and applications, its vision, as well as the team structure and collaboration methods.

b) Goal
To establish a professional corporate image and attract potential clients, partners, and investors.

2. Visual Design and Layout
a) Colour
The overall color scheme is exceptionally clean and comfortable, featuring a white or light gradient background, with text, graphics, and key elements in darker tones. The design is simple and bright, conveying a professional and understated aesthetic.

b) Typography 
The typography uses sans-serif fonts, which are clean, modern, and highly readable. Headings, subheadings, and body text are clearly differentiated, with ample whitespace. Images and text are arranged in an orderly alternating layout, avoiding clutter and providing a very comfortable overall reading experience.

c) Layout
The overall structure features a single-page vertical scroll with modular sections. The first screen employs ample whitespace and a centered heading to effectively capture users’ attention. The main content often uses a two-column layout with alternating text and images, maintaining readability while providing visual variation. Each section is distinguished by background colors, clearly defining content hierarchy.

3. Functionality & Usability
a) Navagation
The overall navigation is clear, with module names indicated at the top and within each page section, facilitating user understanding and browsing.

b) Interactive Element

Fig.5.2 & 5.3 - Interactive Element pages (from Inkwell)
The website uses a vertical scrolling design, with backgrounds, text, and images fading in and out as the page scrolls. Multiple functional interactive modules allow users not just to read static explanations, but to visually experience how the system operates.

4. Content Quality and Relevance
The content is professionally oriented, structured from Vision, Intelligence, to Applications, with a well-organized modular layout. The site includes numerous industry case studies and application modules, allowing users to see real-world implementations, thereby enhancing trust.

5. Performance & Compatibility
The site features numerous dynamic effects, which may cause lag or longer loading times on low-performance or low-spec devices. However, the homepage demonstrates good browser compatibility.

6. Conclusion
a) Strengths
The overall design is minimalist, featuring clean colors and clear navigation and layout, which enhances the reading experience while conveying a sense of modernity and technology. The use of dynamic elements adds immersion, giving the content a structured and uncluttered presentation.

b) Weaknesses
  • The content is highly professional and conceptual, making it difficult for non-expert users to understand, which may reduce overall usability.
  • The site places high demands on performance; on low-spec or low-performance devices, as well as under slow network conditions, loading speed and overall smoothness may be affected.

REFLECTIONS

By analyzing these websites, I have gained a clearer understanding of the qualities that make a good website, which will greatly assist me in completing my future assignments.