2025.04.23 - 2025.04.30
Qistina Nuralya Maria Binti Azly / 0354180
Interactive Design / Bachelors of Design (Honours) in Creative Media / Taylor's University
EXERCISE 1: WEB ANALYSIS
Table of contents
1. MODULE INFORMATION BOOKLET (MIB)
1. MODULE INFORMATION BOOKLET (MIB)
This is the Module Information Booklet for this module:
2. WEB ANALYSIS
Task: 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 websites, and consider how they impact the user experience.
Write a brief report summarising your findings and recommendations in not less than 200 words for each website analysis.
~~~
REPORT
This report will briefly analyse the design, layout, content, and functionality, pointing out the strengths and weaknesses and providing recommendations for improvement to enhance the user experience for these websites:
- KidSuper.World
- Braille Institute
- Abetka
- PanelkiNostalgia
- SoundEthics
Website Link: https://kidsuper.world/
From: https://www.csswinner.com/details/kidsuper-world/17759
Introduction
KidSuperWorld is a collaboration project between KidSuperStudios and Basement.studio. KidSuperStudios is a fashion company that is well-known for their athleisure casual clothing and has recently partnered with Puma in creating a collection of shoes. Basement.studio is a design company that has specialists across various fields to help create their well-known websites. In 2022, they partnered up with MrBeast to create his online merchandise shop (check out their process).
This website is meant to be a unique 3D interactive online shop designed by Basement.studio for KidSuperStudios' products. It is still in progress at the moment but it can still be critiqued of nonetheless.
Visual Design and Layout
Firstly, before the actual fully revealed homepage, the background was a blank canvas with slightly visible sketches. Once users start moving the cursor though, it will slowly reveal the background to become like that of Fig 2.1.2. This creates intrigue in customers because they would be wondering on what is behind the plain canvas.
The website has a painterly theme, using a painting for the homepage and then using 3D for the actual shopping experience.
Once customers have clicked on the garage door of the building in the homepage, they would be led to this room which resembles an art studio. This is where products are placed and where customers would navigate around to find object to interact with by simply moving their mouse around.
Once customers have found an item to interact with, a menu with appear. If they've interacted with a product, the menu like in Fig 2.1.4 should appear along with a 3D model of the product that customers can look through to get a good idea of how the product looks like. However, some elements are missing; reviews and unfiltered photos of the products.
For the other interactable objects, refer to the Content Quality subheading.
Lastly, the placement of the products as of now seem too random. The puffer jacket, purse and shoes are all in the same place that if a random pattern like this were to continue in future placements, it can easily confuse a customer.
Functionality and Usability
In terms of functionality, detailed descriptions of the products can be easily found within a click. It is only a matter of finding the products to click on that could potentially pose a problem. However, with added interactive elements like hover effects on the interactable objects, it would help users to know which to click and not click.
Content Quality
In total, there are 5 total interactable objects that users can find; 3 of which being the clothing.
One of the two interactable objects left is the record player where users are free to select a record to play in the background as they continue to browse the shop. The music ranges from jazz to punk. This creates a familiar feeling for users as the record player tries to emulate face-to-face shopping by including music; however this time, users are in control of what music plays.
Last of the two is the interactable poster (top right of Fig 2.1.7) which once clicked, will trigger a short cutscene of clothes being put
onto the mannequin. Said clothes are of the poster but printed onto
it.
As for the overall quality, the grainy style of the website does hinder the content slightly since users would want to know what the products would actually appear like in real-life.
Performance
Trying to launch the website can take quite a bit of time because of the 3D and interactive elements. Usually it would take around 10-20 seconds for it to stay at the 99% loading percentage; most likely due to the fact that the website revolves around a 3D experience leading to longer time to render in all the 3D elements. Long loading times like these could possibly withdraw a user's attention and result in them leaving the website all-together.
Within the actual shop, the cursor would also lag and/or have delayed input from the mouse. So it may become difficult to navigate through the mouse/cursor-reliant website if the lag/delay persists.
Recommendations
- Try to optimise the website's performance and reduce lag.
- Have separate un-grained photos or models of products to give users a clear idea of what they're buying.
- Include user reviews in the product description so that users can be more convinced to buy.
- Organisation of the products via categories or sections in the studio (shoes, coats etc.)
Conclusion
Overall, the website as it is so far is a great concept. Having an online shopping experience be like a 3D first-person game is interesting and engaging. However, there are quite a number of glaring issues especially with how the products are displayed. These can be vastly improved in the future by giving more clear information about their products so as to keep the level of functional quality the same as its visual design quality.
~~~
Website Link: https://www.brailleinstitute.org/
Introduction
Braille Institute of America, founded by J. Robert Atkinson, Mary and John Longyear in 1919, is a non-profit organisation focused on providing free programs and seminars to the visually-impaired community in Southern California. The programs include workshops in "adaptive cooking, everyday home skills, mobility training and staying connected through technology"; all efforts in helping the visually-impaired gain new skills to live an easier and comfortable life.
This website is designed to be the informational hub of the whole non-profit organisation whereby it introduces the user to the organisation as well as showcase the many different upcoming workshops, classes, seminars (online and in-person) and information on experts whom work with the organisation.
Visual Design and Layout
The website's overall design is simple and static, with not much animation (besides hover effects and menu openings). Yellow and blues consistently make the main accent colours of the website with green acting as an accent colour on specific parts of the website. The font used as well is that of a sans-serif font, Atkinson Hyperlegible, which is designed to increase text legibility for visually impaired users.
The overall layout avoids clutter and clear navigation menus ensure users can find information without unnecessary complexity.
On default, the website's overall font sizes are larger than what most modern websites use today. Shown in 2.2.1 (in Introduction), I had to zoom out to around 70% since the Hero of the website was not fully displayed on my screen. Some users may find the large text overwhelming or too tightly packed, which can affect the the user's experience with the site.
However, since the website is mainly aimed at visually-impaired users, the larger font size helps improve readability. Still, offering more customisation options for different levels of visual ability could make the site even better.
Buttons, pictures and some sections are also outlined to give clear visual distinction.
Functionality and Usability
Layers of hamburger menus are utilised in this website; the main hamburger menu opens on the left with quick links to sections like "Explore Library", "About Us" and etc. While exploring the site, I noticed that using Chrome’s back arrow took me off the site completely. This was slightly annoying, as I instinctively used it to go back and ended up leaving the site multiple times.
Users are also able to change the language of the website into 12 different languages (Fig 2.2.5) all of which are only the main languages spoken in America so the selection is wide yet also limited.
In the same header, the website gives 3 controls for changing text size and contrast :
All of which are useful for users to adjust to their visual needs. However, as said before, more customisations would greatly improve the site as visually impaired users don't often have the same level of visibility.
Content Quality
BIA’s content is clear, well-organized, straightforward and easy to understand. On the same level as it is factual, the site gives empathetic stories about people's experiences with vision loss as well as providing resources for visually-impaired users or their caregivers to learn more about vision loss and the possible steps to take forward; like seeking a healthcare professional or reading more about the organisation and how to join it.
Performance
As the website is simple and static with almost no animation, users are able to browse through it smoothly with little to no lag. The whole website took less than a second to fully load.
Recommendations
- Add more font size and color options so visually-impaired users can adjust the site to their needs.
- Give more "energy" to the website; add more subtle animations or transitions
- Let users backtrack to previous sections without accidentally leaving the whole site itself.
- Make a floating header for easier navigation.
Conclusion
Overall, this website serves its function as it is right now and is great in its accessibility. With its target audience being the visually impaired, everything in the website has (mostly) succeeded in catering to said audience. General audiences could also learn a lot while going through the site making it versatile in educating the visually-impaired and the clear-sighted. While minor improvements could be done to strengthen user experience, the site already stands out as a model of accessibility best practices in the nonprofit sector.
~~~
Website Link: https://abetkaua.com/en/
From: https://www.csswinner.com/details/abetka/17480
Introduction
The Abetka website places "Project Typeface Alphabet of the Ukrainian Identity" at the forefront to serve a cultural awareness objective as part of 3MIN Grant Program 2023, in collaboration with Projector Creative & Tech Foundation. The 3MIN organization is a private organization based in Ukraine that was founded to support sustainable development and effective social transformation through systematic expert activity. Projector Creative & Tech Foundation's mission is to help in the education of Ukrainian women.
"Project Typeface Alphabet of the Ukrainian Identity" combines both organisations' missions to provide educational information, primarily focusing on typeface/font history and the learning of the Ukrainian language.
Visual Design and Layout
The website keeps a minimal colour palette of black and white with blues and yellows to help accentuate certain elements or sections of the website. The choice of using blue and yellow is mainly to proudly represent the Ukrainian flag colours.
Bold typefaces (e.g. MariupolStrong) are utilised here to give a clear visual statement and to help differentiate each section of the main page. For the body text, a thinner and user-friendly typeface (FixelDisplay) was chosen so that longer text would be easily read by users.
The website mainly relies on the scrolling feature to creatively transition from one section to another without feeling too rigid. For example, from Fig 2.3.1, once the user scrolls down further, the card in the middle flips and it brought down to show the other side of it (Fig 2.3.3) that happens to match with the next section of information.
However, it can be argued that putting all the letter cards in the homepage can make users feel overwhelmed with the amount of possible information to browse through; hence why, a separate page for said letters (categorised either by typeface or in alphabetical order) could possibly fix that issue.
Functionality and Usability
In terms of functionality, users are able to access the detailed information on all the letters easily. One way to access them is through scrolling to the section itself; alternatively, users can interact with the two lines at the top to open the navigation menu, where it displays "Home", "Abetka" and "About", then click "Abetka" to go straight to the letter cards section.
Added interactive elements like hover effects on the letter cards that show a small preview of the typefaces help in engaging users to click onto them. There is one particular part of the website, however, that had interactive hover effects on some letter elements and is shown to be clickable by the cursor but it did not lead to anywhere; so, that may cause some confusion to users.
Content Quality
The content of the website is very informative on the history of each typeface as well as the individual letters. Each letter card leads to its own separate page with detailed descriptions on its history as well as giving information on its creator. Additionally, users can also preview their own text with the selected typeface which gives users a look into what the typeface would look like if they themselves were to use it.
Performance
As the website doesn't rely heavily on 3D graphics, users are able to browse through it smoothly with little to no lag. The whole website only took 1-2 seconds to fully load.
Recommendations
- Have a separate page for the letter cards to avoid overwhelming users.
- Minor tweaks with the interactive elements to avoid confusion.
Conclusion
Overall, Abetka as a website effectively achieves its goal in educating users on the history of the Ukrainian alphabet and typefaces. Though it is mainly directed to educating Ukrainian women, typographers and designers around the world can benefit from using this website as a reference because of how approachable yet educational the website is. There is still some minor improvements to be made, however, to both the layout and the interactive elements. Apart from that, the website works great.
~~~
Website Link: https://panelkinostalgia.com/
From: https://www.awwwards.com/sites/panelki
Introduction
Panelki Nostalgia is a short and niche website, a project by Terekhova Nika, dedicated to informing about the history of panel buildings, also known as "panelรกk" in Czech or Slovak, and arguing against the destruction of such architectural monuments. It serves as a short informational site proposing the rebuilding of the rich-in-history panel buildings rather than the demolition of them.
Visual Design and Layout
%20-%20Copy.png)
The main page of the site is a long scroll that has a picture of a building as its background. The user has to scroll down the building where multiple points have a "CLICK" prompt that subtly blends in with the building's environment. When clicking them, they bring the user to separate pages.
The idea of designing the website as if you're going through this building's history is unique and fun. As the background is quite complex, the site's font and colour theme are simple; with the font being a sans-serif font, Inter, and the colour theme being a simple clay orange and black.
There is something that disturbed the flow of the website and that is these tabs on the right that stick to the screen the whole scroll down. These are the awards that the site had been awarded which in itself is great but the placement of these disturb the layout of the whole site. It would be better if the site had a dedicated section or page showcasing said awards.
Functionality and Usability
In Fig 2.4.1, the site employs a hamburger menu in the top right that settles in the tittle of the 'i'. When clicked, it opens a full screen menu that has quick links to different parts of the sites, without the need of scrolling down the website.
The site also has a "back to top" button that appears when the user is halfway through scrolling down the website which is convenient
Content Quality
The content focuses on the historical and cultural significance of panelki housing. While the topic is unique and possibly engaging, the website has limited information and lacks the needed depth especially when it surrounds the history of panelki housing.
Additionally, most of the pages that branched from the main included some questionable elements that, though maybe slightly humorous and entertaining, can leave users thinking "Was this necessary?". As shown in Fig 2.4.6, a cat sits on the bottom right of the screen; and in Fig 2.4.7, you have an elevator that when clicking the "CLICK" prompt, opens and reveals a man inside.
The site also includes a unique interactable element where the user is able to demolish or rebuild a panelki building. When clicking on either, it shows separate pages of results of your choice; building is destroyed in one and rebuilt into something new in another.
Performance
The website tries to smoothly transition one page to another but the many moving elements led to the page it was directing to take longer to load in. It took around 5-10 seconds for it to load fully.
The site is mostly responsive to different devices but the issue in Fig 2.4.3 is still apparent on phone devices but even worse as the tabs take more space on the screen.
Recommendations
- Have a separate page for the site's awards
- Go more in-depth into the history; provide articles in reference
- Remove unnecessary graphical/interactable elements that can distract the user.
Conclusion
Overall, Panelki is a unique website that definitely gives off an "indie" site vibe to itself. The interesting "choice" section of the page adds an engaging and unique interaction for the user. However, despite its unique vibe, the design could do with some work especially with the placement of elements and the inclusion of possibly unnecessary graphics that slightly diminish the message that the site is trying to portray. Though it is a short website, taking account all the recommendations can easily help push the proposal of preserving panelki housing further forward.
~~~
Website Link: https://www.soundethics.org/
Introduction
Sound Ethics is a non-profit organisation, created by SomeFolk in Brisbane, dedicated to advocating for ethical practices in the integration of artificial intelligence (AI) within the music industry. The organisation focuses on protecting music artists' rights, ensuring transparency in any AI usage, and fostering collaborations between musicians, technologists, and policymakers.
Their core values include:
- Absolute Respect to creative copyright
- Innovation and Collaboration
- Standards in AI rights
- Education for AI advocacy
This website serves as the hub for the organisation to showcase their missions in advocation, having "Embrace AI. Champion Artists." as their motto.
Visual Design and Layout
Throughout the website, the colour themes are kept consistent; a monochromatic theme with vibrant lime green as its accent colour. When comparing Fig 2.5.1 and Fig 2.5.3, the fonts and themes are kept similarly even though both sections serve different purposes; Fig 2.5.1 for a Hero and first impression and Fig 2.5.3 as an updates/news section.
On the topic of fonts, the website uses a condensed bold typeface named FK Screamer as the Header and Headings/Subheadings of the entire website PP Editorial New as its main body font. Both of which are utilised nicely as both headings and body are good readability.
An additional subtle feature they have is that of parallax scrolling whereby certain elements actually scroll at a different speed than the user. It adds a bit of dynamic movement to the otherwise static-scrolling website.
Functionality and Usability
With simple menus and a short number of pages, the website is easily navigable with minimal confusion of where to go next. Hover effects are also used in the website to make the main interactable elements obvious to the user.
As for the news section of the site, because of the number of news posts in the site, it would feel slightly better if there were a 'search' function or more specific filters that surround the recency/dates of the posts. This would especially be key if the organisation plans on making more posts in the future.
When prompted to sign a petition to "support the music future of artists" near the bottom before the website's footer, after the user has submitted the required information, the website opens a separate "Thank You" page that acknowledge the user's contribution to the petition. This is a good example of direct website feedback.
Content Quality
As the website surrounds Sound Ethics' mission in advocating for ethical AI use in the music industry, it includes plenty of news surrounding the current climate surrounding their mission. Of note, the article talking about the ELVIS Act and its affect in AI in the music industry is well-written and concise, giving interesting insight on how the Act protects people, mainly musicians, from having their voices copied by or trained into AI without their consent.
However, despite the good quality of the articles, the frequency of the articles is notably low with the latest article being posted back in 10th February 2025 (Fig 2.5.9). More updates can show that the organisation is actually active into pushing their mission forward. For now, the lack of new articles makes it feel the opposite.
Performance
Minimal animations/transitions make the website run smoothly without much problem and no lag occurred throughout my whole exploration of the site. The whole website less than a second to fully load. Also is compatible with different devices.
Recommendations
- Include a 'search' function to make navigation easier
- Give more regular updates to the news/articles page
Conclusion
Overall, the Sound Ethics website effectively communicates the organisation's mission and initiatives through a well-designed, user-friendly platform. It's unique that they've decided to create a website to advocate for ethical AI in the music industry specifically. Users who go through the website can gain new insights on the ethics of AI in the music industry and also in other fields as well. Though there need to be a few tweaks and updates needed, the website does its job well.
3. LECTURE SUMMARY
Week 1
We went through the MIB and learnt about all the changes done to the module since the previous semester and all the required exercises and tasks to be done to pass the module. Afterwards we had a session where we searched for the 5 websites for our web analysis or to find a bad website for our upcoming Projects.
I showed Mr. Shamsul the bad website which I'd improve on which was CertifiedPolygraph.com; and I was given a greenlight for it เดฆ്เดฆി(แตแแต)
Week 2
Before the lecture, we learned/were reminded of the 5 steps in the design thinking process which were Empathize, Define, Ideate, Prototype and Testing. The lecture was about "Usability: Designing Products for User Satisfaction" that included learning about:
- Consistency
- Simplicity
- Visibility
- Feedback
- Error Prevention
After that, we had a group activity where we had to create a way-finding system for Taylor's for a visitor or student to use to find their way through the campus. My group's scenario was a future student coming to campus and wanting to enquire enrolling at the International Office.
Overall, my group did great but had some tweaks to do like a clearer indication of some of our buttons since Ms. Anis got slightly stuck on a page (Navigation).
4. REFLECTION
Doing this exercise proved to be a bit repetitive at first but I started to enjoy it once I realised I managed to analyse a diverse selection of websites. Which in turn helped me train my brain a bit to spot little error in the website designs whilst also seeing the good design decisions. So overall, it was a fun and good experience.
๐
Comments
Post a Comment