Interactive Design - Exercise 1
21.04.25 - 28.01.25 (Week 1 - Week 4)
PAN RUINING (0378138)
Interactive Design / Bachelor of Design (Honours) in Creative Media
Exercise 1 - Website Analysis
CONTENT LIST
· LECTURE
· FEEDBACK
LECTURE
Week 1：Physical Class
In this week's interaction design class, Sir Explained the overall
arrangement of the course and the project timeline, and introduced
the core role of UX and performance evaluation in web design. He
asked us to select five websites he gave us for detailed analysis as
the task of Exercise 1.
INSTRUCTIONS
EXERCISE 1 - WEBSITE ANALYSIS
Website 1: The Blue Desert
Fig 1.1 The Blue Desert homepage
Blue Desert is a science fiction interactive experience produced by Adoratorio Studio. Its purpose is to turn a global impact report into a compelling story that immerses the viewer about environmental protection and climate change. The content effectively communicates the themes of environmental protection and climate change, using interesting expressions to remind people of the need to protect the environment.
· Visual Design & Layout:
The Blue Desert website's color scheme adopts desert tones and
blue gradients. It uses mouse scrolling animations and promotes
the development of the story through visual elements and sound
effects of nature, creating an immersive natural experience for
users and serving as a reminder for people to protect the
environment.
Fig 1.2 Homepage layout with minimalist style
· Functionality & Usability:
The Blue Desert website offers an immersive scrolling experience that
combines visual and audio narratives. By clicking on the menu in the
upper right corner, each chapter can be clearly seen, making it
convenient for users to click when needed.
Fig 1.3 Each chapters overview layout
· Content Quality & Relevance:
This website provides accurate climate data for COP21 and clearly
explains its science fiction story, which is authoritative, scientific
and popular. Also, the content is creatively organized with a
dual narrative (science & art), making the storytelling
engaging.
Fig 1.4 Accurate contents
· Responsiveness:
The Blue Desert website is not fully available for experience on all
devices. On mobile phones, because the phones are too small, it prompts
users to switch to the desktop experience, which indicates limited
mobile response capability and user flexibility.
Fig 1.5 The mobile view of The Blue Desert’s website
· Weaknesses & Improvements/Recommendations:
- Some pages contain a large amount of information, which may cause users to experience reading fatigue.
- Oversensitive scrolling that makes story progression hard to control. I think optimizing the scrolling smoothness and adding indicators will be helpful.
- The background music is too monotonous and can change along with the scene.
Website 2: Tenute San Sisto
Fig 2.1 Tenute San Sisto homepage
· Purpose, Goals & Effectiveness:
The purpose of the Tenute San Sisto website is to promote their
vineyards, showcase the quality of their wines and emphasize the
characteristics of their location in the Castelli di Jesi region. The
goal is clear and the communication is effective, telling a true and
attractive brand story.
The overall design is simple and elegant, in line with the traditional
brand image of the winery. It adopts natural tones such as beige and
earth tones, and is accompanied by high-quality real photos, with a
clear layout.
· Functionality & Usability:
The language can be switched in the upper left corner. When users click
on the menu in the upper right corner, they will get an introduction to
the entire brand. The left side introduces the estate, and the right side
introduces five types of wine. It's concise and clear.
Fig 2.2 Navigation bar & Introduction
· Content Quality & Relevance:
The content is clear, well-organized, and highly consistent with the brand
image of the wine, while the description of the wine, its history, and
geographical location is both professional and concise.
Fig 2.3 Example of Origin’s visual storytelling
approach
· Responsiveness:
This website has excellent performance, fast loading speed and smooth page switching. The website has an extremely fast response speed and can be smoothly adapted on desktop computers, tablets and smart phones.
Fig 2.4 The mobile view of Tenute San Sisto’s website
· Weaknesses & Improvements/Recommendations:
- Lacking interactive elements, it is suggested to add video stories or interactive wine recommenders to enhance the user experience. - There are relatively few tasting notes, award information or pairing suggestions for individual wines. The details can be further enriched to enhance the appeal.
- The entire text is in capital letters, which makes it very difficult for native speakers to read. The choice of font is also not ideal and there should be a larger spacing between the letters.
Website 3: Museum Of Digital Influence
Fig 3.1 Museum Of Digital Influence homepage
· Purpose, Goals & Effectiveness:
The digital-influence website is an analog museum showcasing the
history and development of digital influence, with timeline chapters
clearly presenting the impact of major digital events, such as the rise
of social media and the proliferation of disinformation, on society. The
purpose is to help users recognize and better understand the history and
evolution of the digital world.
· Visual Design & Layout:
The design of this website is very ingenious. After entering, users can
see a simulated digital museum by scrolling with the mouse. Below, there
is a timeline and "digital influence" arches with different carriers at
different periods. The patterns on the arches will also change according
to the user's perspective, which is very interesting.
Fig 3.2 Visual Design and Layout
· Functionality & Usability:
Click on any of the arches and (using TikTok as an example) users can
see that the inside looks like a corridor in a museum. By scrolling with
the mouse, they can move forward to explore TikTok’s history, famous
events, people, and its influence.
Fig 3.3 All of the contents
Scroll the mouse to the end, and sers can also see two other arches related to "digital influence" at the same time for users to choose from.
Fig 3.4 End Appearance
·Content Quality & Relevance:
The content is accurate and well-organized, presenting events through
timelines and key descriptions to help users quickly grasp important
nodes of digital impact, while each chapter maintains good readability
by providing moderate information and selecting only representative
cases for key events.
·Responsiveness:
The sliding interaction is not smooth enough, the speed control is unstable, which easily leads to content jumping, and the response time is relatively long. The mobile experience still needs to be optimized.
Fig 3.5 The mobile view of Museum Of Digital Influence’s website
· Weaknesses & Improvements/Recommendations:
- The page scrolling control is relatively smooth, but in reading the mouse scrolling speed is a little fast and may cause the user to miss some key information. It is recommended that the scrolling smoothness be slightly optimized.
- Lack of search function, if users want to find a specific topic they have to slide to find it, it is recommended to add a search bar to improve the efficiency of information search.
Website 4: Dayglow
Fig 4.1 Dayglow homepage
· Purpose, Goals & Effectiveness:
The purpose of Dayglow's official website is to showcase its image as
a leading platform for home furnishing brands. Through clear brand
positioning and product display, the website effectively communicates
Dayglow's design philosophy and market positioning. The goal is for
users to quickly understand the features and benefits of each brand,
making it easier for them to make purchasing decisions or find
opportunities to work together.
· Visual Design & Layout:
The use of bright colors such as orange and blue highlights the
brand's vitality and modernity, creating a clean and comfortable
feeling for users. Combined with a simple grid layout, it clearly
divides brand information, product display and partners for convenient
navigation, as well as modern font selection and reasonable line
spacing between characters to ensure comfortable reading.
Fig 4.2 Visual Design and Layout
· Functionality & Usability:
The top right corner of the homepage offers clear brand navigation
to help users quickly understand the positioning and products of
each brand, while also providing “Submit your brand” and “Contact”
buttons for potential partners or users to easily get in
touch.
Fig 4.3 Useful information
The site demonstrates relationships with partners to enhance brand
credibility and reach, while each brand page offers comprehensive
information, including detailed brand stories, product concepts, and
market positioning.
Fig 4.4 Introduce the product in detail
This website has achieved rapid response and smooth adaptation on smart phones and tablet devices, ensuring a consistent access experience across different screen sizes. It performs exceptionally well in terms of loading speed and operational smoothness.
Fig 4.5 The mobile view of Dayglow’s website
· Weaknesses & Improvements/Recommendations:
- Not telling the user how to read the site on the homepage can be a
bit confusing for the first time user experience. Suggest adding a
scrolling reading tip icon.
- The content of the brand page is relatively single and lacks
interactivity. It is recommended to add interactive elements such as
video display of brand story and user evaluation to enhance user
participation.
Website 5: Russian mockups
Fig 5.1 Russian mockups homepage
· Purpose, Goals & Effectiveness:
The main goal of the Russian Mockups website is to provide designers and
brands with high-quality brand display mockups with the background of
Russian cities. The website conveys its brand positioning by emphasizing
the concepts of "Created for designers" and "Present your design in a
realistic environment", thereby attracting the attention of
professionals.
· Functionality & Usability:
This website uses large images to highlight the visual effect of the
model. The navigation menu is simple and clear, with clear
classifications such as devices, billboards, posters, etc., enabling
users to quickly find the content they need. The font selection is
modern, the design is cool and attractive to young people.
Fig 5.2 Visual Design and Layout
· Functionality & Usability:
The user interface is intuitive and the operation is also convenient.
This website is in line with the needs of the general public. There is a
clear navigation bar, preview image and purchase options at the top of
the product page. In addition, the website also provides an account
management function, which is convenient for users to view orders and
download purchased content. It is very user-friendly.
Fig 5.3 Navigation bar
Fig 5.4 Product model display
The website content focuses on showcasing model products, with each
product featuring high-quality preview images and concise
descriptions. In addition, the website also provides an introduction
to the brand's story and design concept, enhancing the brand's
credibility and appeal.
Fig 5.5 Detailed product introduction
·Responsiveness:
This website can adapt to different devices and screen sizes. The page loading speed is fast, ensuring smooth browsing even on mobile devices. Navigation and interaction elements perform consistently across various devices, providing a good user experience.
Fig 4.5 The mobile view of Russian Mockups’s website
· Weaknesses & Improvements/Recommendations:
- This website lacks a search function. When users look for a specific model, they can only search one by one, which may not be convenient enough. It is suggested to add a search bar to enhance the user experience.
- Adding a user review system that allows buyers to rate and comment on products can increase the trust of new users in this brand.
FEEDBACK
Week 1 - None
Week 2 - Sir told me not to put the content of the writing in
the pdf and then embed it in the eportfolio, to write directly into
it. Also, he said my formatting is not a problem.
REFLECTION
This is the first time I have come into contact with this module and
content. When doing the first exercise, I found that the functions,
designs, layouts and organization methods of each website are all
different. Any of these designs will affect the experience of users,
which is very interesting.
Comments
Post a Comment