INTERACTIVE DESIGN | Exercise 1: Website Analysis
__

25 September 2025 - 02 October 2025

Aishath Eshal Shihab (0381863)
Interactive Design | Bachelor of Design (Honours) in Creative Media | Taylor's University

Lectures

Week 2
Usability: Designing Products for User Satisfaction

Usability is the second level of the UX design that refers to how effectively, efficiently, and particularly can utilize a product or design in certain situations. An interface should allow users to find their way about easily on their first encounter.

Principles:

Consistency
Ensures your website looks coherent and all its elements - headers, footers, sidebars, and navigation bars - work together. It is intuitive. Similar looking things should produce a similar output. Eg; AirBNB Mobile App, ZUS Coffee.
Simplicity
Minimize the number of steps required in a process, use symbols/terminology that make the interface obvious, make it difficult to make mistakes.
Visibility
The more visible an elements is the more likely users will know about it. If it is out of sight it's difficult to know about and use.
Feedback
Give users a signal that they succeeded or failed at performing a task. Eg; when the selected icon changes colour.
Error Prevention
Alert users when they make an error so that's its easy for them to do the task without mistakes.

Common Usability Pitfalls:

Complex Interfaces
Confusing Navigation
Poor Feedback
Inadequate Error Handling

Instructions

Write your report in e-portfolio

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 summarizing your findings and recommendations.

What To Have in The Analysis:

Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, load times, responsiveness, and compatibility with different devices and browsers.

Deliverables:

Write a brief report summarizing each Web Analysis in not less than 200 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (headings/subheadings)

Submit your e-portfolio link for submission.

Website Analysis

Website 1: Good Things Vending by Good Things Vending & Secco Studios

Figure 2.1 Good Things Vending

Purpose and Goals

To understand the purpose and goals of this website we must first understand the purpose and goals of the company behind it, Good Things Vending. GTV is a company based in Chicago, Illinois, USA, who's mission is to support up-and-coming small artists. To accomplish this they've used the convenience of vending machines to encourage more people to support smaller artists and purchase their work.
So, their website, in partnership with Secco Studios, has an interesting minimalist retro vibe while incorporating elements of a vending machine. It's purpose is to promote the works of the artists the collaborate and work with while also bringing attention to the locations of their unique idea - art vending machines. While they're goal is to have more people support and commission small artists.

Visual Design and Layout

Colour

Figure 1.2 GTV Website Colours

Shown above is a snippet of GTV's home page where you can see all the colours they used in throughout the website. As you can see the colours all very bold, bright, and highly saturated. I believe this fits their theme and style very well, and all the colours work together amazingly.

Typography

Figure 1.3 GTV Typography 1

Figure 1.4 GTV Typography 2

There are two main font styles used in the GTV website and I have included them above. The first is a semi-bold serif font quite resembling the fonts used in computers during the '80s and '90s. This, I believe is a homage to their retro, vending machine theme.
The second font style is a more simple, bold one that is really only being used for headings, subheadings, and bold statements on the website. This style is great because it's simple, eye-catching, and easy to read which makes for quick navigation and less confusion. While in Figure 1.4 the brand name has a mix of uppercase and lowercase, however this is not the case for other texts on the website, as such it may be an artistic choice to convey a more playful and less serious tone in their logo.

Imagery

Figure 1.5 GTV Imagery

The imagery used on this website are shown in the above Figure 1.5 and in the before included Figure 1.2 GTV Website Colours. The drawings included in their website show construction, repair shops, cardboard boxes, and work lines. This is likely a representation of the small artists who sell their work through Good Things Vending because they have just started out in their career and there's still much to work on.
In the store tab, the products are arranged like a vending machine, and the backgrounds of the product images incorporate the colours of their website. It's all very easy on the eyes with not so much going on but just enough that it holds the interest of the user.

Functionality and Usability

Navigation

Navigating this site is no issue at all. There are not too many tabs and all of them are in very visible positions. The tabs are also organized and categorized splendidly, I believe there couldn't be any confusion or frustration with the navigation.

Interactive Elements

Figure 1.6 GTV Interactive Elements

All the interactive elements in this website look like the tabs in Figure 1.6. They have great visibility with the contrasting backgrounds and its ample size. If you check Figure 1.1 Good Things Vending, the only other interactive elements are the smiling face on the left, redirecting you to the homepage, and the shopping cart on the right, taking you to your cart. These two elements have a simple animation when the cursor is above them to imply that they are interactive.

Quality and Relevance
Firstly, the quality of the website is excellent. The imagery and typography are of high quality, there is no unintentional pixelation and the quality of the product images are great too. And all the elements, imagery, and typography are all relevant to the theme and style. There is nothing odd, out of place, or sticking out negatively.
Website Performance
Figure 1.7 GTV Performance Score (Desktop)
Figure 1.8 GTV Performance Score (Mobile)
On my laptop, the Good Things Vending website performs very well. There is minimal to no lagging, the images and imagery are of good quality. However, according to Page Speed Insights on desktop the performance is pretty average with a score of 57 and on mobile the performance is not any better with a lower score of 44, which is less than average.

Website 2: telfar.net by TELFAR

Figure 2.1 telfar.net Main Page

Purpose and Goals
telfar.net is a website by the company TELFAR, founded by Telfar Clemens, a Liberian-American fashion designer. It's main purpose is to promote and sell the clothing items and accessories designed by Telfar and I believe the goal of the website is to create an accessible place for everyone to be able to browse or purchase the products with ease.
Visual Design and Layout
- Colour
  
  Figure 2.2 Telfar Colour Scheme
  
  The telfar website has a very simple colour scheme, black and white, with the intention to keep the attention on their products. A clean and simple colour scheme, with no distractions such as this is perfect to make the products pop rather than a colour scheme that camouflage the products.
- Typography
  
  Figure 2.3 Neue Haas Grotesk by Linotype
  
  Telfar uses the font Neue Haas Grotesk by Linotype throughout there entire website. Shown above in Figure 2.3, this font is a very simple sans-serif font that goes with their theme of creating a website that focuses attention on the products being sold rather than the website itself.
- Imagery
  
  Figure 2.4 Telfar Animation 1
  
  Figure 2.5 Telfar Animation 2
  The imagery used in the website is only the product images, but there are animations included that showcase the product more thoroughly, showing every side of it. Above are two examples but there are many more.
Functionality and Usability
- Navigation
  
  Figure 2.6 Telfar Search Bar
  I find that the navigation of this website is pretty accessible. There is a search bar where you can search for specific products and there is also separate tabs for different categories. There is no complex scrolling animation to pair with the product animations.
- Interactive Elements
  Almost all the images and tabs on the website redirect you its specific product pages or category page so most of the website is made of interactive elements. They work well and have a small pop out animation when the cursor is placed above it.
Quality and Relevance
Quality wise, Telfar has taken care to use product images of high quality and used that same care for the animations, videos, and gifs included too. There is no design on the background or any artistic font so the page and the texts are of good quality as well.
Of course, since the website's purpose is to sell clothing and accessories, all the products are absolutely relevant to the website. There's no redirection to anything unrelated to TELFAR, the company.
Website Performance
Figure 2.7 Telfar Performance Score (Desktop)
Figure 2.8 Telfar Performance Score (Mobile)

When I first opened telfar.net on my laptop, it didn't properly load. Some elements were missing, all the images didn't load all the way, and the animations were lagging a little bit. The second time around has been better, so far it hasn't lagged or had too much of a delay in loading.
According to Page Speed Insights, telfar.net has a low average performance score at 58 and much worse performance on mobile with its score being at a 29. Although, the accessibility, best practices, and SEO are practically perfect.

Website 3: 12wave Interactive Studio by 12wave

Figure 3.1 12wave Main Page

Purpose and Goals
This website by 12wave is an interactive game so the purpose is to play the game. The goal is to promote 12wave and showcase the type of work that the company can produce for clients.
Visual Design and Layout
- Colour
  
  Figure 3.2 12wave Main Menu
  The colours used can be seen in both Figure 3.1 and 3.2. Mainly, the website uses the muted shades of yellow, orange, and khaki with some blue here and there. And then the main menu is dark since its space themed but it still upholds the muted colours.
- Typography
  There's only one font used in the website and it's this round, hand drawn font that you can see above in Figure 3.2. It matches the simple, playful, fun, video game vibe in the website. I could not find the exact font online so I believe that 12wave may have made the font themselves.
- Imagery
  I think the imagery used in the website can be fully explored with a clip of the game. The art style of all the elements is a simple but not boring one to imply that the game is an easy stress relieving game.. There's the main character, aliens, the stepping platforms, and so much more that add to the experience. The video clip below shows the sort of playful imagery 12wave has used on this website.
  
  Figure 3.3 12wave Gameplay
Functionality and Usability
- Navigation
  There isn't a lot to navigate on the website but the main menu in Figure 3.2 can be found on the upper right corner indicated by three lines (can be seen in Figure 3.1 12wave Main Page). The navigation during the game is fairly easy, the character simply follows the cursor. I do not think anyone would have a hard time navigating this website.
- Interactive Elements
  Again, there aren't that many interactive elements other than the Start button and the tabs in the main menu. They work very well and there's a rocket that follows your cursor in the main menu to show where your cursor is.
  
  Figure 3.4 12wave Main Menu Cursor Rocket
Quality and Relevance
The quality of the website is pretty good. So far, it hasn't had that much lagging, and all the elements match together and are well thought through. Even though the art style is kind of simple, it is still very detailed, especially the animations of the background and small elements.
I believe there isn't anything irrelevant in the website. The main menu is different from the rest of the website but the rocket ship and the planet it's on is also shown in the main page so it is probably the same scene but at night time.
Website Performance
Figure 3.5 12wave Performance Score (Desktop)
Figure 3.6 12wave Performance Score (Mobile)

Currently, on my laptop, the 12wave website is working okay. There's a little bit of lagging when you play the game but otherwise it loads fine. According to Page Speed Insights, the website has a low average score of 54 and as expected of a website like this, the performance on mobile is not great, with a performance score of 35. I don't believe the website would work that well on a mobile device.

Website 4: Perico Energy Drinks by Silv Studio

Figure 4.1 Perico Home Page

Purpose and Goals
The purpose of Perico Energy Drinks is to showcase the Perico brand energy drinks. As of right now, they only have three flavours; limojito, expresso martini, and mimosa; but still, the main reason for the website is to promote the brands healthy energy drinks, made with natural ingredients with essential vitamins and amino acids that support the immune system, as an alternative to other energy drinks that are not nutritious and can even be bad for your health.
The goal of the website, and the company Perico, is to create a healthier alternative to regular energy drinks so people can live a healthier lifestyle without compromise.
Visual Design and Layout
- Colour
  
  Figure 4.2 Perico Colours
  The website has a white base and uses three main colours - green, brown, and yellow - respective of their current three flavours. Figure 4.2 displays an example of the the shades used throughout Perico Energy Drinks. However, the brand's main colour is green, the colour of the brand logo, so the colour distribution of all three colours does lean a little more towards green.
- Typography
  Figure 4.3 Perico Fonts
  Perico Energy Drinks uses two main fonts, Futura and Street Punks Paint. From these two font families, Futura is used more than Street Punks Paint as they have only used it for there sloga "Get a Pericazo".
  The use of a simple font could be to give users an easy reading experience as their website is motion heavy, with many things happening as you scroll down so a manageable sans-serif font like Futura creates a balance.
- Imagery
  
  Figure 4.4 Percio Imagery
  This website uses a lot of imagery relative to energy drinks like the wave which represents liquids and bubbles that are present in energy drinks. There is also the use of lemon slices, lime slices, mint leaves, and coffee beans as these are part of the three flavours Perico offers. Figure 4.4 is a screen recording of the motions included in the website when you scroll down their home page. The movements flow smoothly although there are a few kinks, even so, these motions work with the imagery seamlessly.
Functionality and Usability
- Navigation
  Navigating the website, I have experienced, is a little confusing at first but once you get the feel of it, it's not that bad. There is the bar on top with tabs that redirect you to their about us page, their products, how to contact them, the login page, and the user's cart. The logo in the middle also takes you back to the home page. However, because of all the motion when you're scrolling, it can distract you from other tabs and can be a bit difficult to find in a pinch.
- Interactive Elements
  There's many interactive elements used in Perico's website. Like the flavours section where you can scroll left or right using the arrow buttons and the nutrition section that explains what they used in the drinks and why they chose to use them. Honestly, the interactive elements are great on their own but since they have created a website with a lot of movement and motion, adding more interactive elements could overwhelm the user.
Quality and Relevance

Figure 4.5 Perico Flavours Section
The website has high quality but there are a few kinks. Like, in Figure 4.4 you can see that when you're scrolling some of the elements overlap the main bar on the top and hide it, and sometimes it the images and/or element get a bit blurry. The flavours section, as shown in Figure 4.5, also has a small issue. As you can see, when you scroll to the end and continue scrolling instead of a flowy transition or not allowing you to scroll further it jumps and has an odd effect.
Even so, the relevance of all the information, images, and elements are fitting. It is only about the energy drinks and there's no mention or hint at anything irrelevant.
Website Performance
Figure 4.6 Perico Performance Score (Desktop)
Figure 4.6 Perico Performance Score (Mobile)
As per my experience with the website on my laptop, the Perico Energy Drinks website performs very well. There is minimal lagging and loads pretty quickly. It has a lot of motion so I expected it to bug out or get stuck a few times but that has not happened.
According to Page Speed Insights, the website has an okay performance score where it performs better on desktop, performance score 87, and it performs okay on average on mobile as well with a 63 score for performance.

Website 5: Welcome to Berk by Powster

Figure 5.1 Welcome to Berk

Purpose and Goals
Welcome to Berk by Powster is a website made with the purpose to promote the new live action remake of the hit movie How to Train Your Dragon. The website shows you your options of watching the movie at home either online, or by buying the dvd.
The goal of this site is to gain more popularity and views for the movie by creating an immersive experience for users. It's goal is also to create a homage for the beautiful movie that has touched the hearts of so many people throughout the years. As you explore the island you come across many things such as; in the village you can find the sheet music and a listening experience for one of the greatest soundtracks in the movie and a get to know of the composer, the arena is a showcase for the main types of dragons included in the movie and weapons the vikings used, there is more about vikings, their history, and artwork displayed in the great hall and library, and there's much, much more included in this website.
Visual Design and Layout
- Colour
  There is no absolute colour scheme used in this website. The colours used in all the elements are movie accurate and because there are many settings included in the site it's hard to pinpoint one set of colours. However, the colours seem to be more muted, with more inclusions of grey and brown shades with the occasional hints of vibrant colours.
- Typography
  Figure 5.2 Paradigm Font Family
  Figure 5.3 Text Examples in WtB
  
  The Welcome to Berk website has minimal text included but where it is used, they had used the font family Paradigm, shown in Figure 5.2 above. Figure 5.3 is a snippet from the website as an example of Paradigm being used as the font. I believe they used this font because during the time of the vikings it was very common to carve writing into stone slabs and when they did this the letters would have sharper corners, and with Paradigm there is somewhat a similarity to this.
- Imagery
  
  Figure 5.4 Hiccup's Workshop
  WtB has very intricate, detailed imagery. They have tried to make it feel like the user is there, at Berk, themselves. Figure 5.4 is a screen recording of just of the places you can explore on the website, Hiccup's workshop. You can see how detailed it is, with many objects lying around, in an untidy way so it feels more real than a simulation.
Functionality and Usability
- Navigation
  Navigating the website is pretty easy, in Figures 5.1 and 5.4 you can see that the cursor clearly has instructions of how you can navigate, by dragging. Figure 5.3 also shows you the different tabs you can press instead of the map to take you where you want to go.
  Figure 5.5 WtB Menu
  
  Another way to navigate the website is the menu shown in Figure 5.5. It's very straight forward and you can scroll down to view more options.
- Interactive Elements
  
  Figure 5.6 The Village of Berk
  This website is very immersive, it wants you to feel like you are there in Berk so naturally there are many interactive elements. I'm sure you've already seen the ones in Figure 5.1 and 5.4 but in Figure 5.6 you can see exactly the sort of easter eggs included in these interactive elements that make people want to watch the movie and love the website.
Quality and Relevance
The quality of the website is amazing. They have given great attention to every aspect of the website and made an interactive, immersive experience for their users who are either thinking of watching How to Train Your Dragon or have already watched and loved it. It is a great 3d experience.
All the aspects of Welcome to Berk are completely relevant as the developers and designers have put in much effort to make it accurate and detailed. There is no additional promotion of any other movie, or any inclusion of anything irrelevant to it.
Website Performance
With a website as vast and detailed as this, it is going to have performance issues. In the videos I have included you may see that there's a lot of lagging here and there. Although the elements do load in time. I do not believe this website can be run on mobile to its full potential and running the website can lead to your device overheating.
I tried to use Page Speed Insights to get a performance score for Welcome to Berk but the analysis failed every time I tried. Which is telling of the performance of this website anyways.

Feedback

Reflections

While analyzing these 5 websites, I spent a lot of time nitpicking and inspecting parts of the website that, as a user, I normally wouldn't really look into. I noticed how important it is for the website to have a purpose and a goal and how having irrelevant information in a website can deter the experience for users.

Through this exercise I have also gained the knowledge that there are many different types of websites; I tried to included all different categories of websites in my work so I can see how different websites have different needs. For example: telfar.com has a simple layout and basic font because it's purpose is to showcase the clothing and accessories, not to make an interesting website, but if we see Welcome to Berk, it is a whole artistic experience with intricate details. These websites are completely different from each other but it is because their purposes and goals are different as well.

Aishath Eshal Shihab (0381863)

Search This Blog