INTERACTIVE DESIGN - Exercise 1: Websie Analysis

  INTERACTIVE DESIGN - Exercise 1: Websie Analysis

|| 24/9/2025 – 8/10/2025 (Week 1 – Week 3)
||Yang Shumeng 0378848
|| Interactive Design / Bachelor of Design (Honours) in Creative Media
|| Exercise 1 / Website Analysis

---

TABLE OF CONTENTS

1. Instructions
2. Process Work
3. Reflection

---

1. Instructions：

 

2. Process Work：

Exercise 1: 

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 color, 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 organization. Consider the website's performance, load times, responsiveness, and compatibility with different devices and browsers.

Website 1：HiKeys—1977

1. Purpose and Goals

The primary purpose of this website is to showcase and promote the HK–77/HiKeys 1977 synthesizer keyboard. The content emphasizes not only the product’s technical features (USB-C, built-in speakers, slim design) but also its design philosophy — blending legacy sound with modern aesthetics. Overall, the goals are effectively communicated:

• Core message: portability, creative usability, and futuristic design.

• Effectiveness: The visuals and text together clearly highlight the product’s identity and target audience — music creators who value both function and design.

2. Visual Design and Layout

• Color scheme: The monochrome palette (black, white, and grey) conveys a minimalist, futuristic feel that aligns with the product’s sleek metallic look.

• Typography: Bold, modern sans-serif fonts with large-scale headlines (HK—77) paired with smaller descriptive text create strong visual contrast and hierarchy.

• Imagery: High-quality product renders showcase the keyboard from multiple perspectives, highlighting details such as knobs, ports, and keys.

• Layout: The generous use of whitespace keeps the focus on the product, though the design can feel slightly cold and less emotionally engaging for a music-centered product.

---

3. Functionality and Usability

• Navigation: The site appears to be a single-page layout with minimal navigation. The only visible interactive element is the “LET US KNOW” button, which likely serves as a contact form.

  

• Interactivity: While the static product images are clear, the lack of interactive demos (e.g., sound previews, video demonstrations) limits the immersive experience.

• Forms and CTAs: Apart from one button, there are few calls to action. The absence of clear pathways to purchase, view detailed specifications, or download product manuals reduces usability for serious buyers.

4. Content Quality and Relevance

• Accuracy: The descriptions highlight functional benefits such as battery life, portability, and ergonomics.

• Clarity: The text is concise and easy to read, though at times overly abstract (e.g., “Embracing the legacy of sound exquisitely designed for tomorrow”).

• Organization: Content is segmented by feature (USB-C, ergonomic design, speakers, display), which makes scanning straightforward. However, technical specifications (MIDI compatibility, audio quality metrics, system requirements) are missing and would be valuable for professional musicians.-

---

5. Performance and Compatibility

• Load speed: Given the clean design and limited graphics, the site likely loads quickly.

• Responsiveness: The simple grid layout suggests it adapts well to mobile and tablet formats.

• Cross-browser compatibility: The minimalist approach reduces the likelihood of compatibility issues.

• Enhancements: Adding lightweight animations (e.g., knob rotations, waveform demos) could improve engagement without compromising performance.

---

Conclusion and Recommendations

Strengths:

• Clear product focus and purpose.

• Minimalist, visually striking design.

• Organized feature presentation.

• Likely strong performance and responsiveness.

Weaknesses:

• Limited interactivity (no audio/video demos).

• Lack of detailed technical specifications.

• Minimal call-to-action elements for conversion (purchase, downloads).

• Abstract marketing language with little emotional or musical storytelling.

Recommendations:

1. Add interactive elements such as audio demos, video walk-throughs, or animated product interactions.

2. Provide technical details (sound quality, MIDI support, software compatibility) to appeal to professional users.

3. Strengthen conversion pathways by adding purchase links, specification sheets, or clear “Learn More” CTAs.

4. Balance the minimalist design with more emotionally engaging visuals or storytelling that reflects the creative essence of music-making.

Website 2：Altermind - We Craft Total Immersion

1. Purpose and Goals

The website’s primary purpose is to present Altermind Studio as a creative digital agency specializing in immersive experiences, brand storytelling, and innovative digital design. It positions itself as forward-thinking and highly creative, targeting businesses that want to reshape the way audiences perceive their brand.

• Core message: “We alter minds” — using technology, design, and storytelling to create transformative digital experiences.

• Effectiveness: The message is bold, memorable, and well-reinforced across the site, but it can feel slightly abstract for users seeking concrete services or case studies.
  

---

2. Visual Design and Layout

• Color and imagery: The site heavily relies on vivid gradients, neon tones, and animated 3D brain visuals. This creates a futuristic, experimental aesthetic that reflects creativity and innovation.

• Typography: Large, bold, uppercase type (“READY TO ALTER MINDS TOGETHER?”) grabs attention, while smaller supporting text provides clarity. The contrast is strong and visually striking.

  
  
  

• Layout: Clean, fullscreen design with immersive visuals dominating the background. Content blocks are minimal, focusing user attention on short bursts of text.

• Overall impression: The design is highly immersive and unique, but it prioritizes visual spectacle over clarity, which may overwhelm some users.

---

3. Functionality and Usability

• Navigation: The top-right navigation bar (“Impact, Join, Insights, Get in Touch”) is minimal and consistent across pages. However, with so few links, discovering detailed information (services, portfolio, case studies) may be difficult.

  
  
  

• Interactivity: Strong interactive elements, such as animated brains, clickable features, and immersive transitions, create a sense of engagement. The “click anywhere to start” interaction sets the tone of discovery.

  
  
  

• Accessibility: The heavy use of bright colors, motion graphics, and small navigation text could pose challenges for accessibility (e.g., users with vision impairments).

• Forms/CTAs: The “Get in Touch” button and email link are clear, but there are limited pathways for lead generation or direct service exploration.

---

4. Content Quality and Relevance

• Accuracy: The site explains its mission, team diversity, and service focus areas (immersive web experiences, interactive storytelling, brand engagement).

• Clarity: The language is aspirational and creative (“We craft total immersion”), but sometimes lacks detail, leaving potential clients unsure about exact deliverables.

  
  
  

• Organization: Content is split between mission-driven statements and service hints. However, it is not structured for depth (e.g., no clear service breakdowns, case studies, or testimonials).

• Tone: Strongly inspirational and visionary, but could benefit from more practical details to reassure clients about expertise.
  

---

5. Performance and Compatibility

• Load performance: Given the heavy use of 3D graphics and animations, the site may load slower on older devices or weaker connections.

• Responsiveness: Likely optimized for modern browsers and mobile, though the immersive visuals could feel cramped on smaller screens.

• Compatibility: Works best on high-performance devices with good internet. The site even recommends using headphones, signaling that the experience is designed as multimedia-first.

---

Conclusion and Recommendations

Strengths:

• Striking, immersive visuals that communicate creativity and innovation.

• Clear and bold brand identity centered on “altering minds.”

• Engaging interactivity that makes the site memorable.

Weaknesses: 

• Lack of detailed, practical content (services, pricing, case studies).

• Navigation and structure are minimal, limiting usability for users seeking depth.

• Accessibility concerns due to color contrasts and motion-heavy visuals.

• Potential performance issues on less powerful devices.

Recommendations:

1. Add case studies, portfolio work, or examples to show credibility and past success.

2. Provide a clearer breakdown of services with specific deliverables and benefits.

3. Improve accessibility features (e.g., high-contrast text options, reduced-motion toggle).

4. Ensure optimized loading for all devices by offering lighter visual alternatives.

5. Balance aspirational content with concrete business value, helping clients connect vision with outcomes.

Website 3：Joy from Africa to the World

1. Purpose and Goals

The website’s primary purpose is to promote the festive campaign “Joy from Africa to the World” hosted at Cape Town’s V&A Waterfront. It aims to celebrate African culture, creativity, and community spirit while inviting visitors to experience the seasonal activities at the venue.

• Core message: A celebration of joy, sustainability, and African artistry.

• Effectiveness: The festive and cultural theme is communicated clearly through visuals and storytelling, though practical visitor details (such as schedules and logistics) are less emphasized.

---

2. Visual Design and Layout

• Color: Bright, festive colors (red, blue, green, yellow) create an energetic and welcoming atmosphere.

• Typography: Decorative serif typeface with artistic flair enhances the celebratory tone, though long passages of text may reduce readability.

• Imagery: Combines real photos (crafts, installations, community) with playful illustrations (animals, plants, festive symbols). This blend adds cultural authenticity and artistic richness.

• Layout: Full-screen visuals dominate, with short text elements complementing the imagery. The design feels immersive and storytelling-driven.

---

3. Functionality and Usability

• Navigation: Minimalist navigation (hamburger menu and index) keeps the interface clean but may hide information from less tech-savvy users.

• Interactivity: Some horizontal/vertical scroll transitions and playful visual elements create engagement, but the site remains mostly a browsing experience rather than interactive.

• Usability: Content is straightforward to follow, but visitors looking for practical event information (e.g., times, directions, ticketing) may find it lacking.

• Call to Action: A “Visit our Instagram” button is present, but there are limited CTAs guiding users toward concrete participation.

---

4. Content Quality and Relevance

• Accuracy: Messages align with the campaign’s identity, focusing on joy, cultural pride, and festive celebration.

  

• Clarity: Language is poetic and narrative-driven (“Find the joy between the mountain and the sea”), which creates atmosphere but sacrifices direct clarity.

• Organization: The content follows a story arc (Joy from Africa → community/artists → festive experiences), but lacks detailed logistical sections for visitors.

---

5. Performance and Compatibility

• Loading speed: Uses a mix of illustrations and photos, which are relatively lightweight compared to video-heavy sites. Likely performs well across devices.

• Responsiveness: Flexible layouts adapt to different screen sizes, though artistic typography may be less readable on mobile.

• Compatibility: Works across modern browsers with no heavy animations. Accessible to a wide range of devices.

---

Overall Assessment

Strengths:

• Strong cultural storytelling and festive identity.

• Colorful, joyful visuals that reflect African artistry.

• A warm and engaging brand voice that resonates emotionally.

Weaknesses:

• Lack of practical information (event details, maps, schedules).

• Decorative typography reduces readability in some sections.

• Limited interactivity and engagement beyond browsing.

Recommendations:

1. Add a dedicated visitor information section (event dates, locations, logistics).

2. Provide more actionable CTAs (e.g., “Plan Your Visit,” “See the Program,” “Book Tickets”).

3. Balance decorative typography with more legible fonts for body text.

4. Consider adding small interactive features (clickable maps, artist stories) to deepen engagement.

Website 4：Renault Trucks - The Good City - CSS Winner

1. Purpose and Goals

This website is designed to promote Renault Trucks’ sustainable logistics solutions and highlight their innovation in urban and regional transportation. By using an interactive map, it educates users about zero-emission vehicles, last-mile delivery, and multi-modal transport.

• Core message: Renault Trucks is leading the transition to low-carbon logistics.

• Effectiveness: The message is very clear, reinforced by real-world examples and immersive storytelling.

---

2. Visual Design and Layout

• Color and Style: Uses a modern, minimalist 3D city simulation with clear labeling and hotspots. The muted color palette makes trucks and icons stand out.

• Typography: Clean sans-serif fonts improve readability and align with the brand’s technological and professional image.

• Imagery: Real photos and videos are integrated into the virtual map, balancing credibility and interactivity.

• Layout: Split-screen design (interactive 3D map + information panel) provides an organized and structured user experience.

  
  
  

---

3. Functionality and Usability

• Navigation: Interactive hotspots allow users to explore different themes (urban logistics, recycling, regional distribution). This provides freedom but may feel overwhelming without guidance.

• Interactivity: Strong engagement through animations, clickable maps, and integrated video content.

• Usability: Easy to use with clear instructions (“drag to explore,” “scroll to zoom”). However, heavy 3D graphics may load slowly on weaker devices.

• Calls to Action (CTA): Focuses more on education than conversion; lacks direct CTAs (e.g., “Contact Sales,” “See Truck Models”).

---

4. Content Quality and Relevance

• Accuracy: High credibility with real case studies (Paris, Lyon, Finland) showing real-world application of electric trucks.

• Clarity: Well-written, concise, and easy to understand for a broad audience.

• Organization: Each hotspot covers a specific theme, creating a clear structure for storytelling.

---

5. Performance and Compatibility

• Loading speed: 3D models may slow down performance, but once loaded, navigation is smooth.

• Responsiveness: Designed for desktop primarily; mobile users may struggle with the detailed 3D map.

• Compatibility: Works well on modern browsers; older devices may face performance issues.

---

Overall Assessment

Strengths:

• Innovative and interactive design with a 3D map.

• Real-world examples increase credibility.

• Clear storytelling about sustainability and logistics innovation.

Weaknesses:

• Heavy graphics can affect loading speed.

• Limited direct CTAs for potential customers.

• More suited for desktop than mobile.

Recommendations:

1. Add clearer conversion pathways (e.g., product pages, inquiry forms).

2. Provide a lighter mobile version for better accessibility.

3. Include summaries or infographics for users who prefer quick information over interactive exploration.

Website 5：株式会社Neu | 広告に、こだわりと偏愛を。

1. Purpose and Goals

The primary goal of this website is to showcase Neu’s expertise in SNS advertising, performance-based marketing, and creative production, while conveying its brand philosophy of being “Geek-Driven, where logic and passion coexist.”

The messaging effectively communicates a bold, youthful, and energetic brand image through strong visual cues and slogans. However, for first-time visitors, the specific services offered are not immediately clear, which may limit practical understanding of the company’s value proposition.

---

2. Visual Design and Layout

• Color: The use of a vivid neon blue dominates the interface, delivering strong impact and reinforcing brand identity.

• Typography: Bold, large fonts mixing English and Japanese emphasize power and uniqueness, but may feel overwhelming during prolonged reading.

• Graphics & Motion: 3D text, rotating taglines, and modular elements evoke a “hacker spirit” and experimental aesthetic.

• Layout: Minimalist overall, with emphasis on slogans and visuals. While visually striking, it provides weaker guidance in terms of information structure.

---

3. Functionality and Usability

• Navigation: A top menu (Top / About / Service / Team / News / Contact) is straightforward, though homepage animations and scroll effects can distract from the core information.

• Interactivity: Motion design and segmented content add modern appeal, yet the site lacks deeper interactive modules (e.g., case studies, calculators, or customer pathways).

• Usability: The experience resonates with younger audiences but falls short for visitors seeking practical details such as pricing, service workflow, or past projects.

---

4. Content Quality and Relevance

• Accuracy: Content focuses on advertising research, planning, creative production, and operations, maintaining a professional tone.

• Clarity: Heavy use of slogan-style messaging (e.g., “Hack to Win,” “狂気と楽しさを”) strengthens brand spirit but weakens informational depth.

• Organization: Content is modular (research / production / operations), though the connection between homepage slogans and business services is not seamless.

---

5. Performance and Compatibility

• Loading Speed: While animation and high-contrast graphics may increase system load, the overall simplicity of the layout balances performance.

• Responsiveness: Works across desktop and mobile. However, on smaller screens, dense text and visuals reduce readability.

• Compatibility: Runs smoothly on modern browsers, but may not deliver the same experience on older devices.

---

Overall Assessment

Strengths:

• Strong brand identity with bold visuals.

• Innovative typography and motion graphics convey passion and creativity.

• Service coverage across research, creative, and ad operations.

Weaknesses:

• Overuse of slogans reduces practical communication.

• Excessively strong contrasts hinder comfortable reading.

• Lack of clear conversion pathways (e.g., case studies, request forms, consultation buttons).

Suggestions for Improvement:

• Add case studies and results to enhance credibility.

• Improve the information hierarchy so that new visitors can quickly understand services.

• Introduce conversion-focused elements (e.g., “Get a Quote,” “Book a Consultation”).

3. Reflection：

By analyzing multiple websites, I learned to evaluate them in terms of purpose, design, functionality, content, and performance. I also became more aware of how different websites balance aesthetics and practicality. This process deepened my understanding of the importance of user experience and encouraged me to reflect on how to achieve a balance between visual expression and informational value in my own design practice.