Interactive Design - Exercise 1

 21/04/25 - 28/04/25 (Week 1)
Anggia Tsani Rachmadiyanti, (0368487)
Interactive Design / Bachelor in Design (Hons) in Creative Media / Taylor's University
Task: Exercise 1

---

 CONTENT LIST 

• Lecture notes
• Module Brief
• Exercise 1 - Website Analysis
• Reflection

---

 LECTURE NOTES 

Lecture 1:

• This week, Mr. Shamsul reviewed the module information booklet and told us about all our projects and assignments. He then told us to download Dreamweaver, sign up to Netlify and assigned us a task called Web Analysis.

Lecture 2:

• Design thinking steps: Observation, Empathy, Ideate, Prototype, Testing
• When you find the problem you empathise and come up with new idea to solve the problem. Websites are meant to increase engagement with users

• USABILITY - how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation. It's part of User Experience (UX) Design & the second level of UX Design.

• A design’s usability depends on how well its features accommodate users’ needs and contexts.
• Users should be able to find their way about easily enough to achieve objective without relying on expert knowledge. An interface with high usability guides users through its easiest route to achieve its goal. = Discoverability. Different websites have different goals/purpose

KEY PRINCIPLES OF USABILITY:

1. Consistency - makes sure website looks coherent & works harmoniously across all different elements & features (eg: header, footer, sidebars, nav bars, typefaces..)
2. Simplicity - help user achieve their goals faster & more efficiently.
3. Visibility- the more visible an element is, the more likely users will know about them and how to use them.
4. Feedback - gives the user a signal that they (or the product) have succeeded or failed at performing a task.
5. Error Prevention - alerts user when making an error or mistake

• We should not use complex interfaces, confusing navigations, poor feedback.

---

 Module Brief 

---

 Exercise 1: 5 Web Analysis 

Choose FIVE (5) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. Write a brief report summarising your findings and recommendations.

What To Have in The Analysis:

- The purpose and goals of the website

- Evaluate whether they are effectively communicated to the user.

- Evaluate the visual design and layout, colour, typography, and imagery.

- functionality and usability of the website, its navigation, forms, and interactive elements. 

- Evaluate the quality and relevance of the website's content, including accuracy, clarity, and organization. 

- website's performance, including its load times, responsiveness, and compatibility with different devices.

Write a brief report summarizing in not less than 200 words for each website analysis. You can include a screen capture of each section or page of the website to explain. 

 Website #1  : Shibumi Shade

Website source : https://www.awwwards.com/

Website #1 by Anggia Tsani.R - screenshots of the webpage & brief annotations on canva

(hoover & click arrow to go through the slideshow^)

Purpose, Goals & Effectiveness:

ShibumiShade.com serves as the official online store for Shibumi Shade, offering innovative, wind-powered beach shades sunglasses designed for easy setup, portability, and sun protection. The website effectively communicates its purpose through clear product descriptions and a straightforward shopping experience.

Visual Design & Layout:

The website features a clean, modern design with a beach-inspired color palette of blues and whites, enhancing its appeal to outdoor enthusiasts. High-quality images showcase the products in real-life settings, aiding customers in visualizing their use. The layout is intuitive, with well-organized navigation menus, search bar and a responsive design that adapts seamlessly to various devices. The site has a good section divider. It has moving animations to for the graphics such as moving backgrounds and transitions.

Functionality & Usability:

Navigation is user-friendly, with categories like "Shop," "Learn," and "Setup" clearly labeled. The shopping cart and search functions are easily accessible. Product pages provide detailed information, including pricing, sizes, colors, and customer reviews. The checkout process is streamlined, supporting multiple payment options and offering free shipping and returns. They have buttons which we can press to go on another page.

Content Quality & Relevance:

Content on the website is accurate and well-organized. Product descriptions highlight key features such as UPF 50+ sun protection, lightweight materials, and eco-friendly construction. Customer reviews are prominently displayed, providing social proof and aiding in purchasing decisions. The "Our Story" and "FAQ" sections offer additional context and information about the brand and product usage.

Responsiveness:

The website performs well, with fast load times and smooth transitions between pages. It is compatible with various devices, including desktops, tablets, and smartphones, ensuring a consistent user experience across platforms.

Weaknesses & Improvements/Recommendations:

There's limited customer reviews on external platforms, which may affect trust for new visitors. 

Strengths:

• Chronologically delivered the contents
• Colour scheme fits the theme of the website
• Has several transition on how the texts appear
• Has images related to the topics/pop out when hover on the text
• Has many buttons and has navigation menu bars
• Clear communication of product benefits and brand values.
• Attractive and responsive design tailored to the target audience.
• User-friendly navigation and efficient shopping experience.
• High-quality content that supports informed purchasing decisions.
• Strong performance and device compatibility.​

 Website #2  : RJ Digital Studio

Website source : https://www.awwwards.com/

Web analysis #2 by Anggia Tsani.R - screenshots of the webpage & brief annotations on canva

(hoover & click arrow to go through the slideshow^)

Purpose, Goals & Effectiveness:

The primary aim of RJ Digital Studio is to present the personal portfolio of Raphael Jessie Calo, showcasing his projects & skills in UI/UX design, web development, illustrations and digital art. The site functions as both a resume and a creative gallery.

The site successfully conveys Raphael's personality and creative philosophy. Phrases like “your platform deserves to reflect your brand” make the goals clear. However, the homepage feels more like a visual journey than a clearly guided experience, which may confuse first-time visitors unfamiliar with portfolio sites.

Visual Design & Layout:

The website adopts a clean, minimalist design, allowing content to take center stage. This approach enhances user focus on key elements without distraction.​ It has an interesting opening: clouds, words on the grass and ripples of waters before the contents. Content is organized into distinct sections, providing a clear visual hierarchy. This structure aids in guiding users through the site seamlessly.​ However, it doesn't have a sticky navigation bar or menu on top.

Generous use of whitespace contributes to a breathable layout, preventing visual clutter and enhancing readability.​ The site employs a monochromatic color scheme, primarily utilizing shades of blue. This shows professionalism and trustworthiness.​ The website uses a single, modern sans-serif typeface throughout.

Different font weights are employed to establish a visual hierarchy. The chosen typeface is legible across various devices; however, exploring additional font families could add depth and character to the design.​ The site also incorporates high-resolution images that align with the brand's identity, enhancing the overall aesthetic.​ Graphics and icons are thoughtfully selected to complement the content, providing visual cues that support the narrative.​ 

Functionality & Usability:

The menu opens on click, with smooth animations, but lacks sticky functionality. A persistent top nav bar could help with orientation. The homepage requires substantial vertical scrolling. Users could benefit from anchor links or a mini-map nav for quick access to sections like “Projects” or “Skills.” 

Interactive Elements such as the hover animations and transitions are polished which give a sleek feel. We can on the music too and can choose between night mode or light mode. The site works perfectly nice on mobile, and desktop screen. If you hover the mouse to the left side, the menu bar opens up.

Content Quality & Relevance:

Content is personal, engaging, and well-written, ideal for a portfolio. Skill sets are clearly listed with tools and experience levels. He also added carousel for all his projects making it easy to go through each one. However, the storytelling is strong, but not always actionable. Clear CTAs like: “Hire Me,” “Download CV,” or “Let’s Work Together” would improve engagement. 

Some sections (e.g., project views) rely heavily on images without much explanatory text. Visitors might want more context or links to case studies. He can add more pictures on his website or a photo of him in the about me section as people might want to know who he is.

Responsiveness & Compatibility:

The site loads fairly quickly, though some animations and large images may be slightly slow such as the circle cursor. The site works perfectly nice on mobile, and desktop screen. It wworks well in modern browsers. Audio suggestion at load may be a barrier for users in quiet environments or with accessibility needs. The site has night and light mode choice.

Weaknesses & Improvements/Recommendations:

• Add navigation bars, menu buttons on top of the website so its easy to browse through
• Make a contact, and about me on another page
• Adding clearer visual breaks would improve it.
• The fonts for his 'About Me' section is too thin and its hard to read. 
• Not everyone will know that there's a pop up side menu on the left if they don't hover there and the menu items are not really clear as the icon also isn't clear such as the email logo.
• He can add more colours and different font style for his each projects section pages
• Currently, headings and body text blend together visually. Use different font styles, weights or sizes to create clearer hierarchy (e.g., bold for H2s, lighter for body).
• There are texts which are too thin / small to read. This affects readability and accessibility

Strengths:

The site uses full-screen images, dynamic hover effects, and animations that showcase artistic talent. He uses good amount of text animations as you scroll down so it feels more interesting to go through. On the first landing page, we can choose to use a sound or no and we can choose between night/dark mode or light mode when browning through the website. The use of black, white, and accent colors ensures a clean modern and professional aesthetic. Well-chosen fonts contribute to a high-end, creative studio vibe. It has animated clouds background, moving graphics. The site has carousel sliders showcasing his project which we can click to open and has elements popping when we hover on it. Lastly, it has smooth asnimations, engaging transitions and hover effects elevate user experience. 

 Website #3  : Ahadi Foundation

Website source : https://www.awwwards.com/

Web analysis #3 by Anggia Tsani.R - screenshots of the webpage & annotations on canva

(hover & click arrow to go through the slideshow^)

Purpose, Goals & Effectiveness:

The Ahadi Foundation's website effectively communicates its mission to empower women with disabilities through leadership, art, and inclusive design. The content emphasizes the foundation's commitment to transforming societal perceptions and promoting the economic and political empowerment of women with disabilities. The programs and initiatives highlighted align with these goals, providing a clear understanding of the foundation's objectives.​ The design is vibrant and colourful making the content engaging.

Visual Design & Layout:

The website's design is visually appealing, featuring a colourful vibrant modern and clean layout. The color palette, predominantly using shades of purple and teal, is both vibrant, colourful and professional, contributing to a sense of creativity and inclusivity relating to the content. It has many graphics, pictures and transitions as we scroll down. The headers and buttons/nav menu on top are consistently placed across all the pages. It has menu button on the top left to visit other pages.

Typography is legible, enhancing readability across various devices. The different fonts makes the site not boring and engaging. Animations and scrolling effects are used effectively to engage users without overwhelming them, as noted by its recognition as Site of the Day on Awwwards.

The spacing are all good and text are not too much to the side so its easy to read through. Deza also introduced herself briefly on the home page so people easily know who is the founder. Paragraphs also are just brief and short so it wont bore viewers.

Functionality & Usability:

The website is user-friendly, with intuitive navigation and well-organized content. Interactive elements, such as the newsletter signup and program details, function smoothly. The site is responsive, adapting well to different screen sizes and devices, ensuring accessibility for a diverse audience. They also have french and english language. However, incorporating more accessible features, such as keyboard navigation and screen reader compatibility, could further enhance usability for individuals with disabilities.​

Content Quality & Relevance:

The content is well-written, clear, and relevant to the foundation's mission. Program descriptions, such as those for "Inclusive Design" and "Aesthetics & Disability Fund," are detailed and informative. The inclusion of personal stories, like that of founder Deza Nguembock, adds a human element that resonates with visitors . The content is organized logically, with distinct sections for programs, news, and ways to get involved, facilitating easy navigation and understanding.​

Responsiveness & Compatibility:

The website performs well, with fast load times and smooth transitions between pages. It is compatible with various browsers and devices, providing a consistent experience for users. Regular maintenance and updates are evident, ensuring that the content remains current and relevant. 

Weaknesses & Improvements/Recommendations:

• User Engagement like interactive elements, such as forums or discussion boards, to foster a sense of community among visitors.​

• The site feels more like a digital brochure than an engaging, dynamic platform. More interactive features (e.g., hover effects, collapsible FAQs, or quizzes related to disability awareness) would improve engagement. 

• Missing accessibility interactivity: Features like text-to-speech toggle, font resizing, and high-contrast mode for users with visual impairments are absent but would strongly support the inclusive mission of the whole theme content. The current design may not fully support users with disabilities, despite the site’s inclusive goals.

• Some sections feel dense, especially on mobile, due to tight line spacing and few paragraph breaks.

• No multilingual accessibility features: While the site supports English and French, there's no easy toggle or indication for language switching on every page.

Strengths:

• The purpose and goals of the foundation are immediately visible and strongly communicated. The site has elegant, clean design, visually appealing layout with modern, colourful vibrant design aesthetics. Also has good font choices and size. 

• Responsive and mobile-friendly: Adapts well across screen sizes, offering a consistent experience. 

• Strong storytelling: The narrative about the foundation’s origin and founder builds trust and emotional connection.

• Rich program content: Program descriptions are detailed, relevant, and effectively linked to the foundation’s goals. 

• Have more pages menu on the top left on the page.

 Website #4  : Munchies

Website source : https://www.awwwards.com/

Website #4 by Anggia Tsani.R - screenshots of the webpage & annotations on canva

(hover & click arrow to go through the slideshow^)

Purpose, Goals:

The website aims to promote and sell gourmet cookies, highlighting their use of healthy and vegan ingredients. The goal is to create a user-friendly e-commerce experience for cookie lovers, particularly those seeking high-quality, vegan options.

Visual Design & Layout:

The site has clean and minimalist design: The layout is simple, focusing on product images and clear calls to action (CTAs), such as "Shop Now" and "Build Your Box." The warm, earthy tones of the website complement the brand’s healthy, natural image. Soft colors are welcoming and align with the health-conscious nature of the products. High-quality images of the cookies are used, which make the products look appealing. The visuals effectively highlight the cookies’ textures and ingredients.

Typography is clear and readable, which is crucial for an e-commerce site. The color palette is consistent and creates a cohesive look that matches the brand’s natural and healthy ethos. Product images are high-quality, displaying the cookies in an appetizing way that encourages browsing.

It has many top navigation menu bar to other pages too. It has many clickable button to their other page links for easier and faster access. There are also moving texts and moving background on the landing page. The fonts, colours are consistent throughout all the pages.

Functionality & Usability:

The navigation is simple and intuitive, making it easy for users to browse different cookie options and make selections. The website offers a "Build Your Box" feature, which is a great interactive element that allows users to customize their order. The shopping cart and checkout process are straightforward, leading to a smooth purchase experience.

Content Quality & Relevance:

The website's text is to the point, providing relevant information about the products and their benefits. The site gives clear product descriptions of how each product page gives a good overview of what the customer can expect in terms of ingredients and flavour. The photos of the cookies are appetizing and support the messaging around healthy eating.

Responsiveness & Compatibility:

The website loads quickly with minimal delay. This is critical for user retention, especially on mobile devices. The site is responsive and adapts well to different screen sizes, which is essential for users accessing the site via smartphones or tablets.

Weaknesses & Improvements/Recommendations:

• Enhance Content such as talking more on the company’s backstory, ingredient sourcing, and sustainability practices to create a stronger connection with customers.
• Optimize User Interaction: Make the "Build Your Box" process more intuitive, potentially adding step-by-step instructions or guidance.

Strengths:

• Clear and focused branding
• Has pages and navigation menu on top of the header to browse through the other pages. 
• Has FAQs
• Simple and clean design
• Mobile responsiveness: Pages adapt well to various screen sizes. 
• Professional tone when advertising the cookie

 Website #5  : Spylt Drink

Website source : https://www.awwwards.com/

Web analysis #5 by Anggia Tsani.R - screenshots of the webpage & annotations on canva

(hover & click arrow to go through the slideshow^)

Purpose, Goals:

SPYLT presents itself as a modern, edgy brand offering protein-infused, caffeine-boosted milk products. Its primary goal is to appeal to a youthful, adventurous demographic seeking functional beverages that combine nostalgia with innovation. The website effectively communicates this by showcasing its product range, highlighting key benefits, and emphasizing its bold brand identity.​

Visual Design & Layout:

The website employs a an energetic color scheme with beige, brown and milky colours which matches their drink products. The typography is consistent with the brand's playful tone, it's easily readable and featuring bold fonts that capture attention. High-quality images and videos are utilized effectively to showcase the products and their benefits. It advertises its drinks in an attractive way with many buttons, transitions and animated videos, graphics and pictures. The home page is really attractive with the opening having the drinks pop out as the animation, followed by a catchy text.

They have a menu button on the top centre where it leads us to other pages such as 'Shop' page to buy the drinks, contacts, about and more. There's many hover buttons which makes the website really interactive. The website also has a good way of separating different sections using different background colours and Milk dripping dividers effect. It also has sliding picture effect as we scroll down. They put alot of information about their drinks too for advertising them. It is overall a very interactive website .

Functionality & Usability:

The website features a straightforward navigation menu with clear categories. Implementing a sticky navigation bar could enhance user experience by providing constant access to the menu as users scroll.​ Interactive features, such as hover effects and clickable elements, engage users and make the browsing experience more dynamic. 

Content Quality & Relevance:

The content is clear and concise, effectively communicating the product's benefits and features. However, providing more detailed information about the product's ingredients and sourcing could enhance transparency and trustworthiness.​ The content is well-organized, with distinct sections highlighting different aspects of the product. Ensuring that each section is easily accessible and logically structured could improve user navigation.​

Responsiveness & Compatibility:

The website is responsive, adapting well to various screen sizes and devices, ensuring a consistent user experience across platforms.​ It works perfectly on the mobile phone screen too. However, it takes a few seconds to load the website.

Weaknesses & Improvements/Recommendations:

• Incorporate a greater variety of font style, weights and sizes to improve visual hierarchy and guide users through the content more effectively.​ 

• Implement Sticky Navigation: Introduce a sticky navigation bar to provide constant access to the menu as users scroll, enhancing usability.​

• Add more interactive elements, such as quizzes or surveys, to further engage users and encourage participation.​

• Offer downloadable resources, such as product information sheets or nutritional guides, to allow users to access information offline and share it with others.​

Strengths:

• It is a very attractive e-commerce site which has alot of advertising and good marketing.
• SPYLT's website effectively captures the brand's youthful and energetic essence, offering a user-friendly experience with clear product information.
• Their colour theme and design style matches their topic which is Milk Drinks
• The fonts are easily readable and clear.
• Have navigation menu buttons 
• Good and creative section divider effect
• Many hover buttons, animations, transitions
• Many 3d graphics, images, videos, and sliding gallery.
• They have a page where they post people's review on the drink which is good marketing.

 Exercise 1 - Feedbacks 

Week 1 - None

Week 2 - Sir told me to change my layout a bit for my blogger and make it all left aligned and more simple / not too decorative.

 Exercise 1 - Reflection 

For the first exercise, it was a very interesting one as we got to analyse 5 different websites. I found out how many websites have different features, design, layout and organization. I learned how important design is in digital media especially to promote or communicate contents to the audience. After analysing carefully all the 5 websites, I managed to find out each of the weaknesses and strength os the websites which allowed me to note down what things I should be implementing on my future websites that i'm going to make. 

I learnt how important it is to add interactive features to websites as it make the website more attractive, engaging and fun for the viewers to see and navigate through. By understanding how users interact with the site, designers can optimize navigation, improve usability, and tailor the design to better meet user needs and expectations.