INTERACTIVE DESIGN EXERCISE 1 - WEB ANALYSIS
25 September 2025-
ZHANG QIYU（0384019）
Interactive Design|Bachelor of Design in Creative Media|Taylor's University
Exercises 1/Website Analysis
LECTURES
For this assignment, I reviewed five websites as required. I focused on evaluating their design, content, functionality, and user experience. I identified strengths and weaknesses for each site and provided suggestions for improvement. My analysis considered visual design, navigation, performance, and content quality, following the instructions to include screenshots and organize the report with clear headings.
INSTRUCTIONS
Exercise: Web Analysis
For this assignment, I reviewed five websites as required. I focused on evaluating their design, content, functionality, and user experience. I identified strengths and weaknesses for each site and provided suggestions for improvement. My analysis considered visual design, navigation, performance, and content quality, following the instructions to include screenshots and organize the report with clear headings.
What need to have in 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, including its load times, responsiveness, and compatibility with different devices and browsers
1. Purpose and Goals:
Mola Zone creates an immersive gaming experience that blends entertainment with e-commerce. The website functions as an interactive playground where users control a character in a endless runner-style game, with obstacles that reveal product information and shopping opportunities upon collision. This innovative approach aims to engage users through gameplay while subtly promoting products.
Yame Shop takes a more traditional e-commerce approach, focusing on straightforward product presentation and purchasing functionality.
2. Visual Design and Layout:
a) Color
Mola Zone uses an electrifying color palette with deep space blues and vibrant neon purples that create a cyberpunk atmosphere. The colors dynamically shift during gameplay, with obstacle collisions triggering spectacular particle effects in contrasting hues like electric yellow and hot pink.
Yame Shop's conservative white and black scheme feels bland in comparison, failing to create the same visual excitement.
b) Typography
.png)
Mola Zone employs futuristic, geometric typefaces that glow with inner light effects. Text elements animate dynamically during gameplay, with scores and messages appearing in explosive typographic treatments that complement the high-energy environment.
c) Imagery
.png)
.png)
Mola Zone features breathtaking 3D environments with parallax scrolling backgrounds. The game world includes holographic advertisements, neon-lit cityscapes, and digital artifacts that create depth and immersion. When players hit obstacles, the world momentarily shatters into interactive product showcases.
3. Functionality and Usability:
a) Navigation
.png)
Mola Zone's navigation is the gameplay itself. Users swipe or use arrow keys to navigate obstacles, with intuitive controls that feel responsive and engaging. The transition from gameplay to shopping is seamless - crashing into specific obstacles triggers smooth zoom-ins to product detail views.
b) Interactive Elements
The core gameplay mechanics are exceptionally well-executed. Character movement is fluid, collision detection is precise, and the obstacle-generated store pop-ups integrate naturally into the experience. Special effects like screen shakes, light blooms, and slow-motion during collisions enhance the excitement.
4. Content Quality and Relevance:
Mola Zone masterfully blends entertainment with commercial content. The products feel like natural discoveries within the game world rather than intrusive advertisements. The gaming elements maintain engagement while the shopping opportunities arise organically from gameplay progression.
5. Conclusion:
a）Strengths
Mola Zone represents a groundbreaking approach to e-commerce through gamification. The parkour-style gameplay is addictive and skill-based, encouraging repeated visits. The obstacle-triggered shopping mechanic feels innovative and non-intrusive, creating a "reward" system where discovering products becomes part of the fun.
The visual execution is stunning, with next-generation 3D graphics that rival premium video games. The color combinations are deliberately chosen for maximum impact, using high-contrast neon schemes that create visual depth and highlight interactive elements. The seamless integration of gaming and shopping establishes a new standard for interactive web experiences.
b）Weaknesses
The very elements that make Mola Zone exceptional also present challenges. The intensive graphics may overwhelm users with older devices or slower internet connections. The learning curve for the gameplay mechanics might deter less tech-savvy shoppers who prefer straightforward shopping interfaces.
The experimental nature means some users may find the experience distracting from actual shopping goals. The balance between entertainment and commerce occasionally tilts too far toward gaming.
Website 2：Chanel - Chanel Les 4 Ombres Boutons
.png)
1. Purpose and Goals:
This Chanel website is designed to showcase their Les 4 Ombres eye shadow palette in an interactive digital experience. The main goal is to create an engaging platform where users can explore different color combinations virtually. It targets Chanel's luxury beauty customers who want to preview the product online before purchasing. The website serves as both a marketing tool and a virtual try-on experience.
2. Visual Design and Layout:
a) Color
b) Typography
.png)
c) Imagery
High-quality product images showcase the eyeshadow palette from multiple angles. The interactive color buttons are beautifully designed with gradient effects that mimic the actual product. The minimalist approach keeps focus on the product, though I wish there were more real-life application examples.
3. Functionality and Usability:
a) Navigation:
.png)
b) Interactive Elements:
4. Quality and Relevance:
The content is highly relevant for makeup enthusiasts interested in Chanel products. Information about the eyeshadow textures and color stories is well-presented. However, the content is quite minimal - it focuses mainly on the interactive color selection without much educational content about application techniques or product benefits.
5. Conclusion:
a）Strengths:
The Chanel website excels in its visual presentation and brand consistency. The signature black and white scheme with gold accents creates an immediate sense of premium quality that aligns with what consumers expect from a high-end beauty brand.
The website's functionality is straightforward and user-friendly. The interactive color buttons work seamlessly, allowing users to explore different eyeshadow combinations with simple clicks. Performance is excellent across all devices, with fast loading times and smooth transitions that make the browsing experience enjoyable and efficient.
b）Weaknesses:
However, the website lacks depth in content and educational value. While the interactive feature is engaging, it doesn't provide sufficient information about product benefits, application techniques, or ingredient details.
The navigation structure feels restrictive and could be expanded. There are minimal sections to explore beyond the main interactive feature, making the overall experience quite brief.
Website 3：Renault Trucks - The Good City
.png)
1.Purpose and Goal：
This website was created to showcase Renault Trucks' vision for future urban transportation. Its main goal is to present "The Good City" concept - an interactive experience that demonstrates how their electric trucks can create better, more sustainable cities. The website targets city planners, potential business clients, and environmentally conscious consumers who are interested in smart city solutions.
2. Visual Design and Layout：
a) Color
The website employs a core color palette of technological blue and ecological green, where blue conveys innovation and reliability while green emphasizes sustainability. These are set against a background of pure white and premium gray to enhance content legibility, with vibrant orange used as an accent color for key interactive elements. This color strategy leverages color psychology to create a visual system that balances professionalism and futurism.
b) Typography
.png)
The website's layout is very grand. When you open it, the entire screen is filled with content, without the feeling of being restricted by rigid boundaries. As you scroll through the page, the foreground and background scroll at different speeds, creating a very three-dimensional depth effect, like watching a short documentary.
The content is presented in blocks, neatly arranged like cards, and looks great whether viewed on a mobile phone or a computer. Moreover, it transforms some dull data into vivid animated charts.
c) Imagery
The website features high-quality 3D animations and vector illustrations that show the electric trucks in various urban scenarios. The visuals are clean and professional, though I feel some images load slightly slowly on mobile connections.
d) Layout
.png)
The structure of the entire website is arranged very clearly, like building blocks, layer by layer downwards:
· First screen: As soon as you enter, there is a large video or a stunning picture, accompanied by a few core slogans, allowing you to immediately understand what this brand is about.
· Middle content: As you scroll down, text and pictures will alternate, introducing the product clearly as if telling a story.
· Common functions: There is a navigation bar that remains fixed at the top or side, allowing you to jump to any section at any time; when you need to contact or consult, a small window will pop up intelligently, which is very convenient.
· Bottom of the page: Finally, there is a site map that categorizes all the information, so you can quickly find any content you want.
3. Functionality and Usability
a) Navagation
The navigation is designed for guided exploration. It likely uses a minimalist, fixed top bar with links to key sections. The primary navigation is vertical scrolling, where the user is naturally guided through a narrative. A progress indicator or an interactive "city map" might serve as a secondary, non-linear navigation tool, allowing users to jump to specific points of interest.
b) Interactive Element
Interactivity is used to make complex ideas tangible. Key elements include:
· Explorable 3D Models: Users can rotate vehicles and zoom in on key features.
· Scroll-Triggered Animations: Data charts and infographics animate into view as the user scrolls, visualizing efficiency or emission savings.
· Contextual Selectors: Buttons or filters that allow users to see different solutions for specific urban scenarios.
· Micro-interactions: Subtle hover animations on buttons and icons provide immediate, engaging feedback.
4.Quality and Relevance
This is a high-quality brand experience website that excels in visual storytelling and immersive interaction, successfully translating complex commercial vehicle technology into an engaging narrative.
Overall, this is a high-quality website. The visuals are clean, and the information is clearly stated. Users can easily navigate and find what they need.
5.conclusion
a) Strengths
The website's core strength lies in its exceptional brand experience design. It utilizes immersive 3D environments and dynamic visual effects to transform complex logistics solutions into an intuitive and easy-to-understand narrative journey, significantly enhancing user engagement.
In terms of brand value communication, the site successfully establishes an image of an innovation leader. The primary color strategy of blue and green effectively conveys a sense of technology while emphasizing environmental values, seamlessly integrating the vision of sustainable development with the brand identity.
b) Weaknesses
The main shortcomings are evident in the information architecture. The heavy emphasis on experiential design results in the dilution of core technical parameters and product details, potentially failing to meet the needs of professional visitors seeking in-depth product understanding.
Functionally, the immersive experience introduces a high technical barrier. The rich animations demand higher device performance and may obscure clear conversion pathways, ultimately impacting the efficiency of achieving business objectives.
Website 4: Food Social Platform
1. Purpose and Goals:
Savor.it is a social platform dedicated to food sharing and discovery, aiming to connect food enthusiasts and allow them to share dining experiences while exploring new restaurants and cuisines. The website targets users who enjoy documenting and discovering food, enhancing the joy of culinary exploration through social interaction.
2. Visual Design and Layout:
a) Color
The website features warm and appealing colors, primarily tomato red and creamy white , complemented by dark charcoal gray for text. Warm orange serves as an accent color, evoking appetite and the pleasure of food. The overall palette is reminiscent of fresh ingredients and delicious meals.
b) Typography
Friendly, rounded sans-serif fonts are used for interface text, with medium weight for headings and regular weight for body text. The font size hierarchy is clear, emphasizing key content while appropriately scaling down secondary information. Generous line spacing enhances reading comfort.
c) Imagery
High-quality food photos are the core visual element. Images feature uniform rounded corners and soft shadow effects, creating a refined yet approachable visual style. User-uploaded photos are displayed in a waterfall layout, offering a rich and varied visual experience.
3. Functionality and Usability:
a) Navigation
The top navigation bar clearly labels key sections, including Home, Explore, Favorites, and Profile. The search box is prominently placed, supporting keyword and tag searches. The mobile version uses a bottom navigation bar, aligning with user habits.
b) Interactive Elements
Like, comment, and favorite buttons provide clear hover and click feedback. The image upload process is streamlined, supporting drag-and-drop functionality. Restaurant tagging and rating features are intuitive and easy to use, enhancing user engagement.
4. Content Quality and Relevance:
.png)
5. Conclusion:
a）Strengths:
Savor.it successfully creates an appealing and user-friendly social platform for food enthusiasts. The warm color scheme and high-quality images foster an enjoyable browsing experience, encouraging users to share and explore food.
The platform's content ecosystem is vibrant, with user-generated photos and reviews offering significant reference value, forming a positive social cycle. The technical implementation is solid, with page loading speed and interactive feedback meeting modern social platform standards.
b)Weaknesses
Restaurant information updates and maintenance rely on user contributions, which may lead to outdated or inaccurate details in some cases. The social features lack depth, missing mechanisms for closer user connections.
While the visual style is consistent, it lacks groundbreaking innovation, making it less distinctive compared to similar platforms. Advanced filtering and search functions could be further refined to help users more accurately locate target content.
Website 5: Animal Free Circus
1. Purpose and Goals:
This website advocates for animal-free circuses, aiming to raise awareness about animal welfare issues in traditional circus shows. It seeks to educate the public about cruelty-free entertainment alternatives while promoting ethical circus performances that rely on human artistry rather than animal exploitation.
2. Visual Design and Layout:
a) Color
The site uses a dramatic dark background with vibrant circus-inspired accents in deep red and gold . This creates an atmosphere reminiscent of traditional circuses while subverting expectations through its animal-free message.
b) Typography
Bold, theatrical fonts are used for headlines, evoking circus poster aesthetics, while clean sans-serif fonts ensure body text remains highly readable. The typographic treatment successfully balances artistic expression with informational clarity.
c) Imagery
The website features powerful photography showcasing human circus performers in spectacular acts, contrasted with subtle references to animal welfare. The visuals emphasize human artistry and athleticism while avoiding graphic content that might overwhelm visitors.
3. Functionality and Usability:
a) Navigation
Simple, intuitive navigation with clear sections: Home, About, Performers, Support, Contact. The menu structure is straightforward, making it easy for visitors to find information about the movement and how to get involved.
b) Interactive Elements
Hover effects on performer cards reveal additional information and videos. An interactive timeline shows the progression of circus reforms. The donation and petition sections feature clear calls-to-action with streamlined processes.
4. Content Quality and Relevance:
Content is emotionally compelling yet fact-based, presenting convincing arguments against animal use in circuses. The language is accessible but authoritative, supported by statistics and expert opinions. Success stories of transitioned circuses provide hope and practical examples.
5. Conclusion:
a）Strengths
The website effectively uses circus aesthetics to deliver its animal welfare message, creating an engaging experience that respects both the art form and the ethical cause. The visual design successfully captures circus magic .
Content strikes an excellent balance between emotional appeal and factual information, making the case for animal-free circuses without resorting to sensationalism. The clear calls-to-action and straightforward navigation make it easy for supporters to engage with the movement.
b）Weaknesses
The dramatic color scheme, while thematically appropriate, may feel somewhat heavy for extended browsing. The website could benefit from more interactive educational elements to better demonstrate the superiority of human circus arts over animal acts.
While the donation and petition features are functional, they could be more prominently featured to drive higher conversion rates. The mobile experience, though responsive, doesn't fully capture the theatrical impact of the desktop version.
REFLECTIONS
Completing this web analysis assignment has been an incredibly enlightening experience. At first, I approached it as just another academic task, but as I delved deeper into examining these diverse websites, I began to appreciate the complex artistry behind effective web design. What surprised me most was discovering how every color choice, typographic decision, and interactive element serves a specific purpose in shaping user experience.
I learned that successful websites aren't just about visual appeal - they're carefully crafted conversations between the brand and its audience. The exercise of evaluating both strengths and weaknesses taught me to think critically about design choices rather than just accepting them at face value.
评论
发表评论