EXERCISE 1 | WEBSITE ANALYSIS
25/9/2025 - 2/10/2025 (Week 1 - Week 2)
LIST OF CONTENT :
- Lecture Notes
- Exercise 1 : Website Analysis
LECTURE NOTES
WEEK 2
What is Usability?
- How effectively, efficiently, and successfully users can use a product in specific situations.
- Part of User Experience (UX) Design - the second level of UX.
- Good usability means users can navigate interfaces easily without expert knowledge.
- High usability guides users through the easiest route to achieve their goals.
1. Consistency
- Visual elements and functionality should look and work the same throughout
- Makes design intuitive and easier to learn
- Applies to: navigation, page layout, menus, fonts, typography, branding
- Example: If buttons look a certain way, ALL buttons should look that way
- Real examples: Adidas app, Strava app, Airbnb app, ZUS coffee app
- Minimize steps in any process
- Use obvious symbols and terminology
- Make it difficult for users to make mistakes
- Helps users achieve goals faster and more efficiently
- The more visible an element is, the more likely users will know about it
- Users should understand their options just by looking at the interface
- If something is out of sight, it's difficult to know about and use
- Communicates results of user interactions
- Shows success or failure of a task
- Example: Icon changes color when you select it in a mobile app
- Alerts users when they're making mistakes
- Makes it easy to complete tasks without errors
- Important because humans naturally make mistakes
- Complex interfaces
- Confusing navigation
- Poor feedback
- Inadequate error handling
EXERCISE 1
INSTRUCTIONS
For this week's exercise, we had to choose 5 different websites from Site 1, Site 2, Site 3, and Site 4. The goal is to analyze each sites functionality, design, layout, content and whether it represents what they're business or what their function is. Then, analyse the strength and weaknesses of the sites, considering the user experience, summarising the findings and recommendations in a brief report.
What to Have in the Analysis :
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website, including its use of colour, typography, and imagery.
- Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
- Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organisation.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Write a brief report summarizing each site in no less than 200 words. You can include a screen capture of each section or page of the website to explain. Making sure the formatting of the report (using headings/subheadings) is clear.
▶ WEBSITE 1
AETHER:1 by OFF+BRAND
 |
| Fig 3.1.1 Aether:1 |
Purpose and Goals Communication
The website presents Aether 1 as a premium earbud product with extraordinary technological claims, particularly around perpetual power ("No charging, no constraints"). The core purpose—selling high-end wireless earbuds—is communicated through aspirational messaging and bold product promises. However, the messaging lacks specificity and clarity. Phrases like "Sound Without Boundaries" and "timeless resonance" are poetic but vague. The most striking claim about "Sub Alphatonic Power Core" suggesting eternal energy without charging is either revolutionary or dubious, yet receives no technical explanation or credibility-building details. The goals appear to be creating intrigue and positioning as a luxury audio brand, but the lack of concrete information undermines trust and purchase intent.
Visual Design and Layout
The design embraces extreme minimalism with a dark, sophisticated color palette and abundant white space. The typography is clean and modern, using a refined sans-serif that reinforces the premium positioning. The layout follows a vertical scroll structure with distinct sections for each feature claim. Navigation appears minimal—just a logo/home link and a specs link. The aesthetic is undeniably elegant and contemporary, evoking luxury tech brands. However, the design may be too sparse, offering little visual interest beyond text. The absence of product photography or imagery showing the actual earbuds is a critical weakness—users cannot see what they're considering purchasing. The modal dialog includes placeholder Lorem ipsum text, suggesting incomplete development or a template that wasn't properly customized.
Functionality and Usability
The navigation is extremely limited, with only a specs page link visible beyond the homepage. The modal functionality appears to work (close button present), but contains dummy content, indicating either incomplete implementation or poor quality control. Interactive elements seem minimal—primarily just basic linking and scrolling. There's no visible shopping cart, pricing information, purchase button, or product configurator on the homepage, which is unusual for an e-commerce site. The "Intuitive Controls" section mentions haptic feedback for the product itself, but this doesn't translate to the website experience. Users seeking detailed information, specifications, pricing, or purchase options would likely feel frustrated by the lack of actionable pathways.
Content Quality and Relevance
The content is aspirational but lacks substance. Key feature descriptions include "Unrivalled audio quality," "Crafted for pure clarity," "Meticulous future forward design & materials," and "Intuitive Controls"—all common marketing language without differentiating details. The most specific claim about the "Sub Alphatonic Power Core" providing eternal energy is extraordinary and would require substantial proof, patents, or technical explanation to be credible, none of which is provided. The presence of Lorem ipsum placeholder text in the modal dialog is a significant red flag indicating incomplete content development or lack of attention to detail. There's no information about the company, team, technology validation, pricing, availability, warranty, or customer support. The organization is straightforward but oversimplified—just four feature blocks without hierarchy or detailed exploration options.
Performance and Technical Considerations
With minimal content and no images of the actual product, the page should load extremely quickly. The simple structure and limited interactive elements suggest good performance across devices and browsers. The responsive design likely adapts well to mobile given the straightforward vertical layout. However, the ".ai" domain extension combined with futuristic claims and placeholder content raises questions about legitimacy. The site appears to be either in very early development, a concept/mockup, or potentially a placeholder for a product that doesn't actually exist yet. Browser compatibility should be excellent given the basic HTML structure without complex features.
Overall Assessment
Aether1.ai presents a beautifully minimal aesthetic that successfully evokes luxury and sophistication, but fundamentally fails to function as an effective product website. The absence of product imagery is inexcusable for an e-commerce site. The extraordinary claim about perpetual battery power without any supporting evidence damages credibility rather than building excitement. The presence of Lorem ipsum placeholder text suggests the site is either incomplete or poorly quality-controlled. For a legitimate product launch, this site needs comprehensive revision including actual product photography, detailed specifications, credibility indicators, pricing information, and a clear purchase pathway. Currently, it reads more like a design concept or early mockup than a functional commercial website ready to convert visitors into customers.
▶ WEBSITE 2
EXAMPLE
Fig 3.1.2 Example
Purpose and Goals Communication
The website effectively positions Example as a creative agency specializing in hospitality, food and beverage, and lifestyle brand experiences. The purpose is clearly conveyed through an impressive portfolio showcasing transformational work for premium clients. Each project follows a consistent format with compelling one-line descriptions that immediately communicate impact and results. The agency's expertise in cultural placemaking, brand launches, and experiential campaigns is evident throughout. However, there's minimal explanatory content about their actual services, methodology, or what makes them unique beyond the work itself.
Visual Design and LayoutThe design embraces a bold, image-forward approach with large, high-quality photography dominating the page. The layout follows a grid system presenting case studies uniformly, creating visual rhythm and professionalism. Each project features dual hero images and "(01)" numbering that adds a distinctive design element. The color palette appears sophisticated and varied, drawing from the imagery itself. Typography is clean and modern, though the repeated "Coming Soon" badges somewhat undermine the polished aesthetic. The overall visual presentation is contemporary and aspirational, effectively targeting premium hospitality and lifestyle brands.
Functionality and UsabilityNavigation appears minimal in the fetched content, focusing primarily on clickable project tiles linking to case studies. The structure is straightforward—a simple scrollable portfolio grid. However, the abundance of "Coming Soon" labels (appearing on nearly every project) creates friction and may frustrate users expecting complete case studies. The interactive elements seem limited to basic linking functionality. Without seeing the full navigation structure, it's difficult to assess how easily users can access other key pages or filter projects by category.
Content Quality and OrganizationThe content demonstrates strong copywriting with punchy, results-oriented descriptions that clearly articulate value delivered. Projects span diverse categories including spirits brands (Smirnoff, Don Julio, Talisker), hospitality venues (QT Hotels, InterContinental, The Standard), and food establishments (Koko Black, Totti's, Petit Loulou). The organization is purely chronological or priority-based rather than categorized, which may make it challenging for prospects seeking specific expertise areas. The copy is accurate and compelling, though the lack of supporting context about agency capabilities, team, or process is noticeable. The extensive portfolio (40+ projects shown) demonstrates breadth but could benefit from curation or filtering options.
Performance ConsiderationsWith numerous high-resolution images loading on a single page, performance could be a concern, particularly on slower connections or mobile devices. The use of Webflow CDN hosting suggests optimization, but lazy loading implementation would be critical for such an image-heavy page. The responsive design likely adapts to different screen sizes given the grid structure, though mobile performance with this many images warrants testing. Browser compatibility should be strong given the straightforward HTML structure and modern hosting platform.
Overall AssessmentExample presents a visually impressive portfolio that effectively showcases their work with premium brands. The site succeeds in establishing credibility and aesthetic sensibility but could enhance user experience by reducing "Coming Soon" placeholders, adding filtering functionality, and providing more context about their approach and services beyond the project descriptions alone.
The website effectively positions Example as a creative agency specializing in hospitality, food and beverage, and lifestyle brand experiences. The purpose is clearly conveyed through an impressive portfolio showcasing transformational work for premium clients. Each project follows a consistent format with compelling one-line descriptions that immediately communicate impact and results. The agency's expertise in cultural placemaking, brand launches, and experiential campaigns is evident throughout. However, there's minimal explanatory content about their actual services, methodology, or what makes them unique beyond the work itself.
Visual Design and LayoutThe design embraces a bold, image-forward approach with large, high-quality photography dominating the page. The layout follows a grid system presenting case studies uniformly, creating visual rhythm and professionalism. Each project features dual hero images and "(01)" numbering that adds a distinctive design element. The color palette appears sophisticated and varied, drawing from the imagery itself. Typography is clean and modern, though the repeated "Coming Soon" badges somewhat undermine the polished aesthetic. The overall visual presentation is contemporary and aspirational, effectively targeting premium hospitality and lifestyle brands.
Functionality and UsabilityNavigation appears minimal in the fetched content, focusing primarily on clickable project tiles linking to case studies. The structure is straightforward—a simple scrollable portfolio grid. However, the abundance of "Coming Soon" labels (appearing on nearly every project) creates friction and may frustrate users expecting complete case studies. The interactive elements seem limited to basic linking functionality. Without seeing the full navigation structure, it's difficult to assess how easily users can access other key pages or filter projects by category.
Content Quality and OrganizationThe content demonstrates strong copywriting with punchy, results-oriented descriptions that clearly articulate value delivered. Projects span diverse categories including spirits brands (Smirnoff, Don Julio, Talisker), hospitality venues (QT Hotels, InterContinental, The Standard), and food establishments (Koko Black, Totti's, Petit Loulou). The organization is purely chronological or priority-based rather than categorized, which may make it challenging for prospects seeking specific expertise areas. The copy is accurate and compelling, though the lack of supporting context about agency capabilities, team, or process is noticeable. The extensive portfolio (40+ projects shown) demonstrates breadth but could benefit from curation or filtering options.
Performance ConsiderationsWith numerous high-resolution images loading on a single page, performance could be a concern, particularly on slower connections or mobile devices. The use of Webflow CDN hosting suggests optimization, but lazy loading implementation would be critical for such an image-heavy page. The responsive design likely adapts to different screen sizes given the grid structure, though mobile performance with this many images warrants testing. Browser compatibility should be strong given the straightforward HTML structure and modern hosting platform.
Overall AssessmentExample presents a visually impressive portfolio that effectively showcases their work with premium brands. The site succeeds in establishing credibility and aesthetic sensibility but could enhance user experience by reducing "Coming Soon" placeholders, adding filtering functionality, and providing more context about their approach and services beyond the project descriptions alone.
The website effectively positions Example as a creative agency specializing in hospitality, food and beverage, and lifestyle brand experiences. The purpose is clearly conveyed through an impressive portfolio showcasing transformational work for premium clients. Each project follows a consistent format with compelling one-line descriptions that immediately communicate impact and results. The agency's expertise in cultural placemaking, brand launches, and experiential campaigns is evident throughout. However, there's minimal explanatory content about their actual services, methodology, or what makes them unique beyond the work itself.
Visual Design and LayoutThe design embraces a bold, image-forward approach with large, high-quality photography dominating the page. The layout follows a grid system presenting case studies uniformly, creating visual rhythm and professionalism. Each project features dual hero images and "(01)" numbering that adds a distinctive design element. The color palette appears sophisticated and varied, drawing from the imagery itself. Typography is clean and modern, though the repeated "Coming Soon" badges somewhat undermine the polished aesthetic. The overall visual presentation is contemporary and aspirational, effectively targeting premium hospitality and lifestyle brands.
Functionality and UsabilityNavigation appears minimal in the fetched content, focusing primarily on clickable project tiles linking to case studies. The structure is straightforward—a simple scrollable portfolio grid. However, the abundance of "Coming Soon" labels (appearing on nearly every project) creates friction and may frustrate users expecting complete case studies. The interactive elements seem limited to basic linking functionality. Without seeing the full navigation structure, it's difficult to assess how easily users can access other key pages or filter projects by category.
Content Quality and OrganizationThe content demonstrates strong copywriting with punchy, results-oriented descriptions that clearly articulate value delivered. Projects span diverse categories including spirits brands (Smirnoff, Don Julio, Talisker), hospitality venues (QT Hotels, InterContinental, The Standard), and food establishments (Koko Black, Totti's, Petit Loulou). The organization is purely chronological or priority-based rather than categorized, which may make it challenging for prospects seeking specific expertise areas. The copy is accurate and compelling, though the lack of supporting context about agency capabilities, team, or process is noticeable. The extensive portfolio (40+ projects shown) demonstrates breadth but could benefit from curation or filtering options.
Performance ConsiderationsWith numerous high-resolution images loading on a single page, performance could be a concern, particularly on slower connections or mobile devices. The use of Webflow CDN hosting suggests optimization, but lazy loading implementation would be critical for such an image-heavy page. The responsive design likely adapts to different screen sizes given the grid structure, though mobile performance with this many images warrants testing. Browser compatibility should be strong given the straightforward HTML structure and modern hosting platform.
Overall AssessmentExample presents a visually impressive portfolio that effectively showcases their work with premium brands. The site succeeds in establishing credibility and aesthetic sensibility but could enhance user experience by reducing "Coming Soon" placeholders, adding filtering functionality, and providing more context about their approach and services beyond the project descriptions alone.
The website effectively positions Example as a creative agency specializing in hospitality, food and beverage, and lifestyle brand experiences. The purpose is clearly conveyed through an impressive portfolio showcasing transformational work for premium clients. Each project follows a consistent format with compelling one-line descriptions that immediately communicate impact and results. The agency's expertise in cultural placemaking, brand launches, and experiential campaigns is evident throughout. However, there's minimal explanatory content about their actual services, methodology, or what makes them unique beyond the work itself.
Visual Design and Layout
The design embraces a bold, image-forward approach with large, high-quality photography dominating the page. The layout follows a grid system presenting case studies uniformly, creating visual rhythm and professionalism. Each project features dual hero images and "(01)" numbering that adds a distinctive design element. The color palette appears sophisticated and varied, drawing from the imagery itself. Typography is clean and modern, though the repeated "Coming Soon" badges somewhat undermine the polished aesthetic. The overall visual presentation is contemporary and aspirational, effectively targeting premium hospitality and lifestyle brands.
Functionality and Usability
Navigation appears minimal in the fetched content, focusing primarily on clickable project tiles linking to case studies. The structure is straightforward—a simple scrollable portfolio grid. However, the abundance of "Coming Soon" labels (appearing on nearly every project) creates friction and may frustrate users expecting complete case studies. The interactive elements seem limited to basic linking functionality. Without seeing the full navigation structure, it's difficult to assess how easily users can access other key pages or filter projects by category.
Content Quality and Organization
The content demonstrates strong copywriting with punchy, results-oriented descriptions that clearly articulate value delivered. Projects span diverse categories including spirits brands (Smirnoff, Don Julio, Talisker), hospitality venues (QT Hotels, InterContinental, The Standard), and food establishments (Koko Black, Totti's, Petit Loulou). The organization is purely chronological or priority-based rather than categorized, which may make it challenging for prospects seeking specific expertise areas. The copy is accurate and compelling, though the lack of supporting context about agency capabilities, team, or process is noticeable. The extensive portfolio (40+ projects shown) demonstrates breadth but could benefit from curation or filtering options.
Performance Considerations
With numerous high-resolution images loading on a single page, performance could be a concern, particularly on slower connections or mobile devices. The use of Webflow CDN hosting suggests optimization, but lazy loading implementation would be critical for such an image-heavy page. The responsive design likely adapts to different screen sizes given the grid structure, though mobile performance with this many images warrants testing. Browser compatibility should be strong given the straightforward HTML structure and modern hosting platform.
Overall Assessment
Example presents a visually impressive portfolio that effectively showcases their work with premium brands. The site succeeds in establishing credibility and aesthetic sensibility but could enhance user experience by reducing "Coming Soon" placeholders, adding filtering functionality, and providing more context about their approach and services beyond the project descriptions alone.
▶ WEBSITE 4
CARTIER - WATCHES & WONDERS
Fig 3.1.4 Cartier Watches & Wonders
Purpose and Goals CommunicationThe website is described as "a journey through refined universes showcasing iconic timepieces," establishing its purpose as an immersive digital showcase for Cartier's Watches & Wonders 2025 collection. The terminology "refined universes" suggests the site creates distinct thematic environments or narrative spaces for presenting different timepiece collections, rather than a simple product gallery. The focus on "journey" indicates the site prioritizes experiential storytelling over direct product sales or information retrieval. This positions the website as a brand experience destination aligned with luxury positioning, where the goal is to create desire and emotional connection with the timepieces through curated digital environments. The showcase format suggests visitors are meant to explore and discover rather than quickly locate specific products.
Visual Design and LayoutThe site employs scroll-triggered effects, parallax elements, cinematic transitions between sections, and possibly 3D product visualizations or interactive watch presentations. The "refined universes" concept implies distinct visual environments for different watch collections, each with its own aesthetic treatment, color palette, and atmospheric design. The layout likely features full-screen or near-full-screen sections that immerse users in each universe, with high-resolution photography or video showcasing timepieces in carefully art-directed settings. The responsive design implementation suggests the visual experience adapts across devices, though the animation-heavy approach may be simplified on mobile platforms.
Functionality and UsabilityThe site's functional architecture appears to prioritize visual storytelling over conventional navigation efficiency. While the site is navigable, users may experience some friction in accessing specific information or moving through content. The may be limitations in inclusive design implementation, suggesting potential issues with screen reader compatibility, keyboard navigation, alternative text for images, or color contrast ratios. The navigation structure likely emphasizes scrolling and visual exploration, possibly with minimal visible navigation elements to maintain aesthetic purity. This approach creates a more cinematic experience but may challenge users seeking quick access to specific watches, technical specifications, or purchasing information. The semantic and SEO implementation suggests adequate but not exceptional discoverability through search engines.
Content Quality and RelevanceThe content is positioned as supporting the visual journey through "refined universes," suggesting narrative-driven descriptions that contextualize each timepiece within broader thematic or conceptual frameworks. The content likely includes brand storytelling emphasizing Cartier's horological heritage, craftsmanship narratives, and design philosophy rather than purely technical specifications. Each "universe" presumably has its own narrative thread connecting the watches within that collection. The content structure appears designed to complement rather than dominate the visual experience, with text serving to enhance emotional connection and brand perception. The organization follows the thematic universe concept, grouping timepieces by design story, inspiration, or collection family rather than technical categories or price points.
Performance and Technical ConsiderationsThe site demonstrates solid web performance optimization despite being animation-heavy, suggesting implementation of lazy loading, optimized asset delivery, and efficient animation techniques. The high animation scores combined with respectable performance metrics indicate careful technical execution using modern web technologies—likely utilizing hardware-accelerated CSS animations, optimized JavaScript libraries, and progressive image loading. The responsive design implementation suggests the site adapts to various screen sizes and devices, though the complex animations and rich media may be simplified on mobile to maintain acceptable performance. The accessibility limitations indicate gaps in WCAG compliance, potentially affecting users who rely on assistive technologies. The semantic structure and metadata implementation provides adequate search engine indexing, though may not be optimized for maximum organic discoverability given the experiential nature of the content.
Overall AssessmentThe Cartier Watches & Wonders 2025 website represents an experiential approach to luxury product presentation, prioritizing immersive visual storytelling and thematic environments over conventional e-commerce functionality. The site successfully creates a sophisticated digital showcase through exceptional animation work and refined visual design organized around distinct "universes" for different timepiece collections. The technical execution demonstrates competent performance optimization for a media-rich experience, with responsive design enabling cross-device access. However, the site shows notable limitations in accessibility and semantic optimization, while the focus on visual experience over navigational efficiency may create friction for users seeking specific information. The content serves primarily to enhance the atmospheric presentation rather than provide comprehensive technical detail, positioning the site as a brand experience and desire-creation tool rather than a practical product information resource.
|
| Fig 3.1.4 Cartier Watches & Wonders |
Purpose and Goals Communication
The website is described as "a journey through refined universes showcasing iconic timepieces," establishing its purpose as an immersive digital showcase for Cartier's Watches & Wonders 2025 collection. The terminology "refined universes" suggests the site creates distinct thematic environments or narrative spaces for presenting different timepiece collections, rather than a simple product gallery. The focus on "journey" indicates the site prioritizes experiential storytelling over direct product sales or information retrieval. This positions the website as a brand experience destination aligned with luxury positioning, where the goal is to create desire and emotional connection with the timepieces through curated digital environments. The showcase format suggests visitors are meant to explore and discover rather than quickly locate specific products.
Visual Design and Layout
The site employs scroll-triggered effects, parallax elements, cinematic transitions between sections, and possibly 3D product visualizations or interactive watch presentations. The "refined universes" concept implies distinct visual environments for different watch collections, each with its own aesthetic treatment, color palette, and atmospheric design. The layout likely features full-screen or near-full-screen sections that immerse users in each universe, with high-resolution photography or video showcasing timepieces in carefully art-directed settings. The responsive design implementation suggests the visual experience adapts across devices, though the animation-heavy approach may be simplified on mobile platforms.
Functionality and Usability
The site's functional architecture appears to prioritize visual storytelling over conventional navigation efficiency. While the site is navigable, users may experience some friction in accessing specific information or moving through content. The may be limitations in inclusive design implementation, suggesting potential issues with screen reader compatibility, keyboard navigation, alternative text for images, or color contrast ratios. The navigation structure likely emphasizes scrolling and visual exploration, possibly with minimal visible navigation elements to maintain aesthetic purity. This approach creates a more cinematic experience but may challenge users seeking quick access to specific watches, technical specifications, or purchasing information. The semantic and SEO implementation suggests adequate but not exceptional discoverability through search engines.
Content Quality and Relevance
The content is positioned as supporting the visual journey through "refined universes," suggesting narrative-driven descriptions that contextualize each timepiece within broader thematic or conceptual frameworks. The content likely includes brand storytelling emphasizing Cartier's horological heritage, craftsmanship narratives, and design philosophy rather than purely technical specifications. Each "universe" presumably has its own narrative thread connecting the watches within that collection. The content structure appears designed to complement rather than dominate the visual experience, with text serving to enhance emotional connection and brand perception. The organization follows the thematic universe concept, grouping timepieces by design story, inspiration, or collection family rather than technical categories or price points.
Performance and Technical Considerations
The site demonstrates solid web performance optimization despite being animation-heavy, suggesting implementation of lazy loading, optimized asset delivery, and efficient animation techniques. The high animation scores combined with respectable performance metrics indicate careful technical execution using modern web technologies—likely utilizing hardware-accelerated CSS animations, optimized JavaScript libraries, and progressive image loading. The responsive design implementation suggests the site adapts to various screen sizes and devices, though the complex animations and rich media may be simplified on mobile to maintain acceptable performance. The accessibility limitations indicate gaps in WCAG compliance, potentially affecting users who rely on assistive technologies. The semantic structure and metadata implementation provides adequate search engine indexing, though may not be optimized for maximum organic discoverability given the experiential nature of the content.
Overall Assessment
The Cartier Watches & Wonders 2025 website represents an experiential approach to luxury product presentation, prioritizing immersive visual storytelling and thematic environments over conventional e-commerce functionality. The site successfully creates a sophisticated digital showcase through exceptional animation work and refined visual design organized around distinct "universes" for different timepiece collections. The technical execution demonstrates competent performance optimization for a media-rich experience, with responsive design enabling cross-device access. However, the site shows notable limitations in accessibility and semantic optimization, while the focus on visual experience over navigational efficiency may create friction for users seeking specific information. The content serves primarily to enhance the atmospheric presentation rather than provide comprehensive technical detail, positioning the site as a brand experience and desire-creation tool rather than a practical product information resource.