INTERACTIVE DESIGN - EXERCISE 1

Week 1 - Week 2

Task 1 - Exercise 1

Siti Zara Sophia Binti Mohammad Reeza (0359881)

Bachelor of Interactive Spatial Design (Honours)

INSTRUCTIONS

EXERCISE 1 - WEBSITE ANALYSIS

For our first ever interactive design exercise, we were to analyse 5 award-winning websites and identify the purpose the website serves—whether it was trying to make the user buy a game, purchase a product, highlight expertise and services—the design across all aspects from typography to imagery, the functionality and useability alongside the website's performance in terms of load time, responsiveness and compatibility with different devices and browsers. Based on the following criteria, we were to critique the website and suggest suitable improvements according to concepts such as design principles. 

I was honestly quite intimidated at the sheer thought of this cause well... these are the crème de la crème of website design. Experienced and incredible designers from all around the world made some of these beautiful websites whereas I'm definitely not as experienced and still learning the ways of design. However, with such background might come a fresh outlook and perspective on the design choices made. Therefore, I will take this challenge with stride and try my absolute best! 

WEBSITES CHOSEN

Based on Mr Shamsul's advice, it was crucial to choose simpler websites as the websites chosen will impact our 2nd exercise. Thus, I adventured through the eye-ppealing site of TheFWA Awards in search of the 5 chosen ones. Finally, I landed on 5 websites. The websites who (unfortunately) couldn't escape my harsh grasp are:

• Amie

• Praxis Leandra Isler

• Lisette Donkersloot

• Belanger

• Redot

AMIE

To see a better version of the full picture, click here!

Purpose

Upon first look, Amie makes the purpose of the site clear as day: it is a site aimed at helping users turn meeting notes into automated workflows within seconds (essentially helping one with administrative workplace duties such as arranging meetings and so on). Frankly, Amie does a pretty good job marketing itself on their website however based on the design, there's a few key things I found that could be improved. 

Design

Let's start with the positives! Amie is very clearly formatted—starting with the product's selling point (making it even more appealing to users by highlighting the seconds it takes in a different colour) before jumping to the key features of the product within the same page. The website has easy to read typography and does a great job at emphasise by showing how Amie is applicable in the workplace. As the website is mainly in black and white (with a few pops of colour), it is incredibly readable as the contrast is high but also making the whole website look incredibly professional thus making it aesthetically relevant and even more trustworthy to their main audience—day to day corporate workers. The use of images within the website design helps potential customers visualise exactly what the product looks like and can help them with in their activities.

Now, the negatives. In my opinion, the hierarchy of the website is a bit off. Instead of amplify the features, they choose to focus on highlighting the product's description. For example: instead of showcasing the 'Shareable Notes' feature, they choose to make the description 'Shared with colleagues and customers' more visible and more important to the user. This could be a stylistic choice as they're trying to relate with the potential user however, I believe in some cases such as in the example I gave, it just doesn't work as well. Next, to emphasise the features of Amie more, I believe they should use the designed icons next to the feature titles. A lot of individuals are visual learners so added icons here and there could really help the users remember the features while scrolling through the website. 

Performance

Based on my observations, Amie performs extremely well with little to no loading time (even when the (university) wifi is HORRIBLE) mainly due to its minimalistic design. Additionally, it is compatible on multiple browsers and devices (phone and laptop) with the same format and design! To check performance further though, I decided to employ the help of https://ui.dev/amiresponsive?url=https://amie.so/ to check for device compatibility and the website largely looks the same across all devices! 

TLDR;

• Amie is designed to help users turn meeting notes into automated workflows.

• It assists with administrative workplace tasks (e.g. arranging meetings).

• The website effectively communicates this purpose.

• Clear layout starting with the main selling point.

• Highlights speed of automation visually (different colour).

• Key features presented on the same page.

• Easy-to-read typography and strong contrast (black & white with pops of colour).

• Professional and trustworthy aesthetic, appealing to corporate users.

• Use of images helps users visualise product functionality.

• Website hierarchy could be improved—feature emphasis is weak.

  • Example: "Shared with colleagues and customers" is more prominent than the actual feature "Shareable Notes".

• Feature titles should include icons to aid visual learners and enhance recall.

• Fast loading time, even with poor Wi-Fi connections.

• Minimalist design supports quick performance.

• Compatible across multiple browsers and devices.

PRAXIS LEANDRA ISLER

(I was not able to screengrab the whole website unfortunately so I had to screenshot each section individually)

Purpose

The website tells you what it's all about the moment it loads—it is showcasing Leandra Isler's services, particularly her practice for atlasology and naturopathy (both of which I'm VERY unfamiliar with). Before diving into exactly what she offers, which is a good strategy for those interested or are looking for services related to this field. She does a very good job at highlighting how she's different from her competitors by having a section dedicated to strictly that making it extra appealing to her potential customers. Additionally, for those who are still unsure about what exactly atlasology and naturopathy are, she even advertises her health blog which helps amplify her expertise and knowledge regarding the subjects.

Design

Let's start with the positives! For the most part Isler's website is visually very interesting and dynamic. It has a good mix of images and videos that interact with the user while the user scrolls through her page. Not only that, they (the images and videos) also interact with its website environment through the usage of typography as seen by the first page where some of the plant leaves almost intersect the wording. Alongside this, the font used is very clear and distinct, making it easy to read and not straining for the users—helping Isler's purpose as her website is very much health-focused. The website has pretty solid visual hierarchy as well, effectively letting users know what to look out for and keep in mind. The symmetry within the website is also good as everything is nicely aligned and there's balance within the text and the images used. Relevancy is another key point of the website through the help of the images especially for her service offering section where the visuals are distinct and true to the service yet aesthetically cohesive.

Now, the negatives. In my opinion, the proximity of words used within the headings don't work that well. It makes the heading look odd and almost disconnected? It's as if its different points instead of one connected, cohesive title which breaks the aesthetic appeal of the website. The next one is minor but the contrast for her contact information isn't as good compared to the rest of the website (which is excellent). I think if these minor changes are made, the website could be improved dramatically.

Performance

Based on my observations, Praxis Leandra Isler works well on both laptop and phone though it takes a little longer to load on phone, it's not a major issue! The animations within the website and the overall layout are functional throughout both devices and there is no discrepancy between devices! Though again, to double, triple check, I decided to use https://ui.dev/amiresponsive?url=https://www.leandra-isler.ch/en to verify. While everything mainly remains the same, some aspects of the layout change ever so slightly and the loading time is a noticeably longer than other sites.

TLDR;

• Website immediately conveys its purpose: promoting Leandra Isler’s atlasology and naturopathy services.

• Highlights her unique selling points in a dedicated section to stand out from competitors.

• Includes a health blog to educate users and build trust in her expertise

• Visually dynamic and engaging through movement with interactive images and videos.

• Clever use of typography (e.g. plant leaves overlapping text) adds depth.

• Clear, readable font—appropriate for a health-focused site.

• Strong visual hierarchy guides users effectively.

• Well-balanced layout with good alignment and symmetry.

• Relevant imagery, especially in the service section, reinforces the message while maintaining aesthetic consistency.

• Headings have awkward word proximity, making them look disjointed and less cohesive.

• Contact information has weaker contrast, reducing visibility.

• Works well on both laptop and phone.

• Slightly longer load time on mobile, but animations and layout remain functional and consistent across devices.

LISETTE DONKERSLOOT

See a better version of the image here!

Purpose

The website effectively displays that it's Lisette Donkersloot's portfolio though due to the hierarchy of certain texts, it's not immediately noticeable what type of portfolio it is. However, the website very effectively lays out Donkersloot's work through the use of movement, imagery and videos to entice visual appeal in a very cohesive yet aesthetic way (despite all the variety in terms of content and colour palette within her highlighted work).

Design

Let's start with the positives! The website is just so stunning. As mentioned above, the use of movement—within the display projects and the content within them—is just so interesting from a visual standpoint. It can't help but make the user want to look at her projects, to explore more—which is exactly what portfolio should do to the intended audience. The colour palette of her website and use of it in the chosen portfolio content also adds to the appeal as they all contribute to what Donkersloot is capable of as a director, with many images and videos complementing her website's rich green colour scheme and others contrasting it through the use of contrasting colours such as red. Unity and contrast are highlighted this way, effectively communicating Donkersloot's versatility. Additionally, there's use of repetition within the website design that makes it less confusing for the users as it unifies the differences found.

Now, the negatives. The immediate hierarchy could use some work. In my opinion, 'Director based in Amsterdam' should be the next thing highlighted after her name as that's what her potential customers value when it comes to wanting to book her. It should not be on the same hierarchical level as her social media profiles. Next, though the imagery contrast is good, the same can't exactly be the same for the texts displaying what type of project she's directing. I believe that should be amplified more as the aim of a portfolio is to display what you can do—thus a lack in visibility in terms of wording is not ideal whatsoever.

Performance

Based on my observations though it works well, it is on the slower side (probably due to the sheer amount of movement) and lags when you leave the site even momentarily. However, safe to say that it is compatible between different devices and works equally as well in both laptop and phone. To check further, I continued to use https://ui.dev/amiresponsive?url=https://lisettedonkersloot.com/ to verify my claims across all devices! I found that it was definitely the same between all devices and platforms making it suitable throughout!

TLDR;

• Clearly a portfolio for Lisette Donkersloot.

• However, the exact type of portfolio (director) is not immediately obvious due to text hierarchy.

• Visually showcases her work effectively using movement, imagery, and video in a cohesive and aesthetically pleasing way.

• Visually stunning with dynamic movement that draws user engagement.

• Use of colour (especially green contrasted with red) showcases artistic range and aesthetic sensitivity.

• Visual unity and contrast communicate Donkersloot’s versatility as a director.

• Repetition in design helps unify the variety of portfolio content and improve user navigation.

• Text hierarchy needs improvement:

  • “Director based in Amsterdam” should be more prominent, not equal to social media links.

• Project type labels lack contrast/visibility—important content should be more easily readable.

• Works well on both laptop and phone.

• Slight lag and slow performance, likely due to heavy animations and visuals.

• Some issues when switching tabs or returning to the site, but not device-specific.

BELANGER

See a better version of the screenshot here!

I highly recommend checking out the website though as screengrab isn't able to capture every crucial thing. I mainly referred to the website when writing this analysis.

Purpose

The website doesn't immediately make it clear what they're trying to sell due to the visual hierarchy but it eventually becomes obvious that their main products are faucets. Belanger makes faucets look like timeless, eye-catching, elegant staples within a home's kitchen, adding another layer to the space and hence effectively selling their vision and version of faucets—appealing to those who enjoy a more sleek and minimalistic aesthetic with their designs.

Design

Let's start with the positives! Belanger successfully conveys their website vision within its design—lines, curves and motion. These elements are constant throughout the website's entirely from the moment you open the website to even the benefit illustrations, their commitment and execution of these key design choices serve the website fantastically as it's truly a visual experience. The website design also plays with typography having both a more classic style and modern style of font within the site, amplifying their goal of combining modernity with timelessness. The use of blank space in the design makes the user truly feel the emphasis of certain parts of the site—for example, their mission page. Additionally, the website is excellent at contrast as everything is easy to read yet with so many different design elements at play, it makes the site feel more interesting despite the simplistic colour scheme.

Now, the negatives. Like most of the websites listed, I believe the hierarchy could use some work. As an example, the first page highlights the website's design elements more than their actual product—which I don't believe is entirely ideal when you're actively trying to sell something (in fact, the faucets part of the title is completely gone on mobile). Though, other than that small qualm in terms of hierarchy, the rest of the website is well designed in terms of that area. Another pain point however is the use of too many movement animatics within the website. Don't get me wrong, it's visually stunning buuuut when it comes to actually using the website, some animations used considerably slow the website down, lagging mid-scroll which is not ideal when you're trying to have a waterlike, flowy user experience.

Performance

Based on my observations, the website functions well in both mobile and laptop versions, with slight differences in design (as shown below). However, as mentioned above, due to the animatics and sheer amount of movement that's incorporated within the website, it tends to be laggy in certain sections thus not making it fully ideal in terms of performance. Unfortunately, the website was not compatibility with the 'uidev am i responsive' website thus I will not be able to give you a full run down on device compatibility.

TLDR;

• Website doesn't make the product (faucets) immediately clear due to weak visual hierarchy.

• Eventually reveals its focus on elegant, timeless faucet designs for sleek, minimalist interiors.

• Successfully sells a lifestyle vision rather than just a product.

• Strong visual identity using consistent elements: lines, curves, and motion.

• Typography blends classic and modern fonts, reinforcing brand values of timelessness and modernity.

• Effective use of blank space to highlight key content (e.g. mission page).

• Excellent readability and contrast despite a minimal colour scheme.

• Aesthetic and immersive visual experience.

• Visual hierarchy needs improvement—product focus (faucets) is lost, especially on mobile.

• Excessive animations slow down the user experience and interrupt the intended smooth "water-like" navigation flow.

• Works across both mobile and laptop, with minor design variations.

• Lag and mid-scroll delays due to animation-heavy design.

• Compatibility issues with some responsive testing tools (e.g. ‘uidev am i responsive’).

REDOT

I could not screengrab the whole website so I had to individually screenshot each page. The homepage is only the first image but I felt as it was too little so I decided to include the other pages.

Purpose

Unlike most of the other websites here, I really had trouble finding exactly what this website was about, having to go to another page to look and only realising (hours later i fear) that it said 'Creative Studio, Based In Paris' at the bottom left of the laptop page... However, I do believe as a creative studio advertising their work, they do a pretty good job at displaying the sheer range of projects they've done within the homepage, adding to the company's versatility and range which is exactly what potential customers are looking for when booking a creative studio.

Design

Let's start with the positives! It's very compact! Almost everything you need is in one page yet it doesn't feel cluttered due to the laptop layout (which actually largely varies between devices, I'll get on that later!) It does a good job at showcasing the studio's work in a clear way due to the contrasting text and background colours. I also firmly believe they've done a very good job with balance within the desktop and laptop design, with most of the content being centralised in the middle of the homepage, leaving a lot of blank space in the upper and lower areas, thus drawing your attention to the studio's work—which they clearly wanted to amplify and emphasise. When selecting a project, the design also does a great job at proportion, with the selected project being way larger and prominent compared to the unselected projects which are arranged very cramped together. Speaking of this topic, this also shows colour contrast between the 'important' selection and the less important projects that haven't been selected just yet. Within the same carousel, there is also symmetry with the selected project being the middle point for the rest at the sides to follow accordingly. This creates more visual interest and makes what could be seen as messy seem organised and visually satisfying.

Now, the negatives. Its the hierarchy.... again. I am 100000% certain that for most of these websites, the weaker hierarchy arrangement is a stylistic choice meant to break certain design principles. Alas though, I feel like in this case, more hierarchy difference between the text is really needed! Especially since it took me embarrassingly long to realise Redot's creative studio title was listed on the homepage (on the same hierarchical level as the links)! Additionally, I believe the scale of the texts are way to small in proportion with the images, specifically on the 'About' page where the image is the clear focus rather than the studio's offerings or story which is frankly, not what an 'About' page is about. 

I believe Redot does recognise these weaknesses though as their layout is significantly different on mobile and tablet versions where they immediately state their purpose and highlight their project listings equally. Now, I don't believe that approach is perfect either as in the case of the mobile and tablet versions, the design loses some of its key positive features such as the contrast, proportion, blank space and interesting symmetry for something more common. Thus, I believe what's needed for Redot is ideally a combination of these two layouts and designs to come up with something that embraces the best of both worlds.

Performance

Redot works well on every device without lag though as mentioned above, the layout differences between tablet and mobile versions compared to laptop and desktop versions are quite stark. There is quite a bit of a longer loading time but nothing incredible noticeable or slow. As shown by our trusty helper, https://ui.dev/amiresponsive?url=https://redot.fr/, this website is definitely compatible between all types of devices with no issue!

TLDR;

• The website’s purpose (a creative studio based in Paris) is not immediately clear—buried in small text at the bottom left.

• Users must dig to understand the site, which undermines clarity.

• Once understood, homepage effectively showcases a wide range of creative projects—demonstrates versatility.

• Compact one-page design that avoids clutter (especially on desktop/laptop).

• Strong visual balance with centralized content and intentional blank space to highlight work.

• Project carousel uses contrast, proportion, and symmetry effectively:

  • Selected project is larger, more central, and visually distinct.

  • Unselected projects are smaller and more compressed, reinforcing focus.

• Good colour contrast enhances readability and hierarchy between selected vs unselected items.

• Poor visual hierarchy:

  • “Creative Studio, Based in Paris” is easy to miss—blends with nav links.

  • Text is often too small compared to image size, especially on the 'About' page.

• Layout changes drastically between devices:

  • Mobile/tablet versions clarify purpose better, but lose visual strengths (e.g. symmetry, contrast, blank space).

• Ideal solution: combine the strengths of both desktop and mobile designs for a more cohesive experience.

• Performs well across all devices with no lag.

• Slightly longer load times, but not disruptive.

• Large differences in layout between desktop and mobile/tablet views.