Unit 6 Assignment 1 Miles Gardner

Table of Contents
Unit 6 Assignment 1 Miles Gardner ....................................................................................................... 1
Steam .................................................................................................................................................. 2
Purpose & Web Version ................................................................................................................. 2
Target Audience ............................................................................................................................. 2
Requirements ................................................................................................................................. 3
Principles ........................................................................................................................................ 4
SEO (Search Engine Optimisation) ................................................................................................. 6
Factors Affecting Performance ...................................................................................................... 6
Amazon ............................................................................................................................................... 7
Purpose & Web Version ................................................................................................................. 7
Target Audience ............................................................................................................................. 7
Requirements ................................................................................................................................. 8
Principles ........................................................................................................................................ 9
SEO (Search Engine Optimisation) ............................................................................................... 13
Factors Affecting Performance .................................................................................................... 13
Steam

Purpose & Web Version

Steam is a retail website that is focused on selling digital versions of video games of all types. It was
created and is run by Valve who also release video games on the platform. The website also
incorporates social aspects as there are several features on the site which allow other users to
interact with one another such as user profiles, community pages for individual games, activity feeds
for other users’ recent actions on the platform, etc. Considering Web 1.0 is exclusively text-based, it
is pretty obvious to tell that this platform uses Web 2.0 technologies due to the variety of images
and navigational arrows that are used across the pages for changing pieces of media being displayed
on the site.

Target Audience
Due to the wide variety of games that are on sale on the platform, it is difficult to pinpoint an exact
target demographic; however, by assuming the general audience for video games in general we can
also assume that steam would have a primarily younger (around 18-25) male audience. After looking
at statistics, 37% of Steam’s users in 2021 were between the age of 20-29, with another 32% of users
being between 30-39; so, while my assumption was somewhat accurate, there is also a larger group
of older users that weren’t taken into account. There is also an almost completely even gender split
between the genders with 51% of users being male, so while the site itself might not directly be
directly targeting a specific gender, the games that are on sale may draw in users besides what the
creators intended.
Requirements
Design
Steam’s design is very successful in keeping a user hooked and keeping them on the site for longer
than they originally intended. The layout of the page itself doesn’t incorporate any use of the golden
ratio, which is the design philosophy of creating design
elements that will be split evenly within a rectangle to give
appropriate levels of priority to objects on the screen while
also keeping them evenly split apart.

While it doesn’t use the golden ratio, it instead goes for a very
vertical design which contains several categories of different
games that are sold on the platform. This makes the home
page almost feel like a social media platform, as each section is given its own sliver of space to
separate into different categories that split the games into. This allows for each section to have its
own priority within the homepage which can be used to fit as many products as possible on the
screen while also having links to other pages to find more of the same if a user is interested by
something. This is extremely beneficial as while it doesn’t intend to maximise the visual appeal, it
instead tries to maximise the user view time on the site which I feel it succeeds in very well as it uses
its design to keep users hooked by constantly showing them new content that they are more likely
to get intrigued by as they keep scrolling through the website.

If a user reaches the very bottom of the page, the site will then continue giving recommendations
for games depending on several different criteria such as recently played games, games played by
friends, review scores, etc. This continues to amplify the social media aspects of the site as it
essentially gives a user an infinite number of games to scroll through and discover at their own
desire, which will lead them to discover more games which they may buy, making it a very successful
tactic for increasing sales on the site.

Navigation

The navigation bar is used to some good effect in guiding a user through the several features that
the website offers. The bar goes over some of the basic links to other parts of the website that are
essential but is still too simple to be used constantly.

Responsiveness
Overall, the site is extremely responsive as links will take you to your target destination in almost an
instant. This responsiveness also carries over to the browser versions of the websites as not only
does it have its own app, but it also adapts to being viewed in a mobile browser as well. This is
especially impressive considering the amount of more advanced scripts that are used within the site
compared to others.
Bandwidth Utilisation

As the image above shows, the website takes just over 1 second to load the majority of the content
while there is one small part at the very end that loads after just under 5 seconds. These load times
help keep a user hooked to the site as it allows for a user’s attention to be kept on the site for a
longer time.

Security
As shown by the lock at the top of the browser’s search bar, Steam utilises HTTPS (Hypertext
Transfer Protocol Secure) to ensure that any sensitive information that a user stores within the site
is kept save and secure within the companies database. This is especially needed for a company like
Steam as for an e-commerce website such as theirs that gains as much traffic as it does, holding so
much sensitive customer data is required to allow them to make purchases on the website itself so
making sure they are in accordance with the Data Protection Act 2018 and the Data Misuse Act 1990
by keeping their data secure and not using it for malicious reasons.

Principles
Within this section I will use the main 13 principles of website design to evaluate if the website is
effective in making itself look appealing and is usable for a wide variety of users.

Usability
The site itself is easy to use for most users and runs well on all the browsers that I tested it on,
including Google Chrome, Mozilla Firefox, and Microsoft Edge with consistent speeds across all of
them.

White space/spacing
White space is the space in between pieces of media or content that is used to sperate them and
give them clarity. Steam utilizes this very well by having sets of categories that are separated
vertically while being closer together horizontally with things of the same category. This allows for
items to be easily separated and compared to each other accordingly when viewing them so that
users can find more of the same thing while not being confused.

Site layout
The majority of the content is centred with the attempt of making the website look more like the
mobile/social media look that was discussed earlier, which it does very successfully by using the
spacing that was discussed in the paragraph prior. However, on the desktop version, the edges of
the screen are actually utilised to host more links to even more personalised categories for the user
to find which makes it utilise white space well while also not wasting any screen space.
Accessibility
Overall, I believe that Steam is a nightmare in terms of accessibility. Firstly, the colour scheme is
consistently dark with very visibility that cannot be changed anywhere. Also, while I complimented
the use of white space overall, with the text specifically it drops the ball as the text is usually either
to close together or simply too small to be seen easily (or both at the same time). Also, there are no
settings to change any of these problems, so it is quite underwhelming as a whole.

Navigation
As stated previously, the navigation bar is good enough to serve its purpose but just lacks the
amount of content seen in others to be used all the time. Also, the navigation bar stays at the very
top of the screen at all times so if a user wants to use it after scrolling to the bottom of the page
then they’d have to scroll all the way back to the top of the page

Typography

The typography of the site is anything but consistent as there are several different types of fonts
used throughout the entire site. This is clearly seen when looking at the several different designs
that are used for the search bars that are used in the site as there is a collection of different uses of
colours, shapes, and fonts between them which can cause great confusion for a user having to look
at different pieces of text and shapes that can sometimes blend into each other.

Alignment
As stated in the ‘site layout’ paragraph the site keeps most of its content on the centre of the page
with minimal use the left- and right-hand sides, however the fact that the site uses them at all needs
be given credit as some websites don’t do it at all.

Clarity
The clear objective of Steam is to show the wide variety of video games that are on offer. However,
the way that the website does this seems to more advertise to those who are already familiar with
the video game medium by using specific terminology without giving much explanation which
alienates new users making them less likely to stick around and use the site more.

Consistency
The website overall has its own very distinct colour pallet which it
uses throughout the entirety of the page, and it never deviates from
this palette. These colours also give off the impression of a sleek and
futuristic site which allows the site to advertise itself and video
games as an innovative and fresh industry. However, each individual
product on the site will be advertised in a variety of ways so it’s likely
to break this colour scheme slightly but rarely impedes on the site
itself.

Accuracy
As someone who is already quite familiar with video games, I can confirm that the information that
is presented is all very accurate which is to be expected with one of the leading providers of video
games on PC.
Content

Each piece of content is made to group the collection of games together with very close spacing. This
with the more spread out spacing of the other categories allows them to all stand out and give more
information about each games.

There are barely any regular links used throughout the site and are mainly reserved for the images
that can be clicked on. This puts a lot of faith into the companies that put their games for sale on the
website.

Media and Objects

On the product pages of the website, companies can use video trailers to give more advertisement
for their products. These videos are embedded into Steam themselves, so they don’t have to rely on
other services such as YouTube.

Simplicity
With a lack of consistency with the typography and colour scheme, it makes the website much more
complicated to use than it has to be, and for something that isn’t as all encompassing as over e-
commerce sites that offer more products than just one niche it makes it hard to attract new users.

SEO (Search Engine Optimisation)

Search Engine Optimisation is the method of a website using keywords that are embedded in the
website’s metadata to allow it to appear at the top of search results. Although, I couldn’t find any
examples of this within Steam, I think it is a safe assumption to assume that it is used somewhat as
for a company as big as Steam to not use it would frankly be impressive seeing as how popular it is.
However, this is also a good thing that it hasn’t been found as if someone was easily able to find
company secrets then it could cause damage to how the company would run.

Factors Affecting Performance

When a user opens a website, they typically expect the website to load within at least 2 seconds. So,
ensuring that the website is optimised to its maximum potential. There doesn’t seem to be any
effect on performance with the browser that is used to with the website as it performs the same on
Google Chrome, Microsoft Edge, and Mozilla Firefox. However, I also have a quite powerful
computer which is a large factor of the website’s performance as the amount of RAM and Cache
Memory that I have available allows for very fast load times on any website.
Amazon

Purpose & Web Version

Amazon is an e-commerce website that specialises in selling third party company’s goods and
delivering them to customers. They also offer a wide variety of other services such as Prime Video, a
streaming service similar to Netflix or Disney+. Considering Web 1.0 is exclusively text-based, it is
pretty obvious to tell that this platform uses Web 2.0 technologies due to the variety of images and
navigational arrows that are used across the pages for changing pieces of media being displayed on
the site.

Target Audience
Due to Amazon’s marketing as an all-encompassing delivery service for basically any product that
you’d want, it’s hard to pinpoint a direct audience that would be targeted. After doing some
research, I found that the majority of Amazon’s userbase is within the 18-44 years old range as this is
the main users of Amazon would be within the middle and upper class who shop online for
convenience and will prefer to shop with modern technologies rather than go to a in person
supermarket. However, people within the range of 35-44 years old are the majority of Amazon
Prime subscribers, which is Amazon’s premium subscription service which allows users free next day
delivery on most products that they shop for. This gives a clear indicator for Amazon’s more devoted
userbase as the people paying for Prime are more likely to be using the website more often for
buying products.
Requirements
Design
I believe that Amazon’s design is very successful overall in making the user experience quick and
easy to make their trips to the website all the more convenient. While it
doesn’t use the golden ratio to maximise its visual appeal, it does keep
itself concise and appealing by keeping sections on the homepage
organised by using white squares with categories of products kept
within them. This gives each category and object within it more room to
stand out as the light grey background allows them to stand out and be
brighter as if to grab a user’s attention over anything else on the page. This contrast can also be seen
at the top and bottom of the page where the dark blue shade makes the white text used stand out
even more. Also, this also allows the completely white search bar stay front and centre within the
website as the contrast will naturally make it stand out and more enticing for a user to go ahead and
search to their heart’s content.

Also, the site also has a large block for advertisements at the very top of the homepage, which is
typically used to advertise either a product that is being promoted by Amazon themselves, or a show
or movie that is being presented on Amazon Prime (Amazon’s streaming service). Not only is this a
great use of white space to allow an advertisement to be near the top of the page, but also the
variety of colours used within the advertisements also assist in helping the white squares for the
categories stand out even more as they will stand out with the advertisement as it blends into the
grey background.

Navigation

The navigation tab located at the top of the screen is very successful in assisting a user to navigate
through each individual section of the website. Firstly, the contrasting search bar with the white and
orange contrast extremely well with the dark blue it is placed with to make it really be visually
impactful and make a user notice it very quickly. Also, the rest of the text used is also white making
it stand out from the blue backgrounds used to make each section shown visually significant in its
own way. The main navigation bar is also separated into three different micro-sections that are
signified by slightly lighter shades of blue which help separate the different individual sections of the
bar while also looking visually appealing (in my opinion).

Responsiveness
Overall, the site is extremely responsive as links will take you to your target destination in almost an
instant as the amount of money that is able to go into Amazon is huge so they have the money to
host extremely large servers that can host millions of people across all of Amazon’s services. This
responsiveness also carries over to the browser versions of the websites as not only does it have its
own app, but it also adapts to being viewed in a mobile browser as well.
Bandwidth Utilisation

From the image above it is shown that the majority of loading goes into the images used within the
site, which is quite typical within websites. As images are the most commonly used media in
websites this isn’t very surprising. Also, the size of the website being 3.41MB is mildly concerning as
with the average being around 1-2MB having sizes above this could cause problems for users when
trying to load and use the page. However, for a company such as Amazon who has all the money to
make their service as vast and efficient as possible this is much less of an issue as they have the
infrastructure to support this slightly larger website size as it is definitely necessary due to having
such a large userbase.

Security
As shown by the lock at the top of the browser’s search bar, Amazon utilises
HTTPS (Hypertext Transfer Protocol Secure) to ensure that any sensitive
information that a user stores within the site is kept save and secure within
the companies database. This is especially needed for a company like Amazon as for an e-commerce
website such as theirs that gains as much traffic as it does, holding so much sensitive customer data
is required to allow them to make purchases on the website itself so making sure they are in
accordance with the Data Protection Act 2018 and the Data Misuse Act 1990 by keeping their data
secure and not using it for malicious reasons.

Principles
Within this section I will use the main 13 principles of website design to evaluate if the website is
effective in making itself look appealing and is usable for a wide variety of users.
Usability
The site itself is easy to use for most users and runs well on all the browsers that I tested it on,
including Google Chrome, Mozilla Firefox, and Microsoft Edge with consistent speeds across all of
them. However, some users may be overwhelmed by the amount of content that is shown to them
as soon as they go onto the website, as unlike Steam where it specialises on one specific market, you
can buy almost anything on Amazon which is all being advertised all at once on one main page.

White space/spacing
White space is the space that is used to separate elements and media on a website. The white space
used on Amazon is very minimal where only a small amount of space is left to create distance
between each piece of media. The little use of white space makes lots of different content be on the
screen at the same time which is good for advertising the products they wish to sell, but it can look
overwhelming and unappealing to see this much content crammed onto one page like this

Site layout
All of the elements used on the website are kept to the centre of the page to keep the style and
presentation clean and consistent. In doing this, the website has two empty white spaces on both
the left and right side that are devoid of any media. Considering the earlier problem of the lack of
white space usage this is quite annoying to see that they have left spaces empty with nothing there.
This can also be seen on the individual product pages that are linked to throughout the site.
Accessibility
The colour scheme used for Amazon’s site is generally very appealing to users who may have some
form of colour blindness, as the white and dark blue contrast well and there are very little variations
of colour blindness that affect the ability to see these colours. The website also has a wide array of
accessibility settings that affect both visual and audio related aspects of the website.
Navigation
As stated previously, the navigation tab has a wide variety of categories that are sectioned off by
shades of blue and contain several different links to helpful parts of the website. The only issue is
that it is permanently located at the very top of the screen so if you’ve scrolled down quite far on a
page and want to go back to the navigation bar, then you’d have to scroll all the way to the top of
the page again.

Typography
Throughout the entire site, Amazon uses its own homemade font (Amazon Ember) as the primary
font used and doesn’t use any others on the entirety of the site. This allows for the site to have a
consistent style throughout, which assists in keeping it visually appealing and easy to use
throughout. The only deviation from this is within the product pages themselves when images are
used and aren’t edited by Amazon themselves but rather the company selling the product on the
site which may cause for visual clashing but that is out of Amazon’s hands, so it is to be forgiven.

Alignment
This is also discussed within the ‘site layout’ section, where the site has all its content centred with
all its content very close together which is used to its benefit and detriment. This may have been
done to make the site more easily used on mobile devices, with most of the content tight in the
centre it makes it easier to translate to mobile devices, which they are successful in as the Amazon
app is also one of the most popular shopping apps as swell as website.

Clarity
Amazon makes it clear that their primary objective is to make a user buy as many products as
possible in the most convenient way possible. This can be seen throughout the site through many of
the previously discussed points (tight spacing of content, lots of categories, etc). However, to be
more specific than that, they also make their goal to advertise the sheer amount of content of which
they offer, and they are very successful as using the large number of categories they can put all the
wide array of categories they have to offer all at once.

Consistency
This has been extensively discussed in every other section, but overall, the style and visual
presentation of Amazon is kept very consistent, through the text, the colour scheme and the layout
of images Amazon keeps itself consistent to look as appealing and friendly to use as possible.

Accuracy
All the information that is shown on Amazon is kept up to date and accurate, as being one of the
most visited sites on the internet it is important that the information that you give users isn’t
misleading or just incorrect. This information usually relates directly to information regarding new
products and deals that Amazon are currently offering so it is kept quite easy to keep correct.
Content
Each square used to present content contains both an image that can be interacted with to be
redirected and a link that leads to similar products. These squares are kept to the centre of the page
like most of the other content and are equally spread out from the rest of the other squares. These
squares are used as an easy way to differentiate information on the homepage.

Media and Objects

Many images are used within the website to allow a user to view the products that are in display.
These images also act as links to the product’s page where they can be bought by a user. The use of
other media is very limited which can make the site seem static sometimes as at face value it can
look like a lot of static images clustered into one webpage.

Simplicity
The white background is a major part of what keeps Amazon’s design simple and easy to use, and
with clear categories to each of the different products a user will find it hard to get lost. However,
the home page can sometimes be seen as cluttered with all the content that is present which may
cause confusion for a user who isn’t familiar with all of Amazon’s content.

SEO (Search Engine Optimisation)

Search Engine Optimisation is the method of a website using keywords that are embedded in the
website’s metadata to allow it to appear at the top of search results. Although, I couldn’t find any
examples of this within Amazon, I think it is a safe assumption to assume that it is used somewhat as
for a company as big as Amazon to not use it would frankly be impressive seeing as how popular it is.
However, this is also a good thing that it hasn’t been found as if someone was easily able to find
company secrets then it could cause damage to how the company would run.

Factors Affecting Performance

When a user opens a website, they typically expect the website to load within at least 2 seconds. So,
ensuring that the website is optimised to its maximum potential. As Amazon is one of the biggest
websites on the internet, it has no shortage of funding to be put into hosting servers for the website.
There doesn’t seem to be any effect on performance with the browser that is used to with the
website as it performs the same on Google Chrome, Microsoft Edge, and Mozilla Firefox. However, I
also have a quite powerful computer which is a large factor of the website’s performance as the
amount of RAM and Cache Memory that I have available allows for very fast load times on any
website.