Interactive Design - Exercise 1 (Web Analysis)
25/04/2024 - 02/05/2024 ( Week 1 - Week 2 )
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, including its load times, responsiveness, and compatibility with different devices and browsers.
Purpose & Goals
Chong Wee Han / 0368863
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercise 1 - Web Analysis
LECTURES
Week 1 - Lecture 01
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1_LR3FnphEcPH66w9nxaUtexUfHB5F2h-/preview" width="640" height="480" allow="autoplay"></iframe>
Exercise 1 (Web Analysis)
Requirements for exercise 1
Write a brief report summarizing in not less than 500 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 (heading/subheadings)
Choose TWO (2) 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.
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, including its load times, responsiveness, and compatibility with different devices and browsers.
Website 01 - Convex Seascape Survey
Purpose & Goals
The purpose of this website is to lead users to the discovery of how healthy oceans help combat climate change by using carbon capture in the ocean. The website provides an opportunity for users to gain an understanding of marine ecosystems and also particularly focus on the convex seascape research.
Goal 1: Increase citizens’ education and awareness of marine ecosystems. Enhance the knowledge of the importance of marine ecosystems in the global. Citizens may take action to start protecting our ocean and also obtain awareness of it.
Goal 2: Becoming a source of data collection on Convex Seascape Survey. Encourage citizens to collect the information in order to convey the suitable soft-sediment ecosystems.
Visual Design & Layout
 |
| Figure 1.1 |
The visual design of this website gives a very relaxing ocean vibe. The layout is simple but understandable with all the icons and sections that are provided in the website. Logo is showing clearly on the top left side.The website uses mostly blue background with white fonts fitting the topic of the ocean. Its typography is neat and clear for users to read, heading is prominent and leading is fine. The sense of motion imagery gives the energy and movement for users to be more interacted and more engaged in the visual design, the image also relatable on the information that is provided.
Functionality & Usability
Figure 1.2
 |
| Figure 1.3 |
 |
| Figure 1.4 |
The website is functional as it includes forms for citizens by submitting the data collection form and getting the effective way in exploration.The article and images also helps to educate citizens in the knowledge of marine ecosystems. Providing links to social media and contact boxes also improve effective function. The website usability provides some of the interactive elements. Interactive presentation when the background will fluctuate while users mouse arrow moves which is very interesting and attractive. Besides, adding a clickable menu or cool image sliding effects also increases interactive elements. Navigation is clear and guided by the website, there is a menu provided at the top right side for users wanting to click on the different menu sections, there will be a white bottom line displayed under the chosen sidebar section to remind the option to viewers. The website displaying by using the way of scroll down function instead of the traditional button function is a freshy method for users, but unfortunately I found out that this way of presenting is uncomfortable for users to continuously scroll for the upcoming information.
Quality & Relevance of the Website's Content
- Accuracy
This website has clearly presented the organisations and universities which have partnered in this research project and mentioned the navigations.
- Clarity
The clarity shows when the website delivers clear explanations and visual images that are in high resolution.
- Organization
The consistency in style can help develop the viewer's experience, the layout is simple and easy for users to use. I also like that it includes the background music which can enhance the users’ interests and experience while viewing the website. Besides, it will automatically turn off when sliding to another tab.
Performance
I tried the website by using my desktop and phone to verify that it works on multiple devices and different browsers. Yet, the loading time on the phone is slightly slower than the computer. Responsiveness in the website is smooth and fast for viewers to use, the layout between desktop and phone are also slightly different on the menu sections.
Recommendations
In order to improve users’ experience, adding a table of contents would be nice for users to search the answers of specific questions that they might be interested in. Adding a page of citation resources is recommended to enhance the accuracy of information.
Conclusion
In conclusion, this website is not only a source to raise awareness but also a platform for users to contribute to the topic of marine ecosystems. The well-designed of this website by delivering information with high resolution images also stimulates user’s interest on the importance of oceans in order to fight against climate change.
Website 02 - Boba x Ice cream
Purpose & Goals
The purpose of this website is to create an online platform that can introduce their brand of boba ice cream, letting consumers understand the brand, containing the story of brand development. The main purpose of this website also provides an opportunity for users to buy boba ice-cream online.
Goal 1: Build up brand awareness, by using playful and modern website, create a sense of professionalism. Increase the popularity and brand recognition in the market.
Goal 2: This kind of online platform can increase the amount of sales because users can purchase online
or in store.
Visual Design & Layout
Figure 2.1
The visual design of this website has colourful and playful vibes. The layout suits the concept and also easy to operate. Logo is showing clearly on the top left side and there is also a 'back' click for users to get back to the previous page ,which is a convenient design. The website uses a vibrant colour scheme to attract users to consume the products, using pink, purple, and yellow as background colours to symbolise the sweetness. I think the typography is clear but it is a too big for some of the heading parts, users will become fatigued by the big point size of words. Imagery also fits in the concept by adding colourful and delicious looking ice-cream.
Functionality & Usability
 |
| Figure 2.2 |
 |
| Figure 2.3 |
Figure 2.4
The website provides functional sessions such as the navigation menu is quite simple and straightforward. It’s user-friendly and the information that is given by the website helps consumers to understand and be knowledgeable about the products' flavour . Users can also directly click the session button to find out the question. It also provides additional social media links for consumers such as TikTok and Instagram which also increase the impression of the branding. The website also offers a complete platform for consumers to buy the ice-cream online by adding the products in their cart and checkout smoothly with clear steps, supporting consumers to efficiently purchase online. The product also gets displayed in a good condition, with updated pricing and description. The websites include an easy form for newsletter subscription to stay up with latest updates. The interacting elements in the website contains some of the hover effects such as buttons, links or, some images and elements. Attracting users with cute and freshie elements when they are viewing the website page. There are also different kinds of ice-cream flavour displaying images as product carousels, users then can browse quickly for it. The button to social media apps and shopping carts also easily and conventionally leads users to use it.
Quality & Relevance of the Website's Content
- Accuracy
Accuracy was lacking due to the absence of nutrition information. Product page and FAQ which mentioned does not contain any information of how it was made.
- Clarity
The clarity is high as it presents colourful images that suit the content.
- Organization
The organization needs some improvement on the navigation. The website does not have easy access to the product.
Performance
I also tried the website by using my desktop and phone to verify that it works on multiple devices and different browsers. Desktop loading time is the same as a phone and the responsiveness of sessions buttons and links are also smooth and fast. The layout between desktop and phone are also slightly different on the homepage of the different flavour ice-cream button.
Recommendations
The form is useful for the users to get the latest information. However, I think the website will be better if creating a form that can collect data by consumers on the flavour or feedback, allowing the company to investigate consumers preference. The fonts of the design can also be changeed. Some of them could be changed into lowercase and point size of the words can be decreased. Adding more sessions button on the menu bar of the homepage can be improved as well. Also, The nutritions should be provided to increase the information accuracy.
Conclusion
In conclusion, the website is nicely showing the product in displaying. The colour of the website stimulate user's appetite and interest on the product. Yet, there are still some improvement needed to be done like lack of nutrition infomation and ease of access to browse the product. A professional and useful website will definitely assist brand boosting and enhance brand favorability.
REFLECTION
This is my first exercise in this module and I realized doing a web design is a difficult and long process. Web design needs to be very detailed so that the users can have a good experience of it, such as navigation and interactive elements. Visual design plays an important role as it attracts user's attention to keep their interest on the brand and product. Also, information should be clearly delivered on the website for better brand accuracy. Quality and relevance of the website's content also affect a user's belief. Functionality and usability are the main helpers to help process a good website and good experience. The designer should stand from the user's side to design for a better user experience.
Comments
Post a Comment