INTERACTIVE DESIGN EXERCISE 1 - WEB ANALYSIS

22 September 2025 - 5 October 2025

LIM JIA XUAN 0371026
Interactive Design | Bachelor of Design in Creative Media | Taylor's University
Exercises 1/ Website Analysis

TABLE OF CONTENTS

1.0 LECTURES

2.0 INSTRUCTIONS

3.0 FEEDBACK

4.0 REFLECTION

1.0 LECTURE

2.0 INSTRUCTIONS

Exercise: Web Analysis

Website 1: Uniting Age Well by JTB Studios

1. Purpose and Goal

Uniting AgeWell is an organisation of the Uniting Church in Australia that is committed to supporting older people to live with dignity, independence, and purpose.

It provides a wide range of services, including Home and Community Care, Health and Wellness programs, Residential Care, and Retirement Living options. These services are designed not only to meet the practical needs of older adults but also to promote social connection, well-being, and quality of life.

The organisation focuses on creating environments where older people feel respected, supported, and empowered to make choices about their own lives. Its goals are centred on enhancing independence, fostering a sense of belonging, and delivering compassionate care that reflects the values of the Uniting Church.

2. Visual Design and Layout

(a) Colours

The website uses purple in five different tones as its main colour, along with a cream tone as the overall background and white (#ffffff) as the background for detailed information. For the text, it uses grey (#231f20) and black (#000000).

The combination of the three shades of purple creates a sense of harmony, even though purple is typically categorised as a cool-toned colour.

(b) Typography

Font that used in this website were Studio6 .

Studio6 is applied to general headings, subtext, navigation, and call-to-action text.

(c)Imagery

The imagery across the website is primarily related to the elderly community. For example, it features photos of nurses caring for older adults, group photos of elderly individuals, and other similar visuals. These may not be the most polished or artistic photos, but they effectively highlight the organisation’s work and purpose in this field. The way the images are presented is clean and straightforward, without any fancy transitions. This simplicity is a smart design choice, as the target audience is older adults, and a website that is overly complex or flashy might confuse or overwhelm them.

(d)Layout

This website adopts a zig-zag layout, alternating between images and text to create a natural “Z-shaped” reading flow. This structure enhances visual engagement by guiding the user’s eye smoothly across the screen, encouraging exploration of both imagery and written content. The alternating arrangement establishes a dynamic interaction between visuals and text, preventing monotony while maintaining balance and rhythm throughout the page. As a result, the layout not only captures attention but also improves readability and user experience.

3. Functionality and usability

(a) Navigation

The navigation experience is good, with a burger menu that is clean, neat, and easy to use.

(b) Interactive Elements

The interactive features of the website, including the burger menu and navigation buttons, are designed with accessibility in mind. For example, when a button is selected, it is highlighted. This is especially helpful for elderly users who may not always notice the pointer, as the visual feedback guides them through the interface. Such features strengthen the interaction between the designer and the user.

(c) Form

The form is well designed. Unlike forms that only require users to manually input information, this website provides options for enquiries, making the process easier and more user-friendly.

4.Quality and Revelance

(a) Quality

Overall, the quality of this website is good. It features a spacious and clean layout that is thoughtfully designed for its target audience—the elderly—unlike many websites created for the general public.

(b) Relevance

All the content and information on this website are relevant to the mission and aims of the organisation.

5. Website Performance

(a)Load Time

(b)Responsiveness and Compability

The website is generally very responsive and functions well across both desktop and mobile devices. All graphics, text, and sections scale appropriately according to screen size, ensuring a consistent and visually balanced layout. This adaptability enhances usability, allowing visitors to enjoy the same clear presentation and smooth navigation experience regardless of the device they are using.

6. Conclusion

(a)Strenghtness

The strength of Uniting AgeWell lies in its clean and clear layout, which effectively delivers relevant messages to users. The typography maintains strong contrast with the background by using appropriately large font sizes. The layout is well-designed, with suitable use of white space that improves readability and visual balance. Overall, the navigation experience is smooth and intuitive, while the subtle animations during transitions are dynamic and enhance the overall user experience.

These strengths are consistently maintained across different devices, including desktop, mobile, and tablet, ensuring accessibility and usability for a wide range of users.

(b)Weakness

The main weakness of this website is its lack of supporting images. Most of the information is delivered primarily through text, which may reduce engagement and make the content feel less relatable. This limitation could also affect the level of trust that users place in the organisation, as visuals often help reinforce credibility and authenticity.

Website 2: Sun Metalon by Milkshake Studio

1. Purpose and Goal

Sun Metalon is a technology-driven company focused on transforming the way metals are recycled and reused. Its purpose is to decarbonise the global metal industry by creating innovative, energy-efficient processes that minimise CO₂ emissions.
The company’s goal is to enable a circular metal economy, where metal waste such as chips, swarf, and sludge can be converted back into high-quality raw material. By doing so, Sun Metalon reduces the need for new mining, lowers production costs, and supports manufacturers in building more sustainable supply chains.
Sun Metalon’s vision is to make metal production localised, cost-effective, and environmentally responsible. Its work is centred on driving technological innovation, reducing waste, and fostering a planet-positive future for industrial manufacturing.

2. Visual Design and Layout

(a) Colours

The website uses three main colours: brown, orange, and white. Brown is applied as the background colour, while orange is used for details such as icons or elements that highlight important information. White is primarily used for text.

The high contrast between brown and orange helps key information stand out, making it easier for users to focus on the messages the organisation wants to convey. The clean use of white for typography also ensures good readability against the darker background.

(b) Typography

This website uses three fonts: Noto Sans JP, Rector, Bastaro

(c)Imagery

The imagery across the website is relatively minimal. However, even with a smaller number of pictures, the visuals effectively support the information being presented, giving the overall website a clean and neat appearance. To enhance clarity, most of the images are directly related to metals, with a few additional photos showing the machinery used in the process. The way these images are presented is simple and straightforward, without unnecessary or fancy transitions, which helps maintain a professional and focused look.

(d)Layout

This website uses a full-screen photo layout and a zig-zag layout, both of which are heavily image-focused.

The full-screen photo layout maximises the impact of visuals by allowing images to cover the entire screen, creating an immersive and bold presentation. This approach draws attention directly to the imagery, making it the central focus of the user experience.

The zig-zag layout alternates between images and text, creating a natural “Z-shaped” reading flow. This layout is visually engaging as it guides the user’s eye from one side of the screen to the other, establishing a dynamic interaction between images and content.

3. Functionality and usability

(a) Navigation

The navigation experience of the website is well thought out. From the laptop perspective, the designer chose to use a header menu instead of a burger menu. This direct and obvious design makes it easier for users to access the available options. 

However, when switched to mobile view, the header menu changes into a burger menu due to space limitations. This is a good design decision, as keeping the header menu on mobile would make the interface look too crowded. By using a burger menu, the website maintains a more spacious and balanced layout, ensuring usability across different devices.

(b) Interactive Elements

The interactive features of the website, including the header menu and side menu, are designed with accessibility in mind. For example, when a button is selected, it is highlighted with a subtle gradient colour. Although this is a low-key design choice, it enhances the overall aesthetic while still guiding the user’s attention effectively.

(c) Form

The form is well designed, requiring only basic personal information such as name, email, company name, and the user’s enquiry. All of these fields focus on essential information, keeping the process simple and user-friendly.

4.Quality and Revelance

(a) Quality

Overall, the quality of this website is good. It features a spacious and clean layout that provides users with clear information. The overall design creates a subtle yet aesthetic feel, balancing clarity with simplicity.

(b) Relevance

All the content and information on this website are relevant to the company and align well with its purpose, without including any unnecessary or irrelevant details.

5. Website Performance

(a)Load Time

(b)Responsiveness and Compability

The website demonstrates strong responsiveness, performing well across both desktop and mobile devices. With a limited but well-chosen set of graphics, text, and sections, the layout adjusts seamlessly to different screen sizes, maintaining visual balance and readability. This adaptability ensures a consistent user experience, enabling visitors to navigate and engage with the site smoothly regardless of the device being used.

6. Conclusion

(a)Strenghtness

The strength of Sun Metalon lies in its clean and clear layout, which effectively delivers relevant messages to users. The typography maintains strong contrast with the background by using appropriately large font sizes, ensuring readability. The layout is well-structured, balancing clarity with simplicity. Overall, the navigation experience is smooth and intuitive, while the subtle animations during transitions add a sense of dynamism and enhance the overall user experience.
These strengths are consistently maintained across different devices, including desktop, mobile, and tablet, ensuring accessibility and usability for a wide range of users.

(b)Weakness

The main weakness of this website is its lack of supporting images. Most of the information is delivered primarily through text, which may reduce engagement and make the content feel less relatable. From a client’s perspective, it would be more effective to include images that reflect the actual progression and real site activities. However, the images currently used on the website focus more on aesthetic appeal rather than showcasing the real environment or operations, which can limit the sense of authenticity and trust.

Website 3: KODE Immersive by Malvah Studio

1. Purpose and Goal

KODE Immersive aims to transform the way stories are experienced by blending creativity with cutting-edge technology. Its purpose is to create immersive environments that go beyond traditional media, allowing audiences to interact with content on a deeper emotional and sensory level.
The organisation’s goal is to help brands and clients form meaningful, lasting connections with their audiences through innovative storytelling tools such as AR, VR, spatial computing, and real-time 3D. By pushing the boundaries of design and technology, KODE Immersive seeks to inspire curiosity, deliver impactful experiences, and shape the future of digital storytelling.

2. Visual Design and Layout

(a) Colours

The website uses three main colours: black, orange, and white. These colours are applied across the background, font, and pointer elements. Together, they create a strong contrast that enhances readability and ensures the design remains visually striking and effective

(b) Typography

This website uses two fonts: Aeonik and Apple System UI Font

(c)Imagery

The website does not feature any traditional imagery. Instead, it relies entirely on text and a few 3D graphic elements to convey its message.

(d)Layout

This website uses a full-screen text layout.
The full-screen text layout maximizes impact by allowing text to dominate the entire screen, creating an immersive and bold presentation that captures the user’s attention immediately.

3. Functionality and usability

(a) Navigation

The website demonstrates a thoughtful approach to navigation. On desktop, the use of a header menu instead of a burger menu provides users with a clear and straightforward way to access options without additional clicks. This design choice enhances visibility and ensures a smooth browsing experience.

On mobile, however, the header menu adapts into a burger menu to address space constraints. This adjustment is both practical and user-friendly, as keeping the header menu in a compact view would create clutter. The burger menu allows the design to remain clean and balanced, supporting a seamless experience across devices.

(b) Interactive Elements

The website’s interactive features — including 3D design elements, pointer effects, and animated text. All of these are carefully designed with accessibility in mind. For instance, on laptops, 3D elements can be dragged for interaction, while on mobile they respond with a spinning or turning effect when scrolling. Pointer movements also trigger subtle effects, helping users stay aware of their cursor’s position. Meanwhile, the text incorporates horizontal movement to draw attention and guide the user’s focus naturally.

4.Quality and Revelance

(a) Quality

Overall, the website demonstrates an average level of quality. While it incorporates modern design elements that enhance its visual appeal, there is still room for improvement in terms of execution and user experience.

(b) Relevance

The relevance of this website lies in its ability to reflect current design trends, such as minimal imagery, bold full-screen text, and interactive 3D elements. These features not only engage users but also align with modern expectations for immersive and responsive digital experiences. By prioritizing usability across devices, the website remains relevant to a wide audience in today’s fast-evolving digital landscape.

5. Website Performance

(a)Load Time

(b)Responsiveness and Compability

The website demonstrates strong responsiveness, functioning smoothly across both desktop and mobile devices. By using a focused selection of text and sections only, the layout adapts seamlessly to different screen sizes while maintaining visual balance and readability. This responsiveness ensures a consistent and user-friendly experience, allowing visitors to navigate and engage with the site effortlessly on any device.

6. Conclusion

(a)Strenghtness

The website demonstrates several notable strengths. Its use of black, orange, and white creates a strong color contrast that enhances readability and ensures the overall design feels visually striking. The navigation system is also well thought out, with a header menu used on desktop for direct access and a burger menu on mobile to save space, ensuring smooth usability across different devices. Interactive elements, such as 3D graphics, pointer effects, and moving text, add a dynamic layer to the user experience and keep visitors engaged. Furthermore, the full-screen text layout creates a bold, immersive presentation, while the modern and minimal design aligns well with contemporary digital trends.

(b)Weakness

The main weakness of the website is its over-reliance on text and lack of supporting images. While the design incorporates modern 3D elements and clean typography, it does not include real-life visuals or contextual imagery that could make the content more relatable and engaging. This absence of imagery reduces the emotional connection with users and may make the site feel less inviting. Additionally, the focus on aesthetics over practical visuals limits the website’s ability to communicate progression or real-world examples, which can weaken its overall impact.

Website 4: The Europejski by Bright Media

1. Purpose and Goal

The purpose of Hotel Europejski is to preserve and celebrate Warsaw’s cultural and architectural heritage while providing guests with a world-class luxury experience. By blending historic elegance with modern sophistication, the hotel stands as a symbol of the city’s resilience.

Its goal is to deliver exceptional comfort and service, showcasing Polish art, history, and traditions within a contemporary hospitality setting. Hotel Europejski aims to be the premier destination in Warsaw for leisure, business, and cultural gatherings, offering guests a refined and unforgettable experience.

2. Visual Design and Layout

(a) Colours

The website uses three main colours: dark brown, dark orange,yellow and beige. Beige is applied as the background colour, creating a clean and neutral base, while dark brown is used for text and structure. Dark orange is applied to details and highlights, drawing attention to important elements. The strong contrast between brown and orange makes key information stand out, guiding users’ focus toward the intended messages. At the same time, the beige background enhances readability and prevents the design from feeling too heavy.

(b) Typography

This website uses three fonts:Helvetica, Ivy Mode and Aktiv Grotesk Corp

Studio6 is applied to general headings, while Times is used for subtext, navigation, and call-to-action text.

(c)Imagery

The imagery across the website is sufficient, providing both detailed and overview shots of the hotel. However, as an introduction website for a hotel that offers various services, it could be more effective to include images that highlight these service elements—such as staff interactions, hospitality experiences, or guests enjoying the facilities. Adding these human-centered visuals would not only showcase the hotel’s elegance but also create a warmer, more approachable connection with potential customers.

(d)Layout

This website uses both a full-screen photo layout and a zig-zag layout, each of which is heavily image-focused.

The full-screen photo layout maximises the impact of visuals by allowing images to span the entire screen, creating an immersive and bold presentation. This approach draws the viewer’s attention directly to the imagery, making it the central focus of the user experience.

The zig-zag layout alternates between images and text, creating a natural “Z-shaped” reading flow. This design is visually engaging, as it guides the user’s eye from one side of the screen to the other, establishing a dynamic interaction between content and visuals. However, in the mobile view, the zig-zag layout disappears due to limited screen space, resulting in a simpler stacked design.

3. Functionality and usability

(a) Navigation

The navigation experience of the website is well thought out—simple, clean, and user-friendly. From the laptop perspective, the designer chose to use a header menu instead of a burger menu. This direct and obvious design makes it easier for users to access the available options quickly.

However, when switched to mobile view, the header menu transforms into a burger menu due to space limitations. Unlike a standard burger menu, this website enhances the experience by including graphical icons alongside the options. This unique detail makes the burger menu more visually engaging and distinct compared to typical websites, while also improving usability for mobile users.

(b) Interactive Elements

The interactive features of the website reflect a low-key design choice that enhances the overall aesthetic while still guiding the user’s attention effectively. For example, the burger menu stands out as a unique detail: it incorporates graphical icons, making it more visually engaging and distinct compared to typical websites. This thoughtful approach not only adds subtle personality to the design but also improves usability, especially for mobile users.

4.Quality and Revelance

(a) Quality

Overall, the quality of this website is strong. It features a spacious and clean layout that presents information clearly and effectively. The overall design strikes a balance between simplicity and subtle elegance, creating an aesthetic that feels both inviting and easy to navigate.

(b) Relevance

All the content and information on this website are directly relevant to the company and align seamlessly with its purpose, without including any unnecessary or distracting details.

5. Website Performance

(a)Load Time

(b)Responsiveness and Compability

The website demonstrates strong responsiveness, functioning smoothly across both desktop and mobile devices. By relying on a focused selection of text and sections, the layout adapts seamlessly to different screen sizes while preserving visual balance and readability. This adaptability ensures a consistent, user-friendly experience, enabling visitors to navigate and engage with the site effortlessly on any device.

6. Conclusion

(a)Strenghtness

The strength of this website lies in its clean and elegant layout, which reflects the luxurious identity of the hotel. The use of high-quality imagery effectively conveys the hotel’s atmosphere and character, allowing users to experience its elegance visually. The typography maintains strong contrast with the background, ensuring readability, while the layouts—such as the full-screen photo and zig-zag format—are visually engaging and immersive. Navigation is intuitive across devices, with thoughtful design adjustments from desktop to mobile, ensuring accessibility for a wide range of users. Overall, the website successfully balances aesthetics with functionality, creating a refined yet user-friendly experience.

(b)Weakness

One weakness of the website is its limited focus on showcasing the human side of the hotel experience. While the imagery is elegant and immersive, it primarily highlights architecture and interior design rather than the people, services, or customer interactions that bring warmth and approachability. This may create a sense of distance between the hotel and potential guests, making it feel overly formal. Additionally, the heavy reliance on large visuals might overshadow detailed practical information that some users may look for, such as service highlights, staff introductions, or behind-the-scenes insights.

Website 5: Bitter Creek by Malvah

1. Purpose and Goal

The purpose of Bitter Creek is to preserve and celebrate the natural beauty, history, and ecological significance of the Bitter Creek region. By protecting its landscapes and wildlife habitats, the area stands as a testament to Wyoming’s environmental and cultural heritage.
Its goal is to provide visitors with engaging and educational experiences, promoting outdoor recreation, wildlife observation, and historical awareness. Bitter Creek aims to be a premier destination for nature enthusiasts, historians, and travelers seeking a connection with the region’s unique environment and storied past.

2. Visual Design and Layout

(a) Colours

The website employs three primary colors: highlight yellow, black, and white. White serves as the background, providing a clean and neutral foundation. Black is used for text and structural elements, ensuring readability and clarity. Highlight yellow is applied strategically to draw attention to key elements and transitions. The strong contrast between black and white emphasizes important information, guiding users’ focus toward the intended messages.

(b) Typography

This website used the font Inherit

(c)Imagery

The website showcases exceptional imagery, incorporating both high-quality photographs and engaging videos of the artist. These visuals not only highlight the artist’s personality and work but also create an immersive experience for visitors. By combining still and moving media, the website effectively captures attention, conveys the artist’s creative essence, and enhances the overall storytelling, making the digital experience more dynamic and memorable.

(d)Layout

This website utilizes a grid layout to organize content effectively. The grid arrangement maximizes the impact of visuals by allowing images to span half of the screen, creating an immersive and bold presentation. This structure enables viewers to process information more clearly, as it balances video, images, and text seamlessly. By combining visual and textual elements within a structured grid, the website enhances readability while delivering a striking and engaging user experience.

3. Functionality and usability

(a) Navigation

The navigation experience of the website is thoughtfully designed—simple, clean, and user-friendly. The burger menu is minimalistic, presenting options in a streamlined and unobtrusive way. This clear and intuitive design allows users to access available features quickly and efficiently, enhancing overall usability and ensuring a smooth browsing experience.

(b) Interactive Elements

The interactive features of the website reflect a subtle, low-key design approach that enhances the overall aesthetic while effectively guiding the user’s attention. For example, on the main page for selecting the artist’s work, hovering the pointer over a selection triggers a transitional “flipped book” effect, displaying a full-screen video preview. This feature allows users to get an immersive preview of the content without making a full selection, making the interaction both engaging and intuit

4.Quality and Revelance

(a) Quality

Overall, the website demonstrates strong creative quality and thoughtful design. It features a spacious, clean layout that presents information clearly and effectively, allowing users to navigate content effortlessly. The careful arrangement of visuals, text, and interactive elements enhances both usability and aesthetic appeal, making the browsing experience intuitive, engaging, and visually pleasing.

(b) Relevance

All content and information on the website are directly relevant to the company and align seamlessly with its core purpose. The site avoids unnecessary or distracting details, ensuring that every element supports the company’s message and enhances the user’s understanding and engagement.

5. Website Performance

(a)Load Time

(b)Responsiveness and Compability

The website demonstrates strong responsiveness, performing effectively across both desktop and mobile devices. Graphics, text, and sections scale seamlessly to different screen sizes, maintaining visual balance, clarity, and readability. This adaptability ensures a consistent and reliable user experience, allowing visitors to navigate and engage with the site smoothly and intuitively on any device.

6. Conclusion

(a)Strenghtness

The website has a clean and spacious layout that presents content clearly, making it easy for users to navigate. High-quality images and videos engage visitors effectively, while the use of white, black, and highlight yellow guides attention without being overwhelming. Interactive features, such as hover previews, enhance the user experience, and all content aligns closely with the company’s purpose, ensuring relevance and clarity.

(b)Weakness

Despite its strengths, the website has some limitations. The limited color palette can feel monotonous in certain areas, and some interactive previews may not be immediately intuitive for all users. Heavy reliance on visuals could affect loading times on slower networks, and first-time visitors might require subtle guidance to fully understand and explore the interactive elements.