INTERACTIVE DESIGN / EXERCISE 1

on

21/4/2025 - 18/5/2025 / (Week 1 - Week 6)

Aricia Man Yi Xuan / 0375026

Interactive Design / GCD60904

Bachelor of Design (Hons) in Creative Media

Exercises 1 / Google Drive Link

TABLE OF CONTENT

1. Lectures

2. Instructions

3. Exercise 1: Web Analysis

LECTURES

- Notes - 

Week 1 (22/4/2025)

In our first class, we had a briefing session to understand what this course will cover throughout the semester. Mr. Shamsul introduced us about the MIB and the projects that we need to be done in the following weeks.
To-do lists:

  • Subscribe to netlify.com
  • Download Adobe Dreamweaver
  • Exercise 1: Web Analysis

Week 2 (29/4/2025)

Today's lecture explained about the topic: "Usability: Designing Products for User Satisfaction", based on the PPT linked here. We explored the importance of usability in UI/UX design. Mr. Shamsul also showed examples of usability in existing websites.
Key Principles of Usability:
- Consistency
- Simplicity
- Visibility
- Feedback
- Error prevention

We were also briefed on our next exercise: Exercise 2 - Web Replication. After that, we conducted a group activity based on a simple research and design thinking, focusing on the way-finding system at Taylor's University. We discussed the different users of the campus wayfinding system, including visitors, students, and people with disabilities. We identified some common problems such as lack of interactive maps and inaccessible design for wheelchair users. Below is our result of paper prototype.

Fig.1.1.1 Paper Prototype / (Week 1, 29/4/2025)

TAP ME BACK TO TOP

INSTRUCTION

Fig.1.1 Module Information

EXERCISES

3. Exercise 1 - Web Analysis

3.1 Instructions

Choose FIVE (5) websites from the link given. Review the selected website 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 summarizing your findings and recommendations. 

What to have in the Analysis:

  • Purpose & Goals - Evaluate whether they are effectively communicated to the user.
  • Visual Design & Layout - Use of colour, typography, and imagery.
  • Functionality & Usability - Navigation, forms, and interactive elements.
  • Quality & Relevance - Content accuracy, clarity, and organization.
  • Performance - Load times and responsiveness.
  • Compatibility - Different devices and browsers.

Report Deliverables:

  • Write a brief report of at least 200 words for each website analysis.
  • Add screen capture of key section or pages, and explain them.
  • Include headings/subheadings for clear formatting.

3.2 Chosen Websites

  1. Tech Redux - Design Beyond The Screen
  2. Dolce&Gabbana® Beauty Tools
  3. Oura Ring. Smart Ring for Fitness, Stress, Sleep & Health.
  4. Altly - Accessible AI Alt Text
  5. Siena Film Foundation

3.3 WEB ANALYSIS REPORT

-1. Tech Redux -

Fig.3.3.1 Homepage of Tech Redux (Link to website) / (Week 1, 23/4/2025)

I chose this website for my first web analysis because the moment I clicked on it, I was so impressed. The visuals, the animations, the futuristic vibe — it felt like stepping into a sci-fi movie interface. This site made me curious about how it was built, how they made these interactions, and how they kept it all so smooth.

Purpose & Goals

Fig.3.3.2 Tech Redux's About Us / (Week 1, 23/4/2025)

According to their "About" page,  Tech Redux positions itself as a creative studio that is redefining how people experience the web. Instead of following trends, they aim to set them, and that's something we can clearly feel from their visuals, animations, and overall vibe. 

Visual Design & Layout

Fig.3.3.3 Visual Design - MP4 / (Week 1, 23/4/2025)

The homepage has an animated ocean-like effect in the background. The water movement was subtle and beautiful, making the whole site feel alive and giving it a calming yet futuristic atmosphere. There was also background sound, like a kind of ambient, echo-y effect, which created an emotional feeling. This website features a dark theme with glowing blues. Additionally, the fonts are simple and clean, using sans-serif. 

The layout is simple and clear. The homepage (Fig. 3.3.1) is made up of large, full-screen sections. It makes us just focus only on one thing at a time. When we scrolled our mouse, it felt like flipping through a slideshow or storybook. Most of the main texts are centered on the page, letting us focus on the messages.

However, on the "What Drives Us" page under the About section, the font size was quite large. It might have felt hard to read the whole paragraph at once. It would be better if they slightly reduced the font size.

Functionality & Usability

Fig.3.3.4 Menu & Scroll Interaction moment / (Week 1, 23/4/2025)

The navigation menu is represented by a grid-dot icon instead of the usual hamburger icon, it's clean and easy to understand. Forms are provided under the Contact section (Fig.3.3.5). There's small micro-interactions like hover effects and cursor animations that guide the user naturally. While this fits the creative and modern style of the site, it could affect usability for first-time visitors who are used to more common navigation icons.  Additionally, the transitions of the menu section are also a slight delay (like 2- 3 seconds), it feel like the site is lagging or stuck. The full-screen layout also requires a lot of scrolling, users have to scroll through each section one by one, which might feel tiring or slow for someone looking for quick information. 

Quality & Relevance

Fig.3.3.5 Contents / (Week 1, 23/4/2025)

The content is brief but impactful. Each section has minimal text, mostly showcasing visuals or animations. Their writing style is bold and futuristic. Besides, the website's structure keeps all the content well organized. There's not too much text on the page, and it's broken up into clearly divided sections.

Performance & Compatibility

Fig.3.3.5 Tech Redux Screen Display on Mobile / (Week 1, 23/4/2025)

The website is responsive and works across devices — tested on IOS, and major browsers like Chrome and Safari. It retains its layout and smooth animations. However, the mobile version is slightly less immersive than desktop version, the full experience is best presented with a large screen. Moreover, there are no hover effects on mobile, so those interactions are either missing or feel less exciting.


- 2. Dolce & Gabbana Velvet Collection -

Fig.3.3.6 Homepage of Dolce & Gabbana Velvet Collection (Link to website) / (Week 1, 24/4/2025)

Purpose & Goals

Fig.3.3.6 Purpose and Goals / (Week 1, 24/4/2025)

The Dolce & Gabbana Velvet Collection website is designed to immerse users in a luxurious and emotional narrative. Its purpose is not just to sell fragrances but to present them as a deeply personal journey through Italian culture and memories. It also aims to showcase the Velvet Collection, a line of luxury fragrances by Dolce & Gabbana.

Visual Design & Layout

Fig.3.3.7 Visual Design & Layout - MP4 / (Week 1, 24/4/2025)

The website's visual is elegant and cinematic. It uses black, gold, and blue, dramatic tones combined with high-resolution imagery that conveys opulence and sensuality, perfectly aligned with the brand's identity. The typography is elegant with serif and sans-serif fonts that reflect tradition and class. The layout features clear, simple navigation that guides the user effortlessly through the quiz.

Functionality & Usability

Fig.3.3.8 Interactive slides / (Week 1, 24/4/2025)

The user interface is clean, well-organized, and intuitive. There's a lot of interesting quiz's interactive elements, such as buttons and sliders, are easy to identity and use, making the process more joyful. It will change colour in the background when each navigation key is being hovered onto. The quiz is designed to foster personalization. However, the menu icon is not clearly visible, which may hinder users trying to explore additional content. The absence of direct links such as "Contact" or "About" limits user access to essential information, users should click "Shop Now" to continue exploring the brand, which redirects to a different site and disrupts the flow. It would be better if they add more information title in the menu section.

Quality & Relevance

Fig.3.3.9 Interactive slides / (Week 1, 24/4/2025)

The content across the site is beautifully crafted, focusing on the origin, ingredients, and inspiration of each fragrance. It is clear that the brand aims to immerse the user in a sensory experience even before they smell the product.

Performance & Compatibility

Fig.3.3.10 Dolce & Gabbana Screen Display on Mobile / (Week 1, 24/4/2025)

The website is responsive with no loading delays and adapts well across various devices. In the "Discover the Collection" section of the site, the interactive slides showcase a vertical version but still maintain readability across screen sizes.

- 3. Oura Ring -

Fig.3.3.11 Homepage of Oura Ring (Link to website) / (Week 1, 24/4/2025)

Purpose & Goals

Fig.3.3.12 Oura Ring About us page / (Week 1, 24/4/2025)

The main purpose of the Oura Ring was mentioned on the homepage, which is to introduce their product and encourage users to explore its benefits for health and wellness. The goal is clearly to let users know about what the Oura Ring does, including sleep tracking, health monitoring, personalized insights, and so on. There's a "Shop" button with a blue button that effectively attracts users to click on it to make a purchase.

Visual Design & Layout

Fig.3.3.12 Product & Typography - MP4 / (Week 1, 24/4/2025)

The visual design is clean, minimal, and simple. It uses a neutral colour palette (white, grey, brown, blue, etc. ) with lots of white space, which gives it a comfortable and premium feel and also fits the health and wellness theme. The typography uses mostly bold titles of sans-serif with some Italics; it's easy to read for users. Apart from that, the images are high-quality, showing the product from different angles that highlight its design. The layout flows vertically, guiding the users from the intro to the features.

Functionality & Usability

Fig.3.3.13 Menu / (Week 1, 24/4/2025)

The homepage (Fig.3.3.11) has a smooth and intuitive experience. Navigation is straightforward with clear links like "Shop," "Why Oura," "How it works." There isn't a traditional "Contact us" form on the site, users can access support or help through the Help Center, but there are a simple form where users can enter their email to subsribe for updates. However, the interactive elements is less. The buttons may slightly change colour or boldness when hovered, but product images and section mostly remain static. Maybe adding more noticeable hover interactions, such as animated icons or button color changes could make the experience feel more dynamic and interesting.

Quality & Relevance

Fig.3.3.14 Content / (Week 1, 24/4/2025)

The content is clear, informative, and relevant to the target audience — people interested in health, better sleep, and so on. The website clearly explains the core features of the Oura Ring, which helps users easily understand how the ring can improve their daily lives. There's also content from experts and partners like scientists, which boosts the credibility of the product.

Performance & Compatibility

Fig.3.3.15 Oura Ring Screen Display on Mobile / (Week 24/4/2025)

The website loads quickly and works smoothly on both desktop and mobile devices. However, the text and images are placed too closely together, making the layout feel a bit cramped. The text colour is a bit similar to the background, especially when light gray text is used on a pale background, affecting the readability. It would be better if they improved the spacing between elements and increased the contrast between text and background.

- 4. Altly -

Fig.3.3.16 Homepage of Altly (Link to website) / (Week 1, 24/4/2025)

Purpose & Goals

Fig.3.3.17 About us / (Week 1, 24/4/2025)

Altly is an AI tool that makes the internet more inclusive and accessible for everyone. This is clearly mentioned through their "About" and "Our Mission" sections. They believe that images should tell stories, and they want to ensure every user can understand visual content no matter how they perceive the world. Their mission is to generate alt text using AI not just to meet legal compliance, but as a human rights movement to break barriers in digital access.

Visual Design & Layout

Fig.3.3.18 Visual Design & Layout - MP4 / (Week 1, 24/4/2025)

The web design has a clean and ordinary aesthetic, using sans-serif and blue colour as the main colour. The layout is well-structured but the images in Homepage feel randomly positioned. It also lack of connection between the images and accompanying text, and some images appear blurred. I'll use relevant images and apply consistent alignment and spacing to create visual harmony instead of letting images float loosely.

Functionality & Usability

Fig.3.3.18 Navigation bar / (Week 1, 24/4/2025)

This website provides a clean and straightforward user experience with a minimalist interface. Functionality is smooth overall on a basic level — buttons, links, and scrolling all work without bugs. The form are also provided in the contact us section. 

Quality & Relevance

Fig.3.3.19 Features / (Week 1, 24/4/2025)

The website explains the product well using short information. It highlights specific features like automating tasks and generating documents and also gives examples of how different teams can use Altly.

Performance & Compatibility

Fig.3.3.20 Altly Screen Display on Mobile / (Week 24/4/2025)

The site loads fast and is responsive. It works well on both desktop and mobile. However, it has some noticeable layout problems, such as the images in the "About" section appearing cut off and disrupting the visual balance, affecting the overall experience. Additionally, the footer area also has an imbalance spacing between "pricing" and "terms of use". I would suggest optimizing the image scaling and placement on the About page to retain design consistency, and the footer also needs better spacing.

- 5. Siena Film Foundation-

Fig.3.3.21 Homepage of Siena Film Foundation (Link to website) / (Week 1, 24/4/2025)

Purpose & Goals

Fig.3.3.22 About page / (Week 1, 24/4/2025)

Siena Film Foundation is a film production house which dedicated to crafting groundbreaking narratives. This is effectively mentioned through the "About" page under the menu icon on the top right hand side.

Visual Design & Layout

Fig.3.3.23 Visual Design & Layout / (Week 1, 24/4/2025)

The website has a very cinematic design. It uses large visuals, some background videos, sound effects, and a serif typography that gives an elegant feel. There is heavy emphasis on imagery over text, which really attracted users attention. The colour palette is mostly black, white, red and muted tones. The layouts are designed and arranged well with hierarchy and contrast.

Functionality & Usability

Fig.3.3.24 Contact page / (Week 1, 24/4/2025)

The site is quite easy to use with a clean navigation bar and simple structure. Key links are accessible at the top right menu icon (Work, About, Contact), and the homepage smoothly guides users into their film projects. Additionally, there are a lot of interactive elements like hover effects on links, and thumbnails are effective, adding an interesting feel. However, there's no form on the Contact page (Fig.3.3.24), just an email address, causing this to limit engagement and accessibility for casual visitors.

Quality & Relevance

Fig.3.3.25 Who We Are & Documentary page / (Week 1, 24/4/2025)

The website effectively showcases Siena Film Foundation's portfolio, highlighting both documentaries and feature films. Each film entry includes essential details such as title, director, editor, DOP, producer and so on. Moreover, the content is presented compactly, allowing users to quickly catch key information. Films are also categorized and displayed with visuals, enhancing user engagement.

Performance & Compatibility

Fig.3.3.26 Siena Film Production Screen Display on Mobile / (Week 1, 24/4/2025)

The site loads efficiently on desktop and mobile devices, with smooth transitions and animations, and functions well on different browsers. However, there's a prompt to "Rotate your device to ensure a better experience", which suggests that the mobile experience might be suboptimal. Thus, the mobile compatibility is noticeably weaker. There are several layout issues that become apparent, such as some content being cut off or missing and the elements not being properly scaled for smaller screens. The navigation bar containing "Home," "Work," "About," and "Contact" is not centrally aligned on mobile, which disrupts the site's balance. The site should improve mobile responsiveness using flexible grid layouts.

TAP ME BACK TO TOP

REFLECTION

Experiences:

This was my first UI/UX class; everything felt very new to me, but also really exciting. Doing these tasks gave me a clear idea of what UI/UX design is all about, and I do like it. I explored and analyzed each websites which let me more understanding the different of a good and a bad website design.

Observation:

Through this process, I realized how layout grids and margins give structure and readability to the entire page. Typography hierarchy was important element that helped me understand how users are guided through the content.

Findings:

Overall, this project was a meaningful learning experience. The process of analyzing gave me a critical design mindset that I can apply in the future.

























Comments

Post a Comment