INTERACTIVE DESIGN | EXERCISE 1: WEBSITE ANALYSIS
21.09.2025 - ?.?.2025 /Week 1 - Week ?
Design Research Methodology
Interactive Design: Exercise 1
Loh Kai Xuan (0365780)
TABLE OF CONTENTS
LECTURE
Week 1
We were given an introduction to Sonic Design and briefing on
our MIB. We were also shown examples of past senior
works.
Week 2
We were given a video and slides since we were uanble to have lecture.
Fig 1.1. Bad Doors Youtube Video
Fig 1.2. Week 2 Lecture Slides
EX 1. Website Analysis
For the first exercise, we have to choose 5 websites with
varying categories from the provided links(1, 2, 3, &
4)
Review the website, take note of its design, layout, content,
and functionality. Identify the strengths and weaknesses of
the website, and consider how they impact the user
experience.
I decided to go with 5 websites with very different purposes
and fields:
Website 1: savor.it by
Savor
Fig 2.1. Savor.it
1. Purpose & Goal
Savor.it is an interactive website that showcases
"Savor", a US food tech startup.
Savor is a group of scientists that creates butter and
fats from carbon. They aim to make the foods we all love
while preserving the future of our planet.
The website provides extensive detail and info on Savor.
Such as, process, foods, mission, journal, contact. They
have a interactive introduction on their home page as well
as collaborations of people in the food industry using
their sustainable butter.
2. Visual Design & Layout
a)Colour
Fig 2.2. Savor.it transitioning page
Savor.it uses a pale yellow colours for transitions,
dark brown as accent colour and mostly off-white on
dark photos for most of the main content.
b) Typography
Fig 2.3. Savor.it food page
This website uses a custom serif font just like
their logo. It gives a fancy feeling, matched with
a simple san serif font for information.
c) Imagery
Fig 2.4. Savor.it main page
The imagery of Savor.it fills the whole page, showcasing
their sustainable butter and fats as well as food made
with them. With the dark and saturated warm filter on the
photos, it enhances the food photography, and still manage
to make the words pop with contrast.
However I noticed they reused the same images for
multiple pages or screenshots from auto play videos, which
starts to get repetitive. Not only that some of it is
noticeably lower resolution which throws off the
immersion.
Fig 2.5. Savor.it food photography
d) Layout
Fig 2.6. Savor.it
Savor.it uses a minimalistic centered design focusing
more on images. Huge fonts for the Serif title, paired
with small Sans serif fonts for sub-titles or text.
The images are mostly the central point of the
design.
Fig 2.7. Savor.it process page
They seem to use a circular central point to design
around. Which is more obvious in this page. Some of
the text seems abit random which baffled me a little,
but the elements acting as leading lines helped the
flow.
3. Functionality and usability
a) Navigation
Fig 2.8. Savor.it mobile menu page
Navigation is simple, all you have to do is click
the menu and scroll for the information. The
interactive elements that appear while scrolling
keeps my attention.
b) Interactive elements
Fig 2.9. Savor.it food page interactive
elements
The website has interactive transitions for all
the text whenever you switch pages or scroll
down.
It is smooth, simple and leads the viewers eye,
giving a great overall user experience.
4. Quality & Relevance
a) Quality
The information of the website were short and
concise, easy to understand. Despite it being a
niche topic, and with science involved, this
website used interactive elements and large food
photography to further help viewers to
understand it's contents.
b) Relevance
Savor is a food tech startup, which is a
niche topic to explain to the general
public. But their main interface showcasing
their product, Savor Butter, keeps viewer
attention. However, I misunderstood thinking
it was a bakery website before I scrolled to
read.
5. Performance
Fig 2.10. Savor.it PageSpeed
Insight
a) Load Time
I used PageSpeed Insight to check the
website performance. The LCP is large due
to some auto play videos taking a while to
load. However the page loads very fast on
both mobile and desktop.
a) Responsiveness &
Compatibility
Both mobile and desktop layouts are
similar and easy to navigate. Auto play
videos may take awhile to load on
mobile.
Website 2:
martingauer.com
by Martin Gauer
Fig 3.1.
martingauer.com
1. Purpose & Goal
This website is a portfolio of
Martin Gauer, a game developer.
Using, mini gameplays and
interactive elements to tell the
story of his journey.
2. Visual Design &
Layout
a)Colour
Fig 3.2.
android weekly
& gameboy
page
The info pages are all black
and white paired with accent
colours of the gameboy chips.
While the gameboy page stays
true to the dull retro
colours.
b) Typography
Fig 3.3. Too
many things
Page
This website uses a pixel
font for titles/subtitles
while info text uses a
simple sans serif
font.
c) Imagery
Fig 3.4.
martingauer.com
imagery
The imagery is very simplistic,
and clearly showcases a Nintendo
Game Boy Colour and chips
displaying different thumbnails
representing the sub pages'
informations. However the imagery
is not high resolution enough for
wide-screens like PC.
d) Layout
Fig 3.6.
martingauer.com
layout
Minimalistic and straight to
the point. Big images or small
images paired with text
paragraphs.
Fig 3.7. martingauer
scrolling interactive
elements
The waving angled rectangle
that appears gives a flair of
fun to the website but at the
same time disrupts readability
when scrollling.
3. Functionality and
usability
a) Navigation
Fig 3.8.
martingauer.com
menu page
Navigation is simple,
either use the menu page
or scroll down for more
info. However the gameboy
screen is small, so after
zooming in we have to use
the keyboard keys to play
the game. The keys he
chose are hard to get used
to for the general
public.
Fig 3.9.
martingauer.com
gameboy
gameplay
b) Interactive
elements
Fig 3.10.
martingauer.com
mobile gamepa=lay
The website has
interactive transitions
when scrolling.
On the homepage, there is
even a playable gameboy
page showcasing his game
about Martin Gauer's
autobiography, enhancing
website experience,
especially on
mobile.
4. Quality &
Relevance
a) Quality
Information is in
paragraphs which may be
a long read, but the
Martin Gauer Game Boy
helps with conveying
info with short
dialogues an interactive
gameplay giving a simple
yet informative design.
Overall high quality
elements except the
lower resolution
images.
b) Relevance
This website
targets game
enthusiasts and
nostalgia of Game
Boys, which in a way
also to serve his
existing fanbase.
Although not that
relevant anymore in
2025, this website
is still fun for
anyone who stumbles
upon it and learn
about this game
developer.
5.
Performance
Fig 3.11.
Martingauer
Mobile
PageSpeed
Insight
a) Load
Time
Pagespeed Insight
could not analyze
the desktop
performance but
shows a high
performance for
mobile.
a)
Responsiveness
&
Compatibility
Responds to
clicks quite
fast, even for
the tiny gameboy
interface.
However it does
have a better
view on mobile
due to low
resolution and
buttons favoring
mobile
users.
Website
3: 100
lost
Species by
Immersive
Garden
&
60fps
Fig
4.1.
100
lost
species
1.
Purpose
&
Goal
This
website
is a
digital
gallery
that
showcases
100
extinct
species.
The
gallery
not only
shows
illustrations
of the
species,
but also
enlighten
the
user's
with the
species
information
and
time.
Along
with a
time
limit,
giving
the user
an
urgency
to learn
about
the
animal.
2.
Visual
Design
&
Layout
a)Colour
They
used
many
earthy
tones,
especially
brown
and
green.
The
pages
are
either
off
white
background
with
earthy
tones
or
dark
background
with
off
white
or
gold
text.
b)
Typography
Fig
4.1.
100
Lost
Species
Page
This
website
uses
centered
serif
fonts
and
sans
serif
for
small
text.
And
Serif
as
well
for
main
info.
c)
Imagery
Fig
4.2.
100
Lost
Species
gallery
100
Lost
species
uses a
stylistic
watercolour
illustrations
of
each
animal.
Many
painting
like
images
are
arranged
together
like a
gallery,
and
zooming
in on
the
animal
you
click
to
read
about
it.
d)
Layout
Fig
4.3.
100
lost
species,
by
name
browsing
The
layout
is
mostly
centered
on
the
animals.
Using
a
minimal
design
and
less
text
before
you
click
on
the
animals.
Allowing
the
animal
to
feel
important
and
significant.
They
allow
you
to
choose
between
by
name,
by
visuals
or
by
extinction
date,
with
visuals
being
the
default.
3.
Functionality
and
usability
a)
Navigation
Fig
4.4.
100
lost
species
extinction
page
Navigation
is
slightly
confusing
at
first
as
I
did
not
know
I
can
scroll.
the
slow
transition
when
you
change
browsing
method
is
a
little
fustrating
especially
on
a
timer.
However
it
shines
through
due
that
as
well.
Forcing
us
to
focus
on
these
lost
species
and
to
appreciate
them
without
rushing.
other
than
that,
all
buttons
are
clear
and
easy
to
understand,
the
information
on
animals
are
concise
and
quick
to
be
read.
b)
Interactive
elements
Fig
4.5.
100
lost
species
gallery
The
website
is
very
interactive.
with
the
smooth
transitions
and
fades.
One
notable
thing
would
be
the
slow
dissipation
of
the
animal
paintings,
signifying
the
the
species
vanishing
slowly.
With
the
move
of
our
arrow
key
also
affecting
the
painting,
shows
that
our
actions
matter.
4.
Quality
&
Relevance
a)
Quality
The
website
quality
is
high
and
has
clear
resolution.
The
quality
of
information
is
also
makes
the
most
of
our
time.
Giving
brief
explanation
of
each
species
to
curious
users.
b)
Relevance
The
website
targets
people
who
are
curious
or
willing
to
learn
about
the
lost
species
but
does
not
want
to
do
too
extensive
of
a
research.
This
website
is
a
good
introduction
for
this
topic.
5.
Performance
Fig
4.6.
100
lost
species
desktop
PageSpeed
Insight
a)
Load
Time
Pagespeed
Insight
showed
that
this
website
has
great
performance
on
desktop
but
the
mobile
version
does
indeed
lag
due
to
the
amount
of
interactive
elements
and
hundreds
of
images.
a)
Responsiveness
&
Compatibility
Both
mobile
and
desktop
showcases
the
extinction
of
animals
clearly
and
has
smooth
transitions
when
clicking
on
anything.
Website
4:
Legendary
3310 by
Karina
Fig
5.1.
Legendary
3310
Launch
1.
Purpose
&
Goal
This
website
educates
the
users
on
the
Legendary
3310,
or
otherwise
a
Nokia
and
it's
history.
2.
Visual
Design
&
Layout
a)Colour
The
main
colours
is
a
lime
green
and
the
accent
would
be
a
greenish
off
black.
With
some
reds
here
and
there.
b)
Typography
Fig
5.2.
Legendary
3310
font
A
chunky
pixel
font
is
used
along
with
a
simple
serif
font
for
large
chunks
of
informations.
The
pixel
font
feels
like
a
reminiscent
of
the
3310's
interface.
c)
Imagery
Fig
5.3.
Legendary
3310
meme
hero
page
Sticking
to
the
retro
3310
inspired
interface,
this
website
sticks
to
mostly
duotone
imagery.
Such
as
posterizing
photography
or
combining
with
simple
pixel
art,
and
vector
art.
d)
Layout
Fig
5.4.
Legendary
3310
Layout
Legendary
3310
uses
an
artistic
old-school
style
layout,
further
enhancing
user
experience
by
pushing
the
vibe
of
Nokia's
generation.
It
also
uses
left
aligned
text,
as
well
as
the
big
medium
small
design
hierarchy
for
each
section.
3.
Functionality
and
usability
a)
Navigation
Fig
5.5.
scrolling
Legendary
3310
Navigation
clear.
Either
scroll
or
use
the
menu
bar
to
jump
to
the
element
you
want.
Unlike
some
websites,
this
clearly
states
you
need
to
scroll.
So
users
won't
just
stop
and
wait
for
something
to
happen.
The
scrolling
shows
the
elements
appearing,
as
if
it's
telling
a
story.
b)
Interactive
elements
Fig
5.6.
Legendary
3310
buttons
The
interactive
elements
are
fun
and
although
not
much
animated,
it
still
conveys
the
the
story.
However
the
clicking
on
Nokia
button
was
disapointing
as
nothing
happens
when
you
click,
giving
false
hope.
4.
Quality
&
Relevance
a)
Quality
Information
is
presented
in
a
concise
manner,
providing
both
fun
and
education.
Along
with
the
imagery
that
pairs
well
with
the
text.
b)
Relevance
This
website
educates
general
public
on
the
3310
Nokia.
In
this
day
and
age
where
phones
break
in
a
few
years,
3310
is
an
interesting
topic
as
it
was
known
for
immortality.
Many
fun
facts
in
the
website
engages
with
the
user.
5.
Performance
Fig
5.7.
Legendary
3310
Performance
a)
Load
Time
This
website
has
a
slow
load
time.
May
be
due
to
the
amount
of
interactive
elements
in
every
single
page.
a)
Responsiveness
&
Compatibility
After
it
finished
loading,
the
responsiveness
of
interactive
elements
when
scrolling
were
fast
and
smooth.
It
is
interesting
to
see
that
mobile
and
desktop
has
different
interactive
elements
that
best
suit
their
interface,
overall
giving
both
platforms
a
good
experience.
Website
5:
Cruella
De
Vill by
Daria
Ziablikova
Fig
6.1.
Cruella
De
Vill
Launch
1.
Purpose
&
Goal
This
website
is
for
the
movie,
Cruella.
It
gives
a
synopsis
of
the
story,
showcases
the
character,
Cruella
De
Vill,
and
where
she
came
from,
and
many
more
we
can
learn
about
the
movie.
It
is
a
website
that
interests
you
into
watching
the
movie
itself.
2.
Visual
Design
&
Layout
Fig
6.2.
Cruella
De
Vill
Home
Page
a)Colour
The
website
uses
Cruella's
signature
colours,
Red,
Black
and
White.
It
is
a
bold
colour
palette
slightly
desaturated
with
noise
filter.
b)
Typography
Fig
6.3.
Cruella
De
Vill
fonts
A
bold
handwritten
font
taking
the
limelight,
paired
with
simple
sans
serif
font
for
easier
reading.
c)
Imagery
Fig
6.4.
Creulla
De
Vill
Imagery
The
website
uses
obvious
references
and
interpretations
of
the
101
Dalmatians
in
their
design,
such
as
paw
prints
and
the
fur
patterns.
Although
some
movie
screenshots
on
the
website
are
low
resolution,
it
pairs
very
well
with
the
90s
vibe
and
live
noise
filter.
d)
Layout
Fig
6.5.
Cruella
De
Vill
layout
This
website
has
a
kind
of
organized
randomness,
reflecting
the
fun,
chaotic
side
of
Cruella.
The
text
and
elements
are
arranged
in
a
way
that
it
zig
zags
down
when
scrolling.
This
helps
keep
the
layout
consistent
and
easy
to
read.
3.
Functionality
and
usability
a)
Navigation
Fig
6.6.
Cruella
De
Vill
navigation
Simple
yet
fun
navigation
buttons.
Easy
to
find
and
click.
But
the
quick
scroll
to
the
elements
every
time
you
click
a
page
causes
slight
shock
or
motion
sickness.
However
the
menu
buttons
did
its
work,
leading
viewers
to
wanted
pages
quick
and
immediately.
b)
Interactive
elements
Fig
6.7.
Cruella
De
Vill
Scrolling
Chaotic
and
fun
interactive
elements,
especially
when
scrolling.
Clickable
buttons
shake
when
you
hover,
allowing
use
to
know
it's
clickable.
The
element
animations
also
add
spice
to
the
overall
website
experience
without
being
too
disruptive.
4.
Quality
&
Relevance
a)
Quality
Short
and
straight
to
point.
Very
informative
about
the
movie
and
can
easily
learn
all
the
basic
knowledge
of
it
in
less
than
15
minutes.
The
imagery
paired
with
concise
textual
information
combined
to
deliver
a
fun
and
educating
user
experience.
b)
Relevance
Cruella
De
Vill
targets
fans
or
general
public
that
wants
to
watch
the
movie
but
not
sure
whether
to
watch
it
or
not.
Movies
are
popular
in
the
entertainment
industry
so
anyone
would
be
interested
in
this.
Even
box
office
or
starring
member
information
are
not
to
overwhelming
for
people
who
are
not
too
interested
but
it
encourages
the
user
to
do
more
research
or
watch
the
movie.
5.
Performance
Fig
6.8.
Cruella
De
Vill
Performance
a)
Load
Time
Slow
load
time
and
even
worse
on
mobile
due
to
the
amount
of
interactive
elements.
However
the
launch
page
was
interestingly
designed
to
keep
users
there.
a)
Responsiveness
&
Compatibility
It
is
slightly
more
laggy
on
mobile
but
responds
fast
on
desktop.
interactive
elements
when
scrolling
still
transitions
in
smoothly.
REFLECTION
This
analysis
exercise
was
really
fun
and
interesting.
While
choosing
websites,
I
also
got
the
chance
to
find
out
about
many
different
websites
that
are
all
individually
special.
As
someone
who
doesn't
explore
websites
often,
being
able
to
witness
this
amount
of
interactive
websites
piqued
my
interest.
I
can't
even
imagine
how
they
coded
it.
I
had
to
do
a
little
research
on
terms
like
LCP
as
I'm
not
familiar
and
was
pushed
to
think
more
about
the
website
rather
than
just
scroll
for
the
information
I
want.
Overall
this
analysis
proved
to
be
a
great
introduction
and
exercise
to
interactive
design
even
if
its
a
little
tedious.
Comments
Post a Comment