Interactive Design Exercise 1: Website Analysis

Interactive Design Exercise 1: Website Analysis
-

24.09.2025 - 1.10.2025 / Week 1 - Week 2

Dave Christian Moniaga / 0385630

Interactive Design / Bachelor of Design (Hons) in Creative Media

Exercise 1: Website Analysis

---

Table of Contents

1. Lecture
2. Instructions
3. Exercise
4. Feedback
5. Reflection

---

Lecture

Week 2: 

Usability 

In our 2nd week, we watched a video that introduces to a concept called a "Norman door"

A "Norman door" is essentially: 

1. a door where the design tells you to do the opposite of what you're actually supposed to do
2. a door that gives the wrong signal and needs a sign to correct it.

Don Norman, the person that the term is named after, explained that there are 2 principles in design, discoverability & feedback.  

Discoverability: the ability to discover what operations one can do.

Feedback: a signal of what happened.

The combination of this principles become the basis of User/Human-Centered Design.

Fig 1.1 Human-Centered Design

The video brings us to this week's lecture,
Usability: Designing Products for User Satisfaction

Usability in design is about how effectively, efficiently, and successfully can use a product/design. A design usability should accommodate user's need & objective without expert knowledge.

Similarly to the video, there are 5 key principles of Usability,

1. Consistency

2. Simplicity

3. Visibility

4. Feedback

5. Error Prevention

Consistency
Consistency ensures a website is coherent & works harmoniously with all of its different element; consistent navigation system, page layout and menu structure, fonts and typography and branding in web design.

Consistent design speaks the same language and treats similar things the same way.

Fig 1.2 Consistency in Adidas layout & font

Simplicity
User interface should be "simple" for users. It refers to minimizing the steps involved in a process; using symbols & terminologies that make the interface obvious. 

It should help users achieve their objective/goals faster and more efficiently.

Fig 1.3 Simplicity in Airbnb's icons & symbols

Visibility

The more visible an element, the more likely user will know about & how to use it. Idea works vice versa. User should know how the options & how to access them from looking at the interface.

Fig 1.4 Visibility in Strava's icon elements

Feedback

A feedback communicates the result of an interaction/action. It should give users a signal that explain if an action has been successful or failed be it audible, visual, or tactile.

Fig 1.5 Feedback in Whatsapp message indication

Error Prevention

It should alert users when they make an error, preventing them to make a mistake while doing their objective. The main reason for this principle is that humans are prone to making mistakes.

Fig 1.5 Error prevention in Airbnb's warning message

After this lecture, we are divided into groups where my team was chosen to analyze point No.5 which was Error Prevention. Here is our detailed analysis: 

Error prevention means designing systems that prevents users into making a mistake. A good design should prevent problems from occurring. There are two examples of error prevention:

1. Slips: unconscious error caused by inattention

Examples:

1. Undo button in Gmail

2. Indication for errors, spelling mistake

3. "captcha code is sensitive"

2. Mistakes: conscious error made by mismatch of user and design

(user lack information for that system)

Examples:

3. Warning 

4. Confirmation of action

5. Color indication 

Instructions

Week 1: Exercise - Web Analysis

For the first week's exercise, we were individually given the task of analyzing five website designs based from the links that were given during the brief. We would need to analyze it based on its design, layout, content, and functionality as mentioned.

Website 1: Buttermax by Active theory

Fig 1.1 Buttermax Main Page

Purpose and Goals

Buttermax is a digital production studio that specializes in the creative department.

Buttermax aims to work collaboratively with employers on the creative strategy, branding, and concepting before they go into 3D and illustration designs. Their use of words and funny metaphor shows that they are trying to connect & sound relatable to the user.

The studio seems confident in being able to deliver a whole group of creative specialties and it shows on their website too, as they list their awards and notable employers

Visual design and layout

The colors black and yellow have always been a good and strong combination to grab the user’s attention. The black background with bright colors give off a modern, edgy, and contemporary style, interacting with the yellow gives a sense of energy and action.

There are also more colors the cursor leaves a trail revealing an array of alternate background colors, adding a touch of creativity and playfulness.

Fig 1.2 Main colors

There are two types of text used in the website, headings that are in all uppercase letters and smaller text that are in standard format.

Both seems to use the same typeface called Afical with tighter kerning which makes it feel more compact & modern, but makes it harder to read by users. For the smaller letters, as the size and resolution is very low, it was difficult to find one that matches exactly.

Fig 1.3 Font: Afical Std Bold

Fig 1.4 Font: Afical Neue Semi Bold

From the visuals shown, there are a lot of 3D models of electronics in the front page. They seem to represent the clients that have worked with the studio, giving credibility while showcasing their abilities.

Fig 1.5 3D models representing clients

A drawback in my opinion is that the models as well as any image in the “WORKS” page are of low quality. Whether it's a design choice to juxtapose with the other sharp elements or to recreate a retro low resolution look, it can give a rather cheap and poor look.

Functionality and usability

Navigating the website feels good. The 3D models are interactive, having a cursor tracking animation when the users move around the page. The cursor itself also leaves a trail that reveals different colors of the background, giving more interactability to the user. Though, this feature isn't kept in the mobile version and they opt out for colors only when the user clicks the boxes.

Fig 1.6 Cursor trail with fluid motion

Fig 1.7 Cursor trail replaced in mobile

Navigation menu options seem very limited, but enough to showcase the studio’s work, introduction, and a way to contact them if you are an employer in need. There are more ways to reach out as they have placed buttons for their social media links on the bottom right.

Fig 1.8 Navigation menu in Desktop

Fig 1.9 Navigation menu in mobile

A small annoyance is the footer section where the visual covers too much of the text, making it highly confusing when users try to read.

Fig 1.10 "Reach Out" text blocked by visual

Quality and relevance

For the quality itself, the website perfectly captures the studio’s aesthetic and purpose. It’s a mix of the digital and the design world together. Though visually there are some negative aspects which may differ from user to user, for example the low quality / resolution of visuals which also affects the smaller text into looking more pixelated and harder to read.

The website itself was relevant to their purpose and the service that they are selling. Making this website successful at garnering the attention of employers and design enjoyers alike.

Fig 1.11 Low quality of 3D visuals

Website performance

There are times when the website suffers from slight lag or stuttering, especially when someone has multiple tabs or applications open on their computer. 

Surprisingly in mobile, this website doesn't suffer from too much lag even if scrolling does have a slight delay.

When checking the performance in PageSpeed, it received and error and I instead chose to check it through Pingdom Tools instead. 

Fig 1.12 Website performance by Pingdom Tools

Website 2: Gelato La Boca by Matchbox Studio

Fig 2.1 Gelato La Boca Main Page

Purpose and Goals

Gelato La Boca is an Argentinian style gelato shop located in Dallas, Texas.

Based on the website’s information, Gelato La Boca aims to bring the experience and taste of Buenos Aires gelato shops to Dallas. The gelato shop focuses on the idea of sharing and cultural exchange, as “La Boca” is based on an area in Buenos Aires that is known for its colorful neighborhood and immigrants.

The website also claims that their gelato is supposed to hit a sweet spot between normal ice cream and Italian style gelato, having a higher cream percentage.

Visual design and layout

As a website, it does a good job at catching the user’s attention on firsthand experience as its bright colors light up the page. They primarily use three colors for the main visual of the page; blue, yellow, and a shade of cream. The colors themselves, although not exactly the same, represent the Argentina flag where the gelato style is inspired from.

Fig 2.2 Main colors

Fig 2.3 Argentina Flag

I think the combination of colors gives a familial and community feeling, something that “La Boca” seemingly represents as well.

The font that this website uses is a sans serif uppercase font that gives a striking and bold feeling. I also managed to find the typeface itself to be called “The Bystander Collection” by Uniontype.

Fig 2.4 Typeface: The Bystander Collection

The visuals on the website themselves feel bright, friendly, and playful. A variety of delicious looking gelato are placed in the website along with real people to bring closeness with the user. 

Aside from the real life photos, the website also features a colorful abstract / modernist style illustration. Upon doing more research, these illustrations are closely related to the real abstract figurative street art that is found all over Argentina, specifically in Buenos Aires.

Fig 2.5 Abstract / modernist illustrations

Functionality and usability

Navigating the website feels fun and engaging, there is even a scroll controlled animation of a car moving from left to right. In mobile, the car animation is removed and the car sits still in a fixed position in the middle of the screen.

Fig 2.6 Scroll controlled car animation in desktop

Fig 2.7 Car fixed position in mobile

Their navigation menu section area also has physics simulation of shapes that fall down, each of them an option for any details that the user would like to view.

Fig 2.8 Physics simulation of shapes

When reaching the footer section, users can also click any options of details that they might have missed throughout navigating the website.

There is also a consistent use of parallax scrolling where layers of visuals move and appear as users scroll the page. I think the motion and changes may be a bit trippy or bothersome to some, but it fits with the flashy and bright feeling their brand offers

Quality and relevance

Based on my experience and analysis, the quality of the page is pretty good. The colors chosen as well as the implementation of interactive elements in the page definitely enhances the quality of this website too.

In terms of relevance. I feel like it serves its purpose for any user that is looking for a sweet treat. The design and visuals itself reflect on what they are serving and the colorful aesthetic is usually more desirable in regards to the product.

Website performance

The website works alright and I've tested a few times to check if there are any faults. There was one issue where a cursor trail element to get stuck into a background layer when scrolling. Although I wasn't able to recreate this issue. 

In mobile version, the website works fine until you try to rotate it the page. There were multiple stuttering issues and even bugs where elements overlap with each other. 

Fig 2.9 Elements overlapping each other in mobile

Fig 2.10 Website performance by Pingdom Tools

Website 3: Est by Laugh Mind

Fig 3.1 Est Main Page

Purpose and Goals

Est is a content production company that is based in Japan.

This website primarily produces Japanese tv shows that are currently airing as well as a few Youtube channels. From reading their “about” page, this company seems very laidback, friendly, and even challenging the status quo. They encourage young employees to pursue their passion in directing whatever they want whether it's fashion, idols, or even youtube editing.

Based on the shows that they are currently producing, it certainly fits their promise. Most shows are more closely related to comedy, game shows, and the likes.

Visual design and layout

The high saturation color that this website uses is a bright neon pink, which directly translates a lovely, loud, and fun tone to the user. This bright pink adds a feeling of excitement especially when paired with a contrasting pure white.

Fig 3.2 Main colors

The typography mixes a few Japanese fonts as well as a sans serif all caps font for English texts. From my observation, there are multiple uses of different Japanese fonts, ranging from Mincho, Gothic, Stylized / Display ones too. The English text uses a CG Gothic No4 font, a bold and big font that reads very well.

Fig 3.3 A mix of stylized Japanese and English texts

Fig 3.4 Font: CG Gothic No4

There are a lot of images and visuals shown. There are thumbnails of the tv shows they produce, cute 3D elements filling up the empty space, and even members of the production team in fun expressions.

Fig 3.5 Thumbnails and 3D visuals in desktop

Fig 3.6 Thumbnails and 3D visuals in mobile

The loading screen itself when clicking on the different menu, brings up a glitch effect cyan, yellow, and pink; similar to the CMYK used in printing. This effect is also present in the mobile version.

Fig 3.7 Glitch transition effect

Functionality and usability

Navigating the page feels nice and the indication on the bottom of the screen written "scroll" when arriving at the webpage helps to guide users on what they should do. Aside from that, there is a banner placed at the top which stays throughout the whole website, making it easier to jump to another page whenever you want. 

Fig 3.8 Scroll indication

Fig 3.9 Navigation menu in desktop

In mobile, the navigation menu has its own page that appears instantly as users click the top right indication symbol.

Fig 3.10 Navigation menu in mobile

In terms of interactive elements, this website has almost none except for the usual hyperlinks or buttons. This can be considered as one of the drawbacks that I see from the website, especially since their theme seems to revolve around entertainment and fun.

When scrolling through, users can notice that the texts on screen appear with a shaky jiggle effect. The visuals can feel packed and a bit overwhelming, as there is a lack of empty space. This might become too much for people especially someone with photosensitivity / epilepsy.

Quality and relevance

Based on the analysis, the website did a successful job at keeping true to the fun and entertaining theme that they clearly envisioned. There are a lot of interesting visuals that keep the attention of the user.

The visuals are all of high quality and the choice of colors creates a sharp detailed quality. Even with the multiple choices of typefaces, the website manages to keep it cohesive and related to the theme.

The drawbacks come from the lack of interactive elements as well as visuals and elements that can be overwhelming to users

Website performance

In terms of performance, the website works smoothly with only very rare cases of slight stuttering. The mobile version also works very well while still keeping many of the major visual elements that is present in the desktop version.

I can even say that going through the website in mobile, I experienced almost no stuttering with effects or animations. 

Fig 3.11 Website performance by Pingdom Tools

Website 4: Heimdall Power by Refokus

Fig 4.1 Heimdall Power Main Page

Purpose and Goals

Heimdall Power is an energy technology company from Norway focusing on power grids.

In my first experience, the website failed to concisely explain what their company is about. The start of their “About Us” page features details about their logo, metaphor, and the connection the company has to the Norse god.

Upon closer reading, the website showcases the kind of technology Heimdall Power makes. A machine called “Neuron” which attaches to power grid lines that measures its parameters, temperature, movement, etc.

Visual design and layout

The striking orange color displayed alongside the grey and dark banners creates a very futuristic and strong design, perfect for a company focusing on technology. The grey background of the page is not only related to their metal machines, but it is also reminiscent of the snowy backdrop in Norway.

Fig 4.2 Main colors

The main font used is from a sans serif font family called Europa Grotesk in medium thickness. This creates a sleek and modern look.

Fig 4.3 Font: Europa Grotesk SB Med

The images and visuals consist of videos, photos, and 3D elements. The large banner at the top of the page shows a live video showcasing their technology and their process, creating trust with users. The mobile version have too much negative space, making the layout feel unfinished and empty in addition to the font choice.

Fig 4.4 Main banner in mobile

One of the highlights of the page is a rendered 3D model of their machine. In the technology page, the model’s position is fixed in the middle while more information comes as users scroll down. The layout and visuals look very futuristic and even space like.

Fig 4.5 3D model and visuals

Fig 4.6 Analog & futuristic layout

Functionality and usability

The 3d models mentioned before are able to be rotated and moved around by the user. This gives a more hands on feeling and brings users closer to the product.

The navigation banner on the top helps to lead users to the page that they want to access. There is also a notification bar on the top of the navigation banner which I find a bit too striking as it resembles a warning symbol with its bright orange color.

Fig 4.7 Navigation banner

In my time of using the website, there have been a few times where site lags and elements stutter when scrolling, which definitely reduces user’s comfort.

Quality and relevance

Overall, I would say that the website serves its purpose at marketing their brand and product. Although the information and explanation can be a bit unfriendly for people who are not their intended audience.

There are also a few things to improve such as the website’s performance as well as the clarity of the company’s aims and goals. A few of their design choices also feel a bit empty and lacks cohesion.

Website performance

The desktop version had stuttering issues from time to time, especially when you click into a different page on the website. Although it was not a big deal, it still deems as a drawback.

This was the worst website when performed in mobile. All of the 3D elements failed to load and glitching issues that leave marks of text and other elements as you scroll. This is also without changing screen orientation. 

Fig 4.8 Glitch issue on mobile

Fig 4.9 3D models did not load

In Pingdom Tools, this website scored the lowest.

Fig 4.10 Website performance by Pingdom Tools

Website 5: Botanist by Studio Spoon Inc.

Fig 5.1 Botanist Main Page

Purpose and Goals

Botanist is a Japanese based body care and shampoo brand.

The website explains that Botanist highly focuses on using natural ingredients found in nature for their products. The brand aims to create a sustainable environment that connects humans and plants together through plant conservation.

The website also features a section called ‘BOTANIST Journal” which as the title suggests, is a compilation of people’s journals and articles that revolve around the brand.

Visual design and layout

I think users can instantly get the feeling of calmness and serenity when seeing and using the website. The website uses colors of deep dark blue and greens, in addition to a white background that helps to emphasize the feeling of cleanliness.

Fig 5.2 Main colors

For the font itself, I am unable to read in Japanese and trying to find an exact match was very difficult. Though I can deduce that the font is a Gothic style Japanese font, based on the fact that the strokes are uniform in size and it does not have many decorative elements. For the English texts, the closest I could find is Curwen Sans with a few minor differences.

Fig 5.3 Gothic style Japanese font

Fig 5.4 Font: Curwen Sans Regular

There are minimal visuals and imagery on the website aside from the full screen animated banner at the start. The banner features a high quality picture of the product alongside slow moving bubbles, which. Each of the products placed throughout the website are spaced in a way that focuses on reducing visual clutter and enhances the clean look they are going for.

Fig 5.5 Product display page 

Functionality and usability

The slow moving bubbles as well as the fading elements when users scroll through the website, subconsciously slows down the pace when users navigate through the page.

There is one comment about the mobile version, which is that the transition as you scroll away from the main page feels unintuitive and takes too long.

Fig 5.6 Main banner transition in mobile

On the bottom left there is a small section where a small menu lies for ease of access in navigating the website. Though in some sections, one of the drawbacks is the text overlapping with other interactive elements such as buttons or text descriptions.

In the mobile version, the navigation menu is a copy of their footer, but users can open in by pressing the top right menu symbol.

Fig 5.7 Navigation menu in desktop

Fig 5.8 Navigation menu in mobile

The news section also implements a slider that users can drag from left or right, scrolling through any important events or announcement. This scrolling element is also present in the mobile version.

Fig 5.9 News section with slider element

Quality and relevance

I think based on the analysis, the website manages to do a really good job in creating the aesthetic, especially the mood that this product is all about. The minimalist and clean look also helps to make this website feel more elegant and high end.

Though it lacks interesting interactive elements, the website does a good job at selling the product as natural and beneficial for the user.

Website performance

The website did not run into any performance issues and it worked smoothly. I think the lack of interactive elements and simplicity ended up helping the page's performance. The same praise can be said for the mobile version as well. 

My analysis was also correct as Pingdom Tools gave this website the best score out of all 5 that I chose.

Fig 5.10 Website performance by Pingdom Tools