Interactive Design Exercise 1: Website Analysis

24/09/2025 - 4/12/2025
Ameera Rihana binti Remy Ansara
Bachelor of (hons) in creative media
Exercise 1

---

INSTRUCTIONS

---

Lectures

Week 2:

An inspired video was shown by our lecturer about "bad doors'. It introduces a concept about "Norman Doors", which defines:

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.

This leads to two points:

• Discoverability, the ability to discover what operations one can do.
• Feedback, a signal of what happened.'

A good design needs to consist sufficient discoverability and feedback, which is known as Human-Centered Design.

Usability: Designing Products for User Satisfaction

Principle of Usability:

- Consistency

- Simplicity

- Visibility

- Feedback

- Error Prevention

---

Exercise 1

Week 2
Website Analysis

Recap
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.

__

Website #1: AVISION

1) Purpose & Goals

a) Goals
This website summarizes a collective of talents introducing their artwork to gain recognition and expanding their platform in the industry. The interface of the website is quite straightforward with an approach of minimalistic and simplicity. Thus, it is communicated well for the users. 

2) Visual Design & Layout

a) Color palette

The website uses off white as their main background color with a splash of colors from the images in order to create visual contrast. Off white is also purposely used so that it does not become too striking and to give a sense of professionalism. 

Fig 1.1 layout

b) Typography

A font with thin strokes and sans-serif is chosen so that it does not look too heavy which gives proper readability. The website also keeps in mind their design logo "AVISION", to blend in with the typeface. The type of font remains constant throughout the website by sticking to a single typeface.

Fig 1.2 Logo & Typeface

c) Interactions

Simple animations are added to interactive buttons when hovering them to draw attention to important actions. This will help to guide the users towards where the designer wants them to click. With small transitions, they make interactions feel smoother and natural. The logo itself is also a button to send users back to the main page. In addition, the images have a flair of cool animations when it is interacted.

Fig 1.2 animation

3)Functions & Usability

a) Maps

The map seems to work smoothly but the address of the location does not match the pin on the map. The pin is located in Kuwait whereas the address points in New Zealand.

Fig 1.2.5 location error

b) Social medias

There are issues with the external links provided for their social medias. It all leads to their Instagram page that contains old updates and not consistent to all pages. This might leave users in confusion to find out whether their business or service is currently active or not.

Fig 1.2.55 social media error

c) Contact Details

For further clarification or interests, the website adds a contact page and a short form with fill up resumes to join their team. However, they do not provide social media contents for each talents if users wish to know about their current status or new follow-ups.

Fig 1.3 Join page

Fig 1.4 Contact & Social Media

d) Filters

The site provides a specific page for showcasing talents by filtering them according to their specializations if users wish to view specific contents. 

Fig 1.5 Filters

e) Package details

There are packages that users can buy for their services with given prices.

Fig 1.5.5 packages

f) Navigation bar

The navigation bar is placed nicely at the top right to provide immediate visibility and to ensure quick access to important links Thus, it helps users to navigate the website much easier. It is also present to all pages.

Fig 1.6 Navigation bar

4) Quality & Relevance

a) Quality

Overall, this is somewhat a high quality site. The tone and style is clear and professional. With its simplicity, it is easy to navigate by the users. The visuals are directed in a simple way with less elements to contribute negative spaces. It is clean and direct. 

b) Relevance

The website is heavily focused on providing a good quality of content but some of the information might be inaccurate due to inexistent links. The contents and the features are appropriate for their target audience. The layout is clear with readable texts and correct labels. The site is not consistent with any new updates and merely for demonstration purposes.

5) Performance

There are no issues with the performance and load times. The website responds normally with smooth transitions and is compatible with other devices too.

Fig 1.7 Phone compatibility

Website #2: Laguna Al-Sha'ab

1) Purpose & Goals

a) Goals

The website's goal is to promote their new concept using 'SALT' as the main ingredient by presenting a creative kitchen that uses fine dining to connect flavors and traditions from different cultures worldwide. The site demonstrates new exclusive menus as a part of their promotion for their new event to attract new attendees.

2) Visual Design & Layout

a) Color Palette

The color of cream and deep navy blue are used to bring out the richness that compliments with one another to suit the theme of the restaurant. Thus, it looks more luxurious and expensive.

b) Typography

A font with serifs and bold typeface is widely used in the titles to create emphasis. In contrast, the body text uses a regular typeface with sans-serif in justified formation. The logo's typeface matches the titles and remains its consistency throughout the website. Italic is also used to write captions or dialogues.

Fig 1.8 layout

c) Imagery

The aesthetic images are captured in high quality to compliment the background of the website. Some images are masked within frames that imitates the shape of their logo. In this website, the images are also generated as backgrounds which leave little room for extra white space. 

Fig 1.9 images within frames

Fig 2.0 images as backgrounds

3) Function & Usability

a) Contact details
The contact details are only visible within their page with phone number and emails. However, the website does not include any information on social medias.

Fig 2.2 emails from web developers

Fig 2.3 contact details

b) Reservations

Users are able to make a reservation to join the formal event by filling up their personal information and number of guests.

Fig 2.4 reservations

c) Interactive elements

The website uses many transitions to texts and images when scrolling down through each pages. It gives a flipping effect like browsing a brochure. They also add slide transitions to each cuisine with summarized description. With a closer look, the typeface changes its color when it overlaps with the image. There are certain images that fade in and out to avoid clutter. Although the transitions are unique, it might be slightly distracting for certain users and could lead to motion sickness.

Fig 2.1 overall transitions

Fig 2.1 overlapping transitions

d) Navigation bar
The navigation is placed at the top right for immediate visibility and present to all pages for a seamless experience.

Fig 2.2 navigation bar

4) Quality & Relevance

a) Quality

The tone and style is highly exclusive and formal. It is mostly set up for wealthy audiences. Overall, this is a high quality website. The visuals are clean with information stated correctly. Users can easily navigate through the site.

b) Relevance 

The website is not up to date due to demonstration purposes only. The contents and the features are appropriate for their target audience that looks for these information. It remains aligned with their goals and specific needs of its target audience. However, it seems that they are focused on targeting the locals. The interactive elements work correctly as intended. The external links provided to other sources are mostly accurate. The website is easy to navigate by scrolling continuously.

5) Performance

There are no issues with the performance and load times. However, the transitions do not apply in phone devices. The layout still fits and no weird alignments so it is still compatible.

Fig 2.2.5 phone layout

Website #3: Juice Agency

1) Purpose & Goals

a) Goals

The website's goal is to promote a digital creative agency 'Juice' that collaborate with other brands and empowering them to grow through the internet. They have shared digital creative works they had done to pull the interests of new clients. Other than that, they also provide services for users who wish to hire them for personal interests.

2) Visual Designs & Layout

a) Color palette

Due to their background, the website is designed in an exciting and fun layout to express their creativity. They mainly used green, black and beige as their color palette to make it look playful.

b) Typography

A huge bold type face with groovy tones is used in the main page for the name of their logo to bring impact, colored in beige for contrast. They use simple a typeface with sans-serif for body text. It remains consistent throughout the design. The logo itself suits the theme, designed in a cute apple form that represents well with the name of the agency.

Fig 2.3 layouts

c) Imagery

The website creates huge empty spaces with less context to fill in bigger videos and images. Users are able to interact with the images as a button to view their project. The images are edited with zoom in and slide animations. Due to different color palettes, the developers ensure the images and videos are placed correctly to build contrast. Although the images are huge in size, the site provides a lot of white space to avoid clutter.

Fig 2.4 zoom in and interactive images

Fig 2.5 sliding images

Fig 2.6 short video

3) Function & Usability

a) Time Zones

Based on their goal, they have other connections in other places by showing their current time zone from different countries.

Fig 2.7 time zone

b) Interactive elements

When users enter the website, an interesting loading screen would appear with a short animation of a duck overflowing within a glass. The basketball acts as a button for users to interact to make it spin around. This website highly prioritize its animation by adding hidden interactions with graphics that looks cartoonish to make the interaction more fun. The color of the website changes into different colors when it is scrolled to a different section.

Fig 2.7 hidden interactions

Fig 2.8 loading screen

Fig 2.8 color background transitions

c) Forms

A form is provided for users who are interested in sharing their project or getting in touch with them and short FAQs to give a head start. The contact details are consistent across all pages.

Fig 2.9 forms

Fig 3.0 FAQs

d) Decorative cursor

The cursor of the mouse is designed with an element when it hovers over them.

Fig 3.1 Decorative element

e) Work & Portfolio

The site includes journals and interesting compilations about their digital work and announcing one of their latest works. They add filters as well to mark out certain key points.

Fig 3.1 Latest works

Fig 3.2 work page with filters

f) Social Medias

They may not have an independent page for social medias but it is shared at the bottom and in the menu across all pages.

Fig 3.3 social media

g) Navigation Bar

The website is easy to navigate with a slide-out menu that is hidden in a hamburger menu. 

Fig 3.4 hamburger menu

4) Quality & Relevance

a) Quality

The tone and the style is not technical and mostly playful with groovy tones. Despite its playfulness, it preserves its professionalism by showcasing good quality interface and good content that are relevant to the website. Overall, it is easy fun and easy to navigate with clear readability.

b) Relevance

The website is currently new and the most of the information is up to date. The contents and the features are appropriate for their target audience. The interactions elements work correctly as intended. The external links provided to other sources are accurate including social medias. There are no errors, broken link and missing pages. The layout is clear with readable texts and correct labels. 

5) Performance

There are no issues with the performance and load times. The layout is compatible with the phone and the transitions work normally.

Fig 3.4.5 phone layout

Website #4: Spotless Agency

1) Purpose & Goals

a) Goals

The site offers virtual staging services to help real estate listings look more attractive and engaging. They wish to promote their virtual real estate staging services by showing how they transform properties into attractive, story-driven spaces that inspire buyers, help clients fall in love with homes, and ultimately maximize property sales.

2) Visual Designs & Layout

a) Color palette

They use neutral color palette mainly white as their background. This makes the site looks clean and spotless that reinforces the agency's professional image.

Fig 3.5 Layouts

b) Typography

The site uses simple typography with sans-serif to give a modern look and remains consistent across the site. Bold typeface is mainly used for titles or to point out important parts whereas regular typeface is used for long body text. The site reuses its logo typeface and use it for texts and titles.

 
Fig 3.5 Typeface and logo

c) Imagery

The images are captured in high quality to showcase interiors with perfect lighting and symmetry. They are edited in a way to make the images look appealing that blends well with the background and bringing emphasis. In addition, they add a short video that can be interacted to showcase their development to reassure clients that the images are not fake.

Fig 3.6 high quality images

Fig 3.7 Showcasing interior development

The main page is entirely covered with a high quality image without giving any negative spaces. However, it brings a grand entrance when users enter due to its photogenic and high quality image.

Fig 3.8 image as background

3) Function & Usability

a) Social Media & Contact Details

The contact form is quite simple and short with a few things to fill in such as email and name. The social media is placed directly at the bottom of the contact page for a fast access.

Fig 3.9 contact page

Fig 4.0 social media

b) Interactive elements

Animations and transitions are quite minimal to give a modest outlook. They are mostly added to interactive buttons when hovering them to draw attention to important actions. The website uses simple page transitions that are subtle yet effective, applied at just the right moments to enhance the browsing experience.

Fig 4.1 overall transition

c) Table of Contents & filters

The information in this site is quite abundant such as blog with articles and portfolio. Users might need some time to read it through. However, they add jump links or shortcuts by using table of contents and filters to sort it out.

Fig 4.2 table of contents

Fig 4.3 filters (multiple choice)

d) Pricing

To determine the client's requirement, the site prepares different pricings for different stages for those who are interested to buy their services. They provide different options such as for virtual staging, virtual restaging and 3d architectural visualization. However,  architectural has a unique constitution that needs a direct opinion from them.

Fig 4.4 pricing with provided services

e) Google Reviews & Maps

The developers include google reviews that is linked to Google Maps from previous clients and providing a location at the same time. This proves that the site is quite reliable, trustworthy and involves a lot of engagement. This shows the agency highly favors and prioritizes their client's feedbacks.

Fig 4.5 google reviews

4) Quality & Relevance

a) Quality

The tone and the style is not overly technical and mostly minimalist with a clean layout. The website has a really good quality in terms of content that not only aligns with its goal but also providing proper facts to its target audience. It exudes professionalism with its modern and simple design that compliments with the interior design.

b) Relevance

The website is currently new and the most of the information is up to date by following their social medias. The information in this site is quite abundant such as blog with articles and portfolio. Users might need some time to read it through. However, the layout is planned properly with proper usability to make it look cohesive. The contents and the features are appropriate for their target audience. 

The interactions elements work correctly as intended. The external links provided to other sources are accurate including social medias. There are no errors, broken link and missing pages. The layout is clear with readable texts and correct labels. 

5) Performance

There are no issues with the performance and load times. The website responds normally with smooth transitions and is compatible with phone devices too.

Fig 4.5.5 phone layout

Website #5: Bright biotech

1) Purpose & Goals

a) Goals

The website's goal is to showcase a biotech company focused on using chloroplast technology to produce sustainable proteins for medical innovation. They hope to bring a better and healthy life for future generations

2) Visual Designs & Layouts

a) Color palette

The color palette is predominantly green to reflect their biotech focus on plants and nature.

Fig 4.6 layouts

b) Typography

The site uses simple typography with sans-serif to give a modern look and remains consistent to all pages. However, a section of an article has different typefaces in order to differentiate between a caption and a text such as bold italic, italic and regular. This slightly puts me off as it looks a bit messy.

Fig 4.7 typeface

Fig 4.8 usage of different typefaces

c) Imagery

The images mostly indulge in different hues of green that creates harmony visually. They do not stand out but easy to notice. The quality of the image is decent which provides sufficient readability. It is not entirely edited to make it look aesthetically pleasing.

Fig 4.9 images

3) Functions & Usability

a) Interactive Elements

This site highly dependent on motion for narrative purposes with short context. They add interesting animations to explain about their product such as zooming in onto the plant where the chloroplast is located as it translates it can only be seen under microscopic vision. They also added a nice touch with the burst of chloroplasts in miniscule versions.

The concept also shows its benefits and purpose through transitions. The product itself might be complicated to understand through scientific terms. Therefore, the site uses visualization and movement to explain its motive.

Fig 5.0 transition outlook

b) Resource (missing page)

There is a missing content at the resource section with a notice of coming soon.

Fig 5.1 missing page

c) Contact details and social media

The contacts are combined with a form for further clarification. Users are able to fill it up if they wish to ask more questions or get to know them better. They are able to make different inquiries based on the options given.

Fig 5.2 contact and social info

d) Blogs & Articles

Users can get a glimpse about their scientific research through the articles for additional knowledge if they are interested to know more.

Fig 5.3 blogs and articles

e) Navigation bar

The website is easy to navigate with a slide-out menu that is hidden in a hamburger menu. The navigation also has interesting feedback when it is hovered.

Fig 5.4 navigation bar

4) Quality & Relevance

a) Quality

The site has a clean, professional and visionary style with a focus on innovation and sustainability. The visuals do not focus on aesthetics but more towards visibility and conveying messages.

It is somewhat of high quality in terms of the animation and transition that equally stands out. However, the speed of the transition might not be in favor for all users. It can be slightly inconsistent by scrolling as it takes time to load. 

b) Relevance

The interactions elements work correctly as intended. The external links provided to other sources are accurate including social medias. There are no errors or broken links but requires a missing page. The layout is clear with readable texts and correct labels. Although the information is short and concise, it is relevant to the website's intention.

The website does not carry out daily updates due to demonstration purposes only. The articles are slightly old and not up to date. The contents and the features are appropriate for their target audience. 

5) Performance
There are minor interruptions within the transitions. The performance and load time take a longer time to respond in the phone compared to desktop. However, the layout is compatible with phone devices.

Fig 5.4.5 phone layout