21/04/2025 - 28/04/2025 (Week 1 - Week 2)
Interactive Design / Bachelors of Design (Honors) in Creative Media /
Taylor's University
Samantha Kristalyn / 0373905
Exercise 1: Web Analysis
JUMPLINKS
LECTURES
Week 1
During this week, we were briefed about the module's outlines and next
week's exercise.
Week 2
Usability Basics
When designing a website or app, you're not designing for yourself, but
for your users and customers. User satisfaction should always be the top
priority. Just like a poster needs a clear visual hierarchy to deliver its
message; a website or application must be structured clearly to be able to
communicate its main message effectively.
What is Usability?
Usability is how effectively, efficiently, and successfully users can
interact with a product or design in a specific situation.
Good usability includes
five key principles:
1. Consistency
Keep design elements like navigation, typography, and page layouts
uniform throughout the website to create a familiar and reliable user
experience.
-
Maintain uniformity across website; from navigation menus to footers,
typography, branding, and page layouts.
-
A consistent structure helps users feel familiar and comfortable.
2. Simplicity
Design should be clean and straightforward, minimizing confusion and
making it easy for users to find what they need without unnecessary
steps.
-
Keep designs seamless and simple to avoid overwhelming users.
-
Simplify not just the visuals, but also the process flows, like
navigation steps.
3. Visibility
Important features and actions should be clearly highlighted so users can
quickly spot and use them without effort.
-
Make important features obvious and easy to find.
-
Highlight key actions and functions so users don't have to guess.
4. Feedback
Design should always respond to users' actions. Whether it's a success
message, an error alert, or a loading animation, feedback reassures users
that their input has been received and understood.
-
Always provide clear feedback after a user interaction.
-
Whether it's a successful form submission or an error, users need
visible and understandable responses.
5. Error Prevention
The best way to handle mistakes is to prevent them in the first place.
Smart design helps users avoid errors by offering guidance, warnings, and
clear instructions before problems occur.
-
Helps users avoid mistakes by offering alerts and guidance.
-
For instance, show a message if a password entry is wrong, so users can
correct it easily.
INSTRUCTIONS
TASK
On our first week, after getting briefed about the module's outline, we
were assigned to analyze and evaluate five different websites from the
link given on Microsoft Teams. The goal was to assess each one in terms of
design, layout, content, functionality, and to understand how these
factors affect the overall user experience.
For each site, I had to take notes of their strengths and weaknesses
considering these factors:
-
Visual Design and Content Delivery: How appealing and consistent the
design elements are and how well they communicate the main purpose and
message of the website.
-
Layout and Navigation: Whether the site structure is intuitive and easy
to navigate, including menu placement and user flow.
-
Content Quality: Clarity, relevance, and engagement of the information
provided.
-
Functionality: How well the site performs technically; considering
loading speed, broken links, responsiveness across devices,
etc.
-
Accessibility: How inclusive and user-friendly the site is for people
with disabilities, including features like alt text, keyboard
navigation, and contrast ratio.
Before conducting my analysis, I took the time to do my own my own research
to gain a deeper understanding of UI/UX principles, specifically, what
defines good and bad design in terms of both aesthetics and accessibility.
This background knowledge was essential in helping me prepare for the
proposal. I spent some time reading articles, watching videos, and exploring
examples of effective UI/UX design. Below are a few key sources that I have
learned from:
This classic book offers a straightforward approach to web usability,
emphasizing intuitive navigation and user-friendly design.
The article above outlines ten fundamental principles for designing
user-friendly interfaces, such as consistency, error prevention, and
minimalist design. These heuristics are widely used in the field of UX
design.
This video provides a comprehensive overview of UI design principles,
making it a great starting point for beginners.
After further research, I started picking out the 5 websites that I wanted
to individually analyze. Below are the 5 websites that I have chosen to
review:
1. Studio Gruhl
Fig. 3.1.1, Studio Gruhl's opening splash screen
Purpose & Main MessageStudio Gruhl is a brand and digital design studio that aims to deliver a refined, minimalist experience. The site projects a high-end creative identity and emphasizes visual storytelling through clean aesthetics and straightforward messaging.
Visual Design & Layout
The website utilizes a minimalist approach with bold typography and a clean, structured layout. Visual clutter is avoided, and important content is highlighted effectively. A standout design feature is the scroll progress indicator at the bottom of the screen, which improves navigation by clearly showing users their position within the page.
Fig. 3.1.2, Studio Gruhl's visuals and imagery
Quality & Performance
Performance-wise, the site loads quickly on all platforms, and its responsive design ensures consistency across desktops, tablets, and mobile phones. However, one critical issue is the autoplay video on the homepage, which contains flashing lights that can pose a seizure risk for photosensitive users.
Fig. 3.1.3, Studio Gruhl's website auto-plays video
Strengths
Studio Gruhl's website delivers a strong visual identity and maintains a seamless experience across devices. The layout promotes focus by eliminating unnecessary elements, and the navigation is enhanced by a scroll tracker. These design choices collectively support user engagement and clarity.
Fig. 3.1.4, Studio Gruhl's cross-device view
Weaknesses
Despite its visual appeal, the site falls short in accessibility. Highly stylized fonts with mirrored elements and all-caps formatting reduce readability, particularly for users with dyslexia or visual impairments. The auto-playing video introduces another major accessibility issue. Additionally, while the design is sleek, it lacks emotional engagement or unique interactive storytelling that could help differentiate it further.
.png)
Fig. 3.1.5, Studio Gruhl's decorative font
2. Oreck Vacuum Repair
Fig. 3.2.1, Oreck Vacuum Repair's homepage
Purpose & Main MessageOreck Vacuum Repair presents itself as a trustworthy, localized repair service with over 25 years of experience. The site’s key selling points include free pickup and delivery, a flat fee pricing structure, and a direct, personal communication tone that builds user trust.
Fig. 3.2.2, Oreck Vacuum Repair's full page on mobile device
Visual Design & Layout
The design is extremely simple, consisting of one long scrolling page without any formal navigation system. While this simplicity may aim to reduce friction, the absence of a menu or clear sectioning makes the site feel cluttered and difficult to scan. Long blocks of text dominate the screen, and there is limited use of headings, icons, or visuals to guide the user.
Quality & Performance
On desktop devices, the site loads fairly quickly and functions as expected. However, performance on mobile is less optimized. The single-page layout becomes overwhelming on smaller screens, and the lack of buttons or breakpoints hurts usability.
Strengths
One of the site's strongest features is its clarity of message. It clearly communicates its niche—Oreck vacuum repair in Jackson, MS—and supports this with targeted location mentions to help with SEO. The personal touch in the writing, including the use of names and direct contact info, fosters a sense of credibility and connection.
Fig. 3.2.3, Oreck Vacuum Repair's trust building wording
Weaknesses
Despite its honest tone, the website lacks structural and visual polish. The absence of a navigation menu makes it hard for users to find key information quickly. There is no visual hierarchy, which means everything feels equally weighted and, therefore, harder to absorb. The mobile experience suffers most, with dense text and no obvious touch-friendly elements. Additionally, it misses important trust signals like testimonials, reviews, or photos of past work.
Fig. 3.3.1, Quipo App's homepage
The Quipo App is a web-based invoicing platform aimed at small businesses, with a strong focus on simplicity and clarity. From the moment a user lands on the homepage, the site clearly communicates what the app is, who it’s for, and what value it offers—streamlining invoicing processes. The minimalistic tone aligns well with its business-oriented audience, delivering an impression of efficiency and no-frills functionality.
Visual Design & Layout
Visually, the Quipo App’s website embraces a clean, straightforward design. It uses a limited number of navigation links (Home, Download, Support), ensuring the user’s attention is guided directly to the call-to-action—downloading the app. The color palette remains consistent across the site (blue, white, and green), which helps reinforce brand identity. However, the overall design, while user-friendly, could benefit from more visual depth. The use of bright colors, numerous icons, and interactive elements can become overwhelming on certain pages, especially for first-time visitors.
Quality & Performance
The site performs well on desktops and maintains decent load speeds. However, performance drops slightly on mobile, likely due to the visual density of some elements. Although the layout adjusts across different screen sizes, some features—such as buttons or paragraphs—lack touch optimization, reducing accessibility on smaller devices. Also, while the site supports the French language well, it currently lacks broad multilingual support, limiting its reach to a wider, global audience.
Strengths
The Quipo App site does an excellent job of immediately clarifying its product offering. Its clear visual hierarchy, prominent “Download Now” buttons, and minimal distractions help users focus on the key goal: using the app. The brand maintains a professional tone and successfully avoids clutter through its intentionally narrow navigation structure. Mobile responsiveness is largely effective, and the branding is both recognizable and consistent throughout.
Weaknesses
Despite its strengths, the site has several critical areas that need improvement. Language accessibility is one major concern. The platform currently operates mostly in French, making it inaccessible to many non-French-speaking users. Relying on automated translation tools isn’t a sufficient workaround and can result in awkward or inaccurate translations. In addition, the abundance of interactive visuals, while engaging, may create cognitive overload for some users. Navigation could also benefit from more descriptive labels or improved organization to enhance user flow. These adjustments would help make the app more inclusive, functional, and user-friendly.
4. Seasoned by Koto Studio
Fig. 3.4.1, Seasoned's opening splash screen
Seasoned is a visually rich website by Koto Studio that seeks to fuse food, culture, and creative expression. It positions itself as a bold, experiential brand rooted in vibrancy, energy, and storytelling. The site’s goal is to immerse the user in a playful yet high-end browsing experience that reflects the brand’s core personality. Through stylized copy and a distinct tone, the site intends to resonate emotionally with visitors while showcasing Koto’s creative capabilities.
Visual Design & Layout
The design of the Seasoned website is colorful, dynamic, and unmistakably unique. It uses bold color combinations, oversized text, and whimsical elements to portray an artistic, avant-garde style. Stylized labels such as “Yes, chef!” and “Order more” reinforce the brand’s playful tone. However, while this unconventional interface works well in conveying personality, it can also create confusion for new users. Call-to-action buttons lack consistent design cues, such as hover effects or visual contrast, making them hard to recognize as clickable. Additionally, there is no persistent navigation bar or global menu, so users must scroll linearly without quick access to major sections like “About” or “Work.”
Fig. 3.4.1, Seasoned's visuals and imagery
Quality & Performance
In terms of technical performance, the site loads quickly on desktops, but users may encounter slight delays when accessing the site via Microsoft Edge. The site’s heavier visuals and animations sometimes cause content to freeze momentarily, particularly during the title screen. On mobile, the site’s dynamic transitions and large visual elements do not always scale properly. Layout overlap and hover-dependent features can impair usability on touchscreen devices, where such interactions are less intuitive.
Strengths
The most impressive aspect of the Seasoned site is its vibrant and emotionally engaging design. Every page tells a story, and the playful use of color and animation creates a sense of discovery. The creative copy and visual variety make the experience memorable, while the brand’s personality shines through without being diluted by convention. It is clear that Koto Studio values aesthetic storytelling as much as functional communication, and that balance is mostly well executed.
Weaknesses
That said, the same creative risks that make the website memorable also hinder its usability. The absence of navigation anchors or menus leads to a frustratingly linear browsing experience, especially for users trying to find specific content. Calls to action are often obscured or too stylized to be immediately recognizable, reducing the site’s conversion effectiveness. The mobile version, though visually responsive, lacks optimization for gesture-based navigation and thumb-friendly design. To improve, the site should implement clearer CTAs, add a floating navigation bar, and rethink its animation strategy for mobile users.
5. Femme Fatale Paris
Fig. 3.5.1, Femme Fatale's homepage
Purpose & Main Message
Femme Fatale Paris is a bold creative studio based in France, with a focus on merging art, fashion, and technology. Its website reflects a strong visual identity and is clearly designed to leave an impression. Through experimental interfaces, immersive visuals, and artistic storytelling, the studio conveys a deep passion for pushing digital boundaries. Its message is clear: Femme Fatale is not just about service delivery—it’s about visual innovation and cultural expression.
Visual Design & Layout
Aesthetically, the website is striking. The homepage features a monochrome palette and strong typographic choices that amplify the brand’s edgy tone. Layouts are fluid, immersive, and media-rich, with full-width images and layered compositions that feel cinematic. The website breaks traditional design norms by placing headings across multiple lines and using oversized fonts with dramatic letterforms. While this approach enhances visual appeal, it comes at the cost of readability. Decorative fonts, all-caps headings, and dense formatting reduce the ease of scanning and can quickly fatigue the eye, especially on smaller screens.
Fig. 3.5.2, Femme Fatale's visuals and imagery
Quality & Performance
The site performs reasonably well on desktops, with high-resolution media and smooth transitions. However, smaller font sizes in some areas—especially the navigation bar—negatively affect readability. While the site is available in both French and English, many of its image elements lack proper alternative text, which presents a significant accessibility barrier for users relying on screen readers. On mobile, while the visual quality remains high, certain text blocks and overlapping sections reduce usability.
Strengths
Femme Fatale Paris stands out in its ability to craft a visually arresting digital space. The website showcases rich media, immersive visuals, and a cohesive grid-based layout that reflects the studio’s creative excellence. Content is broken into well-defined categories (Museums & Culture, Entertainment, Brands & Content), allowing users to understand the agency’s scope at a glance. The bilingual support also demonstrates a commitment to broader accessibility and inclusivity.
Weaknesses
However, the intense visual focus often undermines functionality. The use of stylized typography, broken sentence formatting, and inconsistent font sizing makes the site difficult to read. Accessibility is a major concern—key images lack alt text, and some interface elements are too small or stylistically exaggerated for practical interaction. The design feels overly dense and left-heavy in places, reducing balance and navigational flow. The site would benefit from greater typographic clarity, better spacing, and improved assistive technology support to enhance inclusivity without compromising its artistic ambition.
I took notes of the websites' strengths, weaknesses, user experience,
aesthetics, functionality, and accessibility.
Final Web Analysis
Below is the final form of my web analysis in Canva.
REFLECTION
Experience
Through this exercise, I got to experience evaluating web design using usability principles. It taught me to look beyond aesthetics and focus on how users interact with a site.
Observation
Effective design always prioritizes the user. Even small usability issues can significantly impact how a website is perceived and used.
Findings
I found that while some websites are visually strong, they often lack consistency, clear navigation, or accessibility which are considered the key aspects of good user experience.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment