Usability Principles

and Practice
20DSP832

F020162
1. INTRODUCTION 1. INTRODUCTION

1. Company overview 1. Company overview 4. Current website 4. Current website

2. Top tasks 2. Top tasks
Supreme is an American skateboarding shop Supreme is an American skateboarding shop and clothing
and clothing I have presented some screenshots from Ithe have presented some screenshot
original
brand established in Newyork in 1994 by James brand established
Jebbia. in NewyorkTheintop
1994 by James
5 tasks Jebbia.
for fashion The top as
ecommerce websites 5 tasks
per the supremenewyork
for fashion ecommerce website
websites as perwhich
the needed tosupremenewyork
be tested and website which ne
The brand caters to the skateboarding and The brandcultures
hip-hop caters to the skateboarding
survey condcutedand hip-hop cultures
in our class are: survey condcuted in our class redesigned.
are: redesigned.
as well as to youth in general. Supreme manufacturesas well as to youth in general. Supreme manufactures clothes,
clothes,
• Delivery information of the products (delivery• Delivery information
cost or free, of the products (delivery cost or free,
accessories (shoes, caps, etc), and skateboards accessories (shoes,
as well. Fromcaps, etc), and skateboards as well. From
date, and time) date, and time) The next process is analysing the existingThe next for
website process is analysing the e
its skating roots, Supreme has become extremely its skating roots, for
popular Supreme
its has become extremely popular for its
streetwear style. The bold red box logo has streetwear
become very style.popu- • Image
The bold red box logo quality of the garments
has become very popu- • Image quality of the garments ¿QGLQJWKHXVDELOLW\LVVXHVDQGXQG
¿QGLQJWKHXVDELOLW\LVVXHVDQGXQGHUVWDQGLQJKRZWR
lar. lar. • Customer reviews • Customer reviews solve them in the redesign. solve them in the redesign.
• 6L]HDQG¿WLQIRUPDWLRQ • 6L]HDQG¿WLQIRUPDWLRQ
• Product description
-HEELDVD\V³7KHLQÀXHQFHZDVWKHSHRSOHZKRZHUHDURXQGWKHVKRS²WKH
-HEELDVD\V³7KHLQÀXHQFHZDVWKHSHRSOHZKRZHUHDURXQGWKHVKRS²WKH • Product description The redesigned version of supreme website Theshould
redesigned
be version of supreme
VNDWHUV´³7KH\ZRXOGZHDUFRROVKLWWKH\ZRXOGQ¶WZHDUVNDWHFORWKHV,W
VNDWHUV´³7KH\ZRXOGZHDUFRROVKLWWKH\ZRXOGQ¶WZHDUVNDWHFORWKHV,W performing
performing better when compared to the original better when compared
version
ZRXOGEH3RORLWZRXOGEHD*XFFLEHOWLWZRXOGEH&KDPSLRQ:HPDGH
ZRXOGEH3RORLWZRXOGEHD*XFFLEHOWLWZRXOGEH&KDPSLRQ:HPDGH in usability wise. in usability wise.
ZKDWZHUHDOO\OLNHG)URPDIHZWHHVDIHZVZHDWVDSDLURIFDUJRSDQWVD
ZKDWZHUHDOO\OLNHG)URPDIHZWHHVDIHZVZHDWVDSDLURIFDUJRSDQWVD
EDFNSDFN´ 3. Usability tasks EDFNSDFN´ 3. Usability tasks

Supreme
Supreme has created a considerable sense has that
of urgency created Participantssense
has a considerable had toofperform
urgencythe
thatfollowing
has Participants
tasks had tothe
while testing perform the following tasks while testing the
made
made every Thursday a “drop day” on which every
they Thursday
release new a “dropwebsite. These
day” on tasks
which theywere
release new basedwebsite.
curated These
on keeping top tasks
tasks were curated based onthe
Fig 1 showing keeping
brand top
logotasks Fig 1 showing the brand logo
garments
garments which has become a major event. in mind.
which has become a major event. (Noah johnson,
(Noah johnson, in mind.
2019) 2019)
Task1LVWRVHDUFKIRUDMDFNHW¿OWHUWKHUHVXOWVVHOHFWDQDS-
Task1LVWRVHDUFKIRUDMDFNHW¿OWHUWKHUHVXOWVVHOHFWDQDS-
propriate garment, and enter the garment’s propriate
productgarment,
page. and enter the garment’s product page.

Task
Task 2 is to inspect the images to see if the 2 is toisinspect
garment the images to see if the garment is a good,
a good,
Fig 1 showing the Google analytics of supreme read
website the Google
Fig 1 showing some user
analytics reviews,website
of supreme read some
and read the garment’s user reviews, and read the garment’s description.
description.

Task 3LVWR¿QGWKHVL]HDQG¿WLQIRUPDWLRQDQGFKHFNZKLFK
Task 3LVWR¿QGWKHVL]HDQG¿WLQIRUPDWLRQDQGFKHFNZKLFK
VL]H\RXVKRXOGEX\¿QGRXWDERXWWKHGHOLYHU\LQIRUPDWLRQDQG
VL]H\RXVKRXOGEX\¿QGRXWDERXWWKHGHOLYHU\LQIRUPDWLRQDQG
returns information. returns information.

7KLV¿JXUHLVVKRZLQJWKHWRWDOYLVLWVIRUVXSUHPHZHEVLWHLQODVW
7KLV¿JXUHLVVKRZLQJWKHWRWDOYLVLWVIRUVXSUHPHZHEVLWHLQODVW
PRQWKV7KH%RXQFHUDWHIRUWKHZHEVLWHLV7UDI¿F
PRQWKV7KH%RXQFHUDWHIRUWKHZHEVLWHLV7UDI¿F
overview of supremenewyork website, 2020) overview of supremenewyork website, 2020)

2 2
Home page Shop page Shop page VIEW ALL page VIEW ALL page

PRoduct page Sizing page Sizing page Shipping page Shipping page

3 3
 2.1 ANALYSIS:
2.1 ANALYSIS: HEURISTICHEURISTIC

1. Introduction 1. Introduction 2. Match between 2. Match

There’sbetween
a look There’s
Sizinga informa-
look Sizing informa-
9. Help users rec- 9. Help users rec- Sold out items Sold out item
system and real system book and realwhichbook
option, tionoption, which
is so con- tion is soognise,
con- diagnose ognise, diagnose are not shown are not show
:HFRQGXFWHGD+HXULVWLFHYDOXDWLRQWRGHWHUPLQHDQG¿QG
:HFRQGXFWHGD+HXULVWLFHYDOXDWLRQWRGHWHUPLQHDQG¿QG world world
matches the fash- matches
fusing,the fash-
there are fusing, there are
and recover from and recover from until user clicks until user clic
out the usability
out the usability problems problems ofwebsite.
of supremenewyork supremenewyork
It is an website. It is an ion catalogue expe-ionno catalogue
measurementexpe- no measurement
errors errors and goes to a and goes to
HQJLQHHULQJPHWKRGIRU¿QGLQJXVDELOLW\LVVXHVE\DOORZLQJ\RX
HQJLQHHULQJPHWKRGIRU¿QGLQJXVDELOLW\LVVXHVE\DOORZLQJ\RX rience in real worldrience
unitsinfor
real world
sizes. units for sizes. different page different pag
to judge
to judge a user interface a user
design interface
based design
on set based on set of well-proven
of well-proven (Medium) (Medium) (Critical) (Critical)
general
general principles for principles forinteraction
human-computer human-computer interaction so3.that
so that they Userthey
control and3. User control and
Can remove item- CanTheremove item-
back naviga- The back naviga-
10. Help and docu-10. Help and docu- There is no cus- There is no c
can be attended tocan be attended
as part to as part
of an iterative of an
design iterative
process. design process.
(Niels- freedom(Niels- freedom
from the basket from the
tion is basket
not ob- tion is not ob-
mentation mentation tomer support or tomer suppo
en, 2002) en, 2002) when the use when theand
vious usecon- vious and con- help. (medium) help. (mediu
changes their mind.changes
sistenttheir
in allmind.
the sistent in all the
pages. (Medium) pages. (Medium)
2. Methods 2. Methods
4. Conclusion 4. Conclusion
2.1 Setting and2.1 Setting and sample
sample 4. Consistency and4. Consistency and Nav bar is in the Nav bar is in the
My team evaluatedMy team evaluated https://www.supremenewyork.com
https://www.supremenewyork.com using a standards
using a standards bottom of the bottom The
of the The important
important usability problems usability
are problems are
Firefox web browser.
Firefox web browser. page, which is page, which
• Lackis of search• barLack of search
- effcient in usebar
w - effcient in use w
unconventional. unconventional. • No Filter featureZKLFKPDNHVWKHXVHU¶VWDVNOHVVH
• No Filter featureZKLFKPDNHVWKHXVHU¶VWDVNOHVVHI¿FLHQW
(Minor) (Minor) • Sizing and delivery
• Sizing and delivery
information information
is mentioned is mentioned in a d
in a different
2.2 Data collection
2.2 Data collection
5. Error prevention5. Error prevention There is no prior There is nopagepriormakes user to page makes and
remember userthen
to remember
select theand then select the p
product
We mainly focusedWe themainly
analysis focused
on thethe analysis on
Homepage, the Homepage, categories
categories
intimation mes- intimation mes-
by recalling it. by recalling it.
page, product pagepage, product page
and checkout andare
as they checkout as they are often connected
often connected
sage, when the sage, when the
to thebytop
to the top tasks carried thetasks carried
users while by the users
shopping while shopping in e-com-
in e-com-
user is deleting user is deleting
merce websites
merce websites (McGovern, 2018).(McGovern,
To evaluate2018).
we took Tothe
evaluate we took the
products from the products 5.from
Redesign
the 5. Redesign recommendations
recommendations
reference of Jakobreference
Neilson’s of 10Jakob Neilson’s
Usability 10 Usability
principles for Heuris- principles for Heuris-
basket. (Minor) basket. (Minor)
tics.(Nielsen, 1994)tics.(Nielsen, 1994)
6. Recognition rath-6. Recognition rath- Sizing & delivery Sizing &Considering Considering
delivery the brand’s the brand’s
visual identity whichvisual identity and
is boldness which is boldness
2.3 Data Analysis 2.3 Data Analysis er than recall er than recall is in a different is in a different simplicity,
simplicity, the designers thepreserve
should designers theshould preserve
brand’s color andthe brand’s col
After conducting theAfter conducting
Heuristic the Heuristic
analysis, analysis,
I discovered the topI discovered
3 the top 3 page makes user page makes maintain maintain
usersimple layout givingsimple
more layout giving
attention more
to the attention to the produ
products.
important usability important
problems usability problems
and categorized and
the testcategorized
results the test results to remember and to remember and • ,PSURYHGLVFRYHUDELOLW\RISURGXFWV6HDUFKEDU¿OWH
• ,PSURYHGLVFRYHUDELOLW\RISURGXFWV6HDUFKEDU¿OWHUDQG
into Minor, moderateintoand
Minor, moderate
critical based onandtheir
critical based
severity to on
ad-their severity to ad- then select the then selectwishlist
the amke taskswishlist
easier.amke tasks easier.
dress. dress. product (Medium) product• (Medium) • and
Include the sizing Include the sizing
delivery and delivery
information on the information
product on the pro
page itself. page itself.
7. Flexibility and 7. Flexibility and 1.There is no 1.There is no
• Make the sizing• information
Make the more
sizingcomprehensible.
information more comprehensible.
HI¿FLHQF\RIXVH HI¿FLHQF\RIXVH search bar(criti- search bar(criti-
3. Results 3. Results • Show the sold out • products
Show theclearly
sold out products the
preventing clearly
userpreventing
to the us
FDO¿OWHUZLVKOLVW FDO¿OWHUZLVKOLVW
Table 1 shows
Table 1 shows the Heuristic the Heuristic evaluation
evaluation click
click on it to go to the on it topage.
product go to the product page.
and sorting of and sorting of
items that makes items that makes
Heuristic Heuristic
Positive Positive
Negative Negative WDVNVHI¿FLHQW WDVNVHI¿FLHQW
1.Visibility of sys- 1.Visibility of sys-
A red colour selec-A red
No colour selec-
visual cues No visual cues
tem status temtion
status
is displayed tionwhen
is displayed
the point- Aesthetic and 8. Aesthetic
when the8.point- Mention ofand
new Mention of new
on the home page on er theishome
placedpage
on minimalist
er is placed on design minimalist design
arrivals on the shoparrivals on the shop
when hovered on when the hovered on
shop screen the shop screen screen. screen.
the categories. theproducts.
categories.
(Medi- products. (Medi-
um) um)

4 4
The “new” label The
has “new” label has No search bar and No search bar and
very low contrastvery low contrast filter features availa-
filter features availa-
ble ble

If user removes any item

If user from any item from
removes
basket, there is no option
basket, to save/
there is no option to save/
view it anywhere. He/she
view has to He/she has to
it anywhere.
search for the item again.
search for the item again.

User
User can only get can only
to know thatget No visual
thisto know that this No visual
cues when user cues when user
garment
garment is sold out hovers
is soldtoout after
after going going to the hovers
over productover the product
the next page the next page

Delivery
Delivery information is oninformation is on auser
a different page, different
has topage, user has to
remember them remember
as it is not them as itwhile
showing is notchecking
showingout.while checking out.
Table 2 shows the ranking of threethe
Table 2 shows ranking problems
important of three important problems

No clear measurement
No clearmetrics are followed
measurement andare
metrics sizing
followed and sizing
information is oninformation
a different page.
is on a different page.

5 5
 2.2 ANALYSIS: BIOMETRICS
2.2 ANALYSIS: BIOMETRICS
1. Introduction 1. Introduction 3. Conclusion
WZR¿[DWLRQLQWKHDUHDRILQWHUHVWVKRSRSWLRQZKLFKLVYHU\
WZR¿[DWLRQLQWKHDUHDRILQWHUHVWVKRSRSWLRQZKLFKLVYHU\ 3. Conclusion
OHVVHUFRPSDUHGWRWRWDOQXPEHURI¿[DWLRQVWKURXJKRXWWKH
OHVVHUFRPSDUHGWRWRWDOQXPEHURI¿[DWLRQVWKURXJKRXWWKH Following the analysis of the participant’s Following scanthepath analysis
it canofbethe participant’s s
Biometrics are the measurements Biometrics
that are used aretothe measurements that
understand page which
are usedisto15. This is indicatingpage
understand which is 15.
participant not This
focused is indicating
or participant that
concluded is not thefocused
presentorversionconcluded that theofpresent
of the UI design supreme version of the U
user’s emotions, thoughts and theiruser’s emotions,
intensities doing theand theirattracted
whilethoughts intensities to while
shop doing
option.the attracted to shop option. ZHEVLWHODFNVHI¿FLHQWYLVXDOVHDUFKEHKDY
ZHEVLWHODFNVHI¿FLHQWYLVXDOVHDUFKEHKDYLRXUZKLFKLVPDGH
usabilitydata
usability test. It can provide very accurate test.as It can provide very accurate data as it is sensitive
it is sensitive the participant to abort the task at hand. the participant to abort the task at hand.
in showing obscure things even to in theshowing
user or obscure
researcher. things Foruser
Eyeeven to the shop orpage
researcher. Eye For shop page The display design elements and their The organisation
display design canelements
be and their orga
tracking is the most commonly used tracking
by the is UXthe most commonly
designers to usedScanpath
by the UX spatial lengthto- The scanScanpath
designers path spatial spatial
length length
is very- The scan improved
path spatial by length is very psychology
implementing improved
and UI byprinciples.
implementing psychology and
track the users eye movements and track the userswhich
understand eye movements
parts andlonger than the
understand which parts longer than the
of the user
of the user interface is receiving attention andinterface
which parts is receiving
are expected
attention andorwhich
optimalparts are length.expected or optimal spatial length.
spatial
demanding
demanding more cognitive efforts.(Schiessl et more cognitive efforts.(Schiessl
al., 2003) et al., 2003) 4.Redesign recommendations
7KHVFDQSDWKLVORQJHUDVLWKDVPRUHQXPEHURI¿[DWLRQVDQG
7KHVFDQSDWKLVORQJHUDVLWKDVPRUHQXPEHURI¿[DWLRQVDQG 4.Redesign recommendations
regressive saccades. regressive saccades.
1.1.1 Heading 3 1.1.1 Heading 3 Home page Home page
Scan path direction – The optimal direction Scan pathisdirection
going to – the The optimal direction
•As per the is going to themost of the users
top tasks •As percare theabout
top tasks
shopping,most of the users car
For Homepage For Homepage area of interest “carousel” or to thearea “viewofall”
interest
option. “carousel”
But the or to the delivery
“view all”information
option. Butorthe delivery they
about the products information
want to or about the products
buy,
Scan path spatial length – The scan Scanpathpath spatial
spatial lengthlength – The scanparticipant
is longer path spatial had goneistolonger
length participant
different directions likehad gone
to the date to different
and directions
but on the likehome
to thepagedate there
and are unpopular
but on the sethome page there
of options whichare unpopular
than the than the ¿QDOO\WRWKHEURZVHU¶VEDFNRSWLRQLQGLFDWLQJWKHSHUVRQZDV
¿QDOO\WRWKHEURZVHU¶VEDFNRSWLRQLQGLFDWLQJWKHSHUVRQZDV are not related to the top tasks likeare not related
“random”, “news”,to the top tasks like “random
”mailing
expected or optimal spatial length.expected or optimal spatial length. lost and was unable to locate the area lost and was unable to locate the area
of interest. list” of
andinterest.
“fall/winter preview” are groupedlist” andtogether
“fall/winter andpreview”
placed are grouped t
7KHVFDQSDWKLVORQJHUDVLWKDVPRUHQXPEHURI¿[DWLRQV
7KHVFDQSDWKLVORQJHUDVLWKDVPRUHQXPEHURI¿[DWLRQV in proximity with the important “shop” in proximity with theprinciple
option(Gestalt’s important “shop” optio
Regressive saccades- There are atleast Regressive saccades-
5 regressive There are atleast
saccades 5 regressive
of proximity). This saccades
makes the user of feelproximity).
those options This makes
belongsthe user feel thos
Scan pathisdirection
Scan path direction – The optimal direction going to – theThe back andisforth
optimal direction
area going going
to the from
area back to
the carousel and forth going
different from the carousel
directions to the to same
different directions
category, which is the to the same
cause for more category,
number which
of is the cause fo
of interest(shop) from the supremeoflogo.interest(shop) from the had
But the participant supreme in the But
logo. scan thepath indicating
participant had in the scan
the organisation and path indicating the organisation
information and information
¿[DWLRQVDQGKHQFHWKHFRQIXVLRQ ¿[DWLRQVDQGKHQFHWKHFRQIXVLRQ
gone
gone to different directions indicating thetoperson
differentwas directions
lost and indicating architecture
the personiswas verylost
unsatisfactory.
and architecture is very unsatisfactory. •The font size and weight can also•The font size and
be enhanced weight
to bigger can also be enha
ones
was unable
was unable to locate the shop option(area to locate the shop option(area of interest).
of interest). WRPDNHWKHPYLVXDOO\HI¿FLHQW WRPDNHWKHPYLVXDOO\HI¿FLHQW
7RWDOQXPEHURI¿[DWLRQV7KHWRWDOQXPEHURI¿[DWLRQVLQ
7RWDOQXPEHURI¿[DWLRQV7KHWRWDOQXPEHURI¿[DWLRQVLQ •All the options in the primary navigation •All themenu
options caninbe the primary navigation m
Regressive saccades – There are Regressive saccades – There are atleast
atleast 3 regressive the scan path on the shop page are
3 regressive the scan
22, whichpathis on the shop
a very large page areassociated
22, which is witha very
iconslarge
by following associated
the dual coding with icons
theory.by following the dual
saccades
saccades back from mailing list option back from
to lookbook and mailing
to shop list option to lookbook and to shop QXPEHULQGLFDWLQJOHVVHI¿FLHQWYLVXDOVHDUFKEHFDXVHWKH
QXPEHULQGLFDWLQJOHVVHI¿FLHQWYLVXDOVHDUFKEHFDXVHWKH
option
option in the scan path indicating the in the scan
organisation of path
theseindicating the participant
organisation is unable
of these participant
to select any jacket from is theunable
carousel to select
and any jacket
Shop frompagethe carousel and Shop page
options to
options is unsatisfactory, which is leading is the
unsatisfactory,
lack of clarity which insteadtohe/she
to is leading the lack went back to
of clarity instead
to the home page.he/she went back to the home •Thepage.
carousel in the center of the page •The needs
carousel to inbethegivencenter of the page nee
the participant. the participant. names along with the images of the names along withcoding
garments(Dual the images of the garme
)L[DWLRQGXUDWLRQ7KHUHDUHORQJHU¿[DWLRQGXUDWLRQVRXW
)L[DWLRQGXUDWLRQ7KHUHDUHORQJHU¿[DWLRQGXUDWLRQVRXW theory). theory).
of which 3 are in the area of interest
7RWDOQXPEHURI¿[DWLRQV7KHWRWDOQXPEHURI¿[DWLRQVLQ
7RWDOQXPEHURI¿[DWLRQV7KHWRWDOQXPEHURI¿[DWLRQVLQ of and
which 3 are
1 is in the
outside it. area
Evenof interest•Theand images
1 is outside in theit.carousel
Even are placed •The images
very close in the carousel are placed ve
to each
the scan path on the homepage are the15,scan
whichpath is on
largetheand 15, which is large and WKRXJKWKHUHDUH¿[DWLRQVLQWKHDUHDRILQWHUHVWFDXJKWWKH
homepage areWKRXJKWKHUHDUH¿[DWLRQVLQWKHDUHDRILQWHUHVWFDXJKWWKH other without providing any white space other without
betweenprovidingthem, making any white space be
participant’s attention, still he/she got
LQGLFDWLQJOHVVHI¿FLHQWYLVXDOVHDUFKEHFDXVHWKHSDUWLFLSDQWLV
LQGLFDWLQJOHVVHI¿FLHQWYLVXDOVHDUFKEHFDXVHWKHSDUWLFLSDQWLV participant’s
confused attention,
and clicked stillon
he/she got confused
it look and clicked
like cluttered on
and demanding it look
morelike clutteredload
congnitive andon demanding more c
unable
unable to focus on the area of interest for to focustask.
his/her on the area of interest the for
back button
his/her leaving the task which
task. the back button
indicates theleaving the task which
participant indicates the
users(Gestalt participant
principle users(Gestalt
of proximity).It can reduceprinciple of proximity).It can
the regressive
couldn’t process the information. couldn’t process the information. VDFFDGHVDQGORQJHU¿[DWLRQGXUDWLRQV VDFFDGHVDQGORQJHU¿[DWLRQGXUDWLRQV
)L[DWLRQGXUDWLRQ7KHUHDUHORQJHU¿[DWLRQGXUDWLRQVRXWVLGH
)L[DWLRQGXUDWLRQ7KHUHDUHORQJHU¿[DWLRQGXUDWLRQVRXWVLGH •Search option can also be implemented •Search option
which can also
makes be implemented w
the users
the participant
the area of interest indicating that the area of interest indicating
is feeling hard that the participant is feeling hard 7RWDOQXPEHURI¿[DWLRQLQWKHDUHDRILQWHUHVW7KHUHDUH
7RWDOQXPEHURI¿[DWLRQLQWKHDUHDRILQWHUHVW7KHUHDUH VHDUFKWDVNDQGGLVFRYHUDELOLW\RISURGXFWV
VHDUFKWDVNDQGGLVFRYHUDELOLW\RISURGXFWVPXFKHI¿FLHQWWK
in performing the task(in this case in performing
selecting the task(in
the right option this case selecting the right option ¿[DWLRQVLQWKHDUHDRILQWHUHVWZKLFKLVOHVVFRPSDUHGWRWRWDO
¿[DWLRQVLQWKHDUHDRILQWHUHVWZKLFKLVOHVVFRPSDUHGWRWRWDO +HXULVWLFÀH[LELOLW\DQGHI¿FLHQF\RIXVH7
+HXULVWLFÀH[LELOLW\DQGHI¿FLHQF\RIXVH7KHUHQRRWKHU
“shop”). “shop”). QXPEHURI¿[DWLRQVWKURXJKRXWWKHSDJHZKLFKLV7KLVLV
QXPEHURI¿[DWLRQVWKURXJKRXWWKHSDJHZKLFKLV7KLVLV secondary navigation also on the website. secondary navigation also on the website.
indicating participant couldn’t able indicatingto comprehend participant
the showncouldn’t able to comprehend the shown
information.
7RWDOQXPEHURI¿[DWLRQLQWKHDUHDRILQWHUHVW7KHUHDUHRQO\
7RWDOQXPEHURI¿[DWLRQLQWKHDUHDRILQWHUHVW7KHUHDUHRQO\ information.

6 6
ptimal scanpath The optimal scanpath is longer and This scanpath is 7KHQXPEHURI¿[DWLRQVDUHPRUHRXWVLGHWKHDUHDRI
This scanpath longer and 7KHQXPEHURI¿[DWLRQVDUHPRUHRXWVLGHWKHDUHDRI
LQWHUHVWLQGLFDWLQJWKHODFNRIHI¿FLHQF\RIYLVXDOVHDUFK
LQWHUHVWLQGLFDWLQJWKHODFNRIHI¿FLHQF\RIYLVXDOVHDUFK
on should be from directionhas manybedirections
should from which is has many directions which is
because the user was not because
able to focusthe
onuser was at
the task not able to focus on the task at
me logo to the shop supremenotlogotowards
to the the area of inter- not towards the area of inter-
shop
hand. hand.
in the list. option inest.
the list. est.

7KHODUJH¿[DWLRQRQWKHEURZVHUEDFNEXWWRQDQG
7KHODUJH¿[DWLRQRQWKHEURZVHUEDFNEXWWRQDQG
PRUHQXPEHURI¿[DWLRQVRXWLVLGHWKH$2/LQGLFDWLQJ
PRUHQXPEHURI¿[DWLRQVRXWLVLGHWKH$2/LQGLFDWLQJ
thegiven.
the user could’nt follow the task user could’nt follow
Therefore he/ the task given. Therefore he/
shethe
she aborted the task by clicking aborted the task
back button andby clicking the back button and
returned
returned to the homepage. It shows to website
that the homepage.
has It shows that website has
to be improved a lot by givingto be improved
importance a lot by giving importance to users
to users
top tasks. top tasks.

7 7
2.3 ANALYSIS: SATISFACTION 2.3 ANALYSIS: SATISFACTION

1. Introduction 1. Introduction
The Kolmogorov- Smirnov test was conducted to know the The full transcripts
The Kolmogorov- Smirnov were
testanalysed which were
was conducted recorded
to know the while The full tran
Satisfaction of the user was found to be important in whether
Satisfaction of the data
user is
wasnormal
foundortonon-normal.
be important in whetherparticipants
the data iswere performing
normal think aloud on (Supremenewyork participants
or non-normal.
Result-whether
determining whether a website is good in terms of usability. Thedetermining The achieved
a websitep-value in the
is good KS test
in terms of was .085 The
usability. which Result-website, 2020). Thematic
The achieved p-value inanalysis
the KS test waswasconducted to gain
.085 which website, 20
greater usability provides good impact on satisfaction therefore greaterLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\6RWKHQH[W
usability provides good impact on satisfaction therefore insights into the preferences/desires of users while performing insights into
LQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\6RWKHQH[W
conducted
increasing the trust and loyalty of the user towards a website. increasing was
the trust “t independent
and loyalty of thetest”.
user towards a website. RQOLQHVKRSSLQJDQGWR¿QGRXWWKHFKDOOHQJHVWKH\DUHIDFLQJ
conducted was “t independent test”. RQOLQHVKRS
An independent
So, it was found that user trust was partially dependent on the So, it was found that usermeanstrustt-test
was was conducted
partially dependentto compare
on the the while usingmeans
An independent the website.
t-test was conducted to compare the while using
degree of consumer website satisfaction.(Flavián, Guinalíu degreeSUS scores onwebsite
of consumer two online fashion retail websites
satisfaction.(Flavián, (Website
Guinalíu SUS scores on two online fashion retail websites (Website
and Gurrea, 2006). Satisfaction can be measured by both 1 = www.supremenewyork.com;
and Gurrea, 2006). Satisfaction can beWebsite measured 2 =byhttps://www.
both 3.2 Report
1 = www.supremenewyork.com; Website 2 = https://www. 3.2 Repor
Quantitative rating scales and Qualitative methods. pullandbear.com/).
Quantitative rating scales and Qualitative methods. pullandbear.com/).
The test revealed there wasVWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH Doing
The test revealed there wasVWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH Doing
2. Quantitative methods-SUS scale 2. Quantitative
in SUS scores methods-SUS
between Supreme scale
(M= 37.1,SD= 22.54) and in SUSThe mostbetween
scores frequentSupreme
activity undertaken
(M= 37.1,SD= throughout the think
22.54) and The most fr
SUS rating scale (Brooke, 1996) was chosen to measure the SUS rating Pull &scale
Bear (Brooke,
(M= 69.9,1996)
SD= was 22.54); t(74) to
chosen = -11.94,
measure p=the
0.00001, Pull &aloud
Bear (M= exercise
69.9,was
SD=clicking
22.54);on the =links
t(74) or buttons(30
-11.94, p= 0.00001, aloud exerc
satisfaction in quantitaive method. two tailed.
satisfaction The magnitude
in quantitaive method. of difference in the means (Mean instances).
two tailed. The next of
The magnitude frequent
differenceactivity
in theusers
meansdid was
(Mean to search instances).
difference =32.8) was large (eta squared 0.49). for a =32.8)
difference jacket(15 wasinstances).
large (eta For
squaredexample,
0.49).one participant stated for a jacket(
2.1 Data collection 2.1 Data collection ³,¶GOLNHWRFOLFNDQGVHH,ILW¶VDMDFNHW´ ³,¶GOLNHWRF
We collected the data of SUS scores with 78 students of our The results
We collected revealed
the data of SUSaverage
scoresSUS
withscore of supreme
78 students of ouris 37.1 The results revealed average SUS score of supreme is 37.1
class by using a Google forms survey which has 10 questions (<50
class by score
using is unacceptable)
a Google which
forms survey is very
which hasmuch lower than
10 questions Thinking
(<50 score is unacceptable) which is very much lower than Thinking
regarding the usability of websites. All the students had average
regarding SUS score
the usability of Pull & All
of websites. Bearthewhich is 70had
students indicating the averageTheSUS most common
score thought
of Pull & Bearthewhichparticipants had during
is 70 indicating the the task The most co
completed set of tasks like selecting a garment, checking the usersset
completed hadofatasks
bad experience while
like selecting using supreme
a garment, checking website.
the users was
had being
a bad unsure
experienceabout the content(17
while using supreme instances).
website.The other was being u
VL]H¿WHWFRQJLYHQZHEVLWHVEHIRUHWDNLQJWKLVVXUYH\ VL]H¿WHWFRQJLYHQZHEVLWHVEHIRUHWDNLQJWKLVVXUYH\ thoughts participants mentioned were feeling the content is not thoughts pa
Investigating Individual scale scores appropriate
Investigating for whatscale
Individual they are looking(10 instances),confused appropriate
scores
2.2 Data analysis 2.2 Data analysis
Comparing Supreme to Pull & Bear (See Bar chart 2) about Supreme
Comparing sizing information(9
to Pull & Bearinstances),
(See Barunable
chart 2)to differentiate about sizing
The SUS scores for each website were calculated by using Supreme
The SUS scoreswas foundwebsite
for each to be lacking in followingbycharacteristics
were calculated using Supremesoldwasout products(8
found to beinstances), Hard to read
lacking in following text due to small sold out pro
characteristics
a SUS calculator I ran some statistics on the SUS scores to a SUSresulting in Ilower
calculator SUS statistics
ran some score. on the SUS scores to IRQWVL]HLQVWDQFHV/HVVIUHTXHQWWKRXJKWVZHUHZDQWLQJ
resulting in lower SUS score. IRQWVL]HL
• /RZHUIUHTXHQWXVH
understand how Supreme is performing when compared to Pull understand how Supreme is performing when compared to Pull WR¿OWHUWKHFRQWHQWLQVWDQFHV:DQWLQJIRUDVHDUFKEDU
• /RZHUIUHTXHQWXVH WR¿OWHUWKHF
& Bear. • More complex to use
& Bear. • More instances).
complexFor example, one participant stated “,I,FOLFNRQWKLVinstances).
to use
• Harder to use LWPLJKWEULQJPHEDFN$KK,DPQRWVXUHZKHUH,DPQRZ´.
• Harder to use LWPLJKWEULQ
2.3 Report • Requiring more technical support
2.3 Report • Requiring more technical support
• Functions need better integration with site Feelingneed better integration with site
• Functions Feeling
Bar chart 1 comparing SUS scores between Supreme and Pull &Bar chart
• Harder to learn
1 comparing SUS scores between Supreme and Pull & No positive
• Harder to learnfeelings were detected throughout the website. No positive
Bear Bear • 8VHUV¿QGLWDZNZDUGWRXVH 2QO\QHJDWLYHIHHOLQJVZHUHGHWHFWHGVSHFL¿FDOO\DQQR\DQFH 2QO\QHJDWL
• 8VHUV¿QGLWDZNZDUGWRXVH
• 8VHUVKDYHOHVVFRQ¿GHQFHXVLQJWKHV\VWHP (9 instances) and bored(2 instances). For example, participant (9 instances
• 8VHUVKDYHOHVVFRQ¿GHQFHXVLQJWKHV\VWHP
• Greater learning curve with Supreme once said
• Greater ³,DPTXLWHDQQR\HGZK\ZRXOGLWEHKHUHLIZDVVROG
learning curve with Supreme once said ³,
RXWFRPSOHWHO\´ RXWFRPSOHW
3. Qualitative methods-Think Aloud 3. Qualitative methods-Think Aloud
4. Conclusion 4. Conclu
Think Aloud during the (Jaspers, M.W.M., Steen, T., van den Think Aloud during the (Jaspers, M.W.M., Steen, T., van den
Bos, C. and Geenen, 2004) was chosen to measure the Bos, C.Asand
shown in the2004)
Geenen, Pie chart
was1,chosen
In 25%toofmeasure
all the instances
the As shown in
satisfaction in qualitative method. participants
satisfaction were not
in qualitative sure about the content present on the
method. participants
website. For example ³,I,FOLFNRQWKLVLWPLJKWEULQJPHEDFN website. Fo
3.1 Data collection and analysis 3.1 Data collection and analysis This clearly shows it is an
$KK,DPQRWVXUHZKHUH,DPQRZ´. $KK,DPQ

8 8
KH XVDELOLW\ÀDZDQGQHHGVWREHFRUUHFWHGDVLWZDVWKH
Bar chart 2 comparing individual SUS scale scores between supreme and2 comparing
Bar chart individualthe
Table 1 showing SUS scale scores
recurrence between
of themes supreme
in the and
Think Aloud Table 1 showing the recurrence of themes in the Think Aloud
most recurred pattern.
Pull & Bear Pull & Bear protocol protocol
In 14% of all the instances, participants felt that
the content/information shown on the website was
not appropriate to what they are looking for. For
RI example one participant said ³7KHUH¶VDZKROHORDGRI
H XQQHFHVVDU\LQIRUPDWLRQKHUHEXW,ZDQWWRMXVWVHH
KRZPDQ\GD\VLWZLOOWDNHWRGHOLYHU´

WKH $JDLQLQLQVWDQFHVSDUWLFLSDQWVFRXOGQRW¿QGWKH
n proper size of the garment and felt sizing information
was not helpful. For example
7KHVL]LQJLVRGGWKHUHLVQRRWKHUPHWULFVOLNH
DWLRQ FHQWLPHWUHV«,FDQ¶WVHHPWR¿QGDQ\PRUHLQIRUPDWLRQ
e RQLW It caused participants to feel annoyed in some
cases.

tiate 12% of the instances were about Unable to differentiate

sold out products from the in stock products.
RQO\ 3DUWLFLSDQWVKDGWRFOLFNDQG¿QGRXWLWZDVVROGRXWRQO\
e in the product page which led to annoyance in some
s Piecases.10% of thepercentages
chart 1 showing instances were about occured
of themes participants
in Think Aloud pro-
Pie chart 1 showing percentages of themes occured in Think Aloud pro-
being unable to the content from the website like
tocol tocol
ize product descriptions, delivery info etc.. as the font size
LVVPDOO2QHSDUWLFLSDQWVDLG
RQ ³7KHWH[WLVVRVPDOO,FDQ¶W¿QGWKHUHWXUQLQIRUPDWLRQ
DQ\ZKHUH´.

9 9
2.4 ANALYSIS: PERFORMANCE2.4 ANALYSIS:
2.4PERFORMANCE
ANALYSIS: PERFORMANCE

1. Introduction 1. Introduction 1. Introduction

46.83, SD= 22.54); t(11) = -1.96, p= 0.0625, two tailed. The Task success
46.83, SD= 22.54); t(11)
46.83, analysis
= -1.96,
SD=p= for Task
22.54);
0.0625,
t(11) 2 tailed.
two= p= 0.0625, twoTask
-1.96, The success
tailed. The ana
difference in the means (Mean difference = 21.92) difference in theThemeans
resultdifference
of Kolmogorov-
(Mean difference Smirnov
in the means
= 21.92) test revealed
(Mean differencethe p-value
The result of Kolmo
= 21.92)
Performance evaluation of a website plays a crucial role Performance
in evaluation Performance
of a websiteevaluation
plays a crucial role in plays a crucial role in was .00003 which shows the data of both the groups arewas .00003 which s
of a website
retaining existing users and to gain new users as well. For Taskusers
retaining existing time analysis
retaining
and to gain for
existing
newTask users2 and
users as well.to gain
Fornew users as Task
well.time VLJQL¿FDQWO\GLIIHUHQW
Foranalysis forTask
Tasktime2 analysis for Task 2 VLJQL¿FDQWO\GLIIHUHQ
example If Supreme has lower performance in task time,example If Supreme The KShas test achieved
example
lower p-value has
performance
If Supreme .032
in taskwhich
lower time,means the groups
performance The are
in task KS
time, Mann Whitney
test achieved The KStest
p-value testrevealed
.032 achieved there
which means p-value was.032
the no statistically
groups which
are means Mann Whitney
the groups aretes
completion and etc. when compared to it’s competitor website,completion and VLJQL¿FDQWO\GLIIHUHQW7KLVSURYLGHVJRRGHYLGHQFHWKDW\RXU
etc. when
completion
compared andtoetc. it’s when
competitorcomparedwebsite,to it’s competitor VLJQL¿FDQWGLIIHUHQFH
website, in the task success for checking products
VLJQL¿FDQWO\GLIIHUHQW7KLVSURYLGHVJRRGHYLGHQFHWKDW\RXU
VLJQL¿FDQWO\GLIIHUHQW7KLVSURYLGHVJRRGHYLGHQFHWKDW\RXU VLJQL¿FDQWGLIIHUHQF
then chances would be more for users to leave Supremethen andchancesdata would is be
not normally
then
more chances distributed.
for users wouldto leave
be more
Supreme and to leave data
for users is notand
Supreme imagesdistributed.
normally and
data description
is not normallybetween Supreme (Md= 66, n=12)
distributed. images
and and descrip
prefer it’s competitor. Mann-Whitney
prefer it’s competitor. prefer it’sU test revealed there was no statisticallyMann-Whitney
competitor. PullU&test
Bear (Md= 66,
Mann-Whitney
revealed n= was
there 12), U=56.5,
U test
no revealed z= -0.86
statisticallythere and
wasp=no 0.38
Pull & Bear (Md= 6
statistically
VLJQL¿FDQFHGLIIHUHQFH in the task time for checking product’s VLJQL¿FDQFHGLIIHUHQFHVLJQL¿FDQFHGLIIHUHQFH
in the task time for checking in the task
product’s
time for checking product’s
2. Data collection and analysis 2. Data collection
images for 2.
and Dataanalysis
reading collection
description between and analysis Supreme (Md= 42, images for reading description
images for between
readingSupreme
description (Md= between
42, Supreme (Md= 42,
n=12) and Pull & Bear (Md= 60, n= 12), U=56, z= -0.89 and n=12)p=and Pull & Bear n=12) (Md= 60, andn= Pull
12),
& Bear
U=56,(Md= z= -0.89
60, n= and12),
p=U=56, z= -0.89 and p=
We collected the data required for performance evaluation Weincollected 0.373.
the data required
We collected for performance
the data required evaluation
for performance
in 0.373.
evaluation in 0.373.
our groups by setting some user tasks for everyone. These our groups by setting some our groups
user tasksby setting
for everyone.
some user These
tasks for everyone. These
tasks are formulated based on the top tasks survey data.tasks are formulated Task time basedanalysis
tasks on
arethe for
topTask
formulated tasks3based
surveyondata. the top tasks survey Taskdata.
time analysis forTask Tasktime3 analysis for Task 3
The Kolmogorov- Smirnov test was conducted to know the The Kolmogorov- Smirnov The test
Kolmogorov-
was conductedSmirnov to test
knowwas theconducted to know the
Task1LVWRVHDUFKIRUDMDFNHW¿OWHUVHOHFWDQGHQWHULW¶VSDJH
Task1LVWRVHDUFKIRUDMDFNHW¿OWHUVHOHFWDQGHQWHULW¶VSDJH
whether the Task1LVWRVHDUFKIRUDMDFNHW¿OWHUVHOHFWDQGHQWHULW¶VSDJH
data is normal or non-normal. whether the data is normal whetheror non-normal.
the data is normal or non-normal.
Task 2 is to inspect the product’s images, read some user Taskre- 2 is to inspect
Result-the Task
The 2 is toimages,
product’s
p-value inspect
was .049readthe
whichproduct’s
some meansuser
images,
re-groups
the readaresome user
Result- There-p-value was Result-
.049 which
The p-value
meanswas the .049
groupswhich
are means the groups are
views, and read the garment’s description. views, and read the garment’s
views, and description.
read the garment’s description.
VLJQL¿FDQWO\GLIIHUHQW7KLVSURYLGHVJRRGHYLGHQFHWKDW\RXU Task success analysis for Task 3
VLJQL¿FDQWO\GLIIHUHQW7KLVSURYLGHVJRRGHYLGHQFHWKDW\RXU
VLJQL¿FDQWO\GLIIHUHQW7KLVSURYLGHVJRRGHYLGHQFHWKDW\RXU Task success ana
Task 3LVWR¿QGWKHVL]HLQIRUPDWLRQDQGFKHFNWKHVL]H\RXTask 3LVWR¿QGWKHVL]HLQIRUPDWLRQDQGFKHFNWKHVL]H\RX
Task 3LVWR¿QGWKHVL]HLQIRUPDWLRQDQGFKHFNWKHVL]H\RX
data is not normally distributed. The result
data is not normally of Kolmogorov-
distributed.
data is not normally Smirnov test revealed the p-value
distributed. The result of Kolmo
VKRXOGEX\¿QGRXWGHOLYHU\DQGUHWXUQVLQIRUPDWLRQ VKRXOGEX\¿QGRXWGHOLYHU\DQGUHWXUQVLQIRUPDWLRQ
VKRXOGEX\¿QGRXWGHOLYHU\DQGUHWXUQVLQIRUPDWLRQ
Mann-Whitney U test revealed there was no statisticallyMann-Whitney wasU .0001 which shows
testMann-Whitney
revealed there the data
U test
was of both the
no revealed
statisticallytheregroups
was noarestatistically
was .0001 which sh
To compare the Supreme’s performance with Pull&Bear,To wecompare the VLJQL¿FDQFHLQWKHWDVNWLPHIRUFKHFNLQJVL]H ¿WGHOLYHU\DQG
Supreme’s
To compare
performance the Supreme’s
with Pull&Bear,performance
we with Pull&Bear, we VLJQL¿FDQWO\GLIIHUHQW
VLJQL¿FDQFHLQWKHWDVNWLPHIRUFKHFNLQJVL]H ¿WGHOLYHU\DQG VLJQL¿FDQWO\GLIIHUHQ
VLJQL¿FDQFHLQWKHWDVNWLPHIRUFKHFNLQJVL]H ¿WGHOLYHU\DQG
have taken some metrics have taken some returns information
have takenbetween
metrics some metrics Supreme (Md= 73.5, n=12) returns and Mann-Whitney
information between Uinformation
returnsSupreme test revealed
(Md= theren=12)
between
73.5, was no
Supreme (Md= 73.5,Mann-Whitney
andstatistically n=12) and U t
1.Task Time 1.Task Time Pull & Bear (Md=Time
1.Task 52, n= 12), U=20, z= 2.97 and p= 0.254. Pull & Bear (Md= VLJQL¿FDQWGLIIHUHQFHLQWKHWDVNVXFFHVVIRUFKHFNLQJVL]H ¿W
52, n=Pull12),
& Bear
U=20,(Md= z= 2.97
52, n=and12), 0.254. z= 2.97 andVLJQL¿FDQWGLIIHUHQF
p= U=20, p= 0.254.
2.Task completion 2.Task completion 2.Task completion delivery and returns information between Supreme (Md=delivery 100, and return
3.Errors made 3.Errors made2.Task success 3.Errorsanalysis
made for Task 1 2.Task success n=12) and
analysis Pull
2.Taskfor&success
Bear 1(Md=
Task 100, n=for
analysis 12), U=62,
Task 1 z= 0.54 n=12)
and p=and Pull & B
/RVWQHVV /RVWQHVV The result/RVWQHVV of Kolmogorov- Smirnov test revealed the p-value 0.58.
The result of Kolmogorov- The Smirnov
result of test Kolmogorov-
revealed Smirnov
the p-value test revealed0.58.
the p-value
was .00001 which shows the data of both the groups arewas .00001 which shows wasthe .00001
data of which
bothshows
the groupsthe dataare of both the groups are
1.Task time analysis for task 1 VLJQL¿FDQWO\GLIIHUHQW
1.Task time analysis for
1.Task
tasktime 1 analysis for task 1 VLJQL¿FDQWO\GLIIHUHQW VLJQL¿FDQWO\GLIIHUHQW
To understand if the data of task times of both Supreme To andunderstandMann if theWhitney
data testtimes
To understand
of task revealed
if of
theboththere
data ofwas
Supremetasknotimes
statistically
and Mann Whitney
of both Supreme and test revealedMann Whitneythere was test
no revealed
statisticallythere was no statistically
Pull&Bear are normal or non-normal, I ran the Kolmogorov- Pull&Bear areVLJQL¿FDQWGLIIHUHQFH
normal or Pull&Bear
non-normal, in the
are normal
I ran task
theorsuccess
Kolmogorov-
non-normal, for searching
I ran theandVLJQL¿FDQWGLIIHUHQFH inVLJQL¿FDQWGLIIHUHQFH
Kolmogorov- the task success forin searching
the task success
and for searching and
Smirnov Test of Normality. Smirnov Test ¿OWHULQJDJDUPHQWEHWZHHQ6XSUHPH0G
of Normality.
Smirnov Test of Normality. Q DQG3XOO
¿OWHULQJDJDUPHQWEHWZHHQ6XSUHPH0G
¿OWHULQJDJDUPHQWEHWZHHQ6XSUHPH0G
Q DQG3XOO Q DQG3XOO
Result - The p-value is .90 which is greater than 0.05. This & Bear (Md=
Result - The p-value .90 100,
isResult which n=is12),
- The p-value
greater U=48, is
thanz=0.05.
.90 -1.35 and
whichThis p= 0.173.
is greater than&0.05.
Bear This
(Md= 100, n= 12), & BearU=48, (Md= z= 100,
-1.35n=and12),p=U=48,
0.173.z= -1.35 and p= 0.173.
LQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQVLJQL¿FDQW
LQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQVLJQL¿FDQW
LQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQVLJQL¿FDQW
An independent means t-test was conducted to compare An independent means An t-test
independent
was conducted means to t-test was conducted to compare 3.Errors made analysis for Task 1
compare 3.Errors made ana
the task times (measured in seconds) for two groups of the task times (measured the intask
seconds)
times (measured
for two groups in seconds)
of for two groups of The result achieved p-value of .084 which is greater thanThe result achieved
/RXJKERURXJK8QLYHUVLW\VWXGHQWVRQWZRRQOLQHIDVKLRQUHWDLO
/RXJKERURXJK8QLYHUVLW\VWXGHQWVRQWZRRQOLQHIDVKLRQUHWDLO
/RXJKERURXJK8QLYHUVLW\VWXGHQWVRQWZRRQOLQHIDVKLRQUHWDLO 7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ 7KLVLQGLFDWHV
websites (Website 1 = www.supremenewyork.com; Website websites
2 = (Website 1 = websiteswww.supremenewyork.com;
(Website 1 = www.supremenewyork.com;
Website 2 = Website 2 VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W
= VLJQL¿FDQWIURPWKD
https://www.pullandbear.com/). https://www.pullandbear.com/).https://www.pullandbear.com/). test is “t independent test” in Parametric statistics. test is “t independe
Result - The test revealed QRVWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH
Result - The test revealed Result QRVWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH
- The test revealed QRVWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH The t independent test revealed QRVWDWLVWLFDOO\VLJQL¿FDQW The t independen
LQWDVNWLPHVIRUVHDUFKLQJ¿OWHULQJDQGFKRRVLQJDJDUPHQW LQWDVNWLPHVIRUVHDUFKLQJ¿OWHULQJDQGFKRRVLQJDJDUPHQWdifference in errors made for task 1 between Supreme (M=
LQWDVNWLPHVIRUVHDUFKLQJ¿OWHULQJDQGFKRRVLQJDJDUPHQW difference
1.8, in errors
between Supreme (M= 68.75, SD= 22.54) and Pull & Bear between
(M= Supreme (M=between 68.75, SD= Supreme22.54)(M= and68.75,
Pull &SD= Bear22.54)
(M= and Pull & Bear (M= SD= 2.57) and Pull & Bear (M= 0.5, SD= 0.75); t(9) = -1.37, SD=p= 2.57) and Pull

10 10 10
e in the means (Mean difference 7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
0.188, two tailed. The difference
0.188, twointailed.the means
The difference
(Mean difference
in the means (Mean7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
difference 7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
t revealed the p-value = 1.3) VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W
= 1.3) VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W
VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W
k
oth2 the groups are Errors madetest is “t independent
analysis Errors
for Task made2 test” in Parametric
analysis for Task statistics.
2 test is “t independent test”
test in
is “t
Parametric
independentstatistics.
test” in Parametric statistics.
A “t independent
064 which is greater thanThe result achieved p-value
The result test”
of .064 (two tailed)
achieved
which is
p-value toof
greater investigate
than
.064 which if Supreme
A “t independent
is greater than test”A (two
“t independent test” (twoif tailed)
tailed) to investigate Supreme to investigate if Supreme
sHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
no statistically has lower7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
lostness than Pull & Bear (Website 1 =supreme;
7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ has lower lostness than has
Pull
lower
& Bear
lostness
(Website
than1Pull
=supreme;
& Bear (Website 1 =supreme;
RUPDOO\GLVWULEXWHG
ss Website 2VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG
=Pull & Bear.
s for checking products VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG Website 2 =Pull & Bear. Website 2 =Pull & Bear.
ed QRVWDWLVWLFDOO\VLJQL¿FDQW
nd
eme (Md= 66, n=12) and The t independent Result-test The
The test revealed
t independent
revealed VWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH in
Result-
test revealed QRVWDWLVWLFDOO\VLJQL¿FDQW
QRVWDWLVWLFDOO\VLJQL¿FDQW Result-
The test revealed VWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH
The test revealed VWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH
in in
en Supreme
= -0.86 and p=(M= difference in lostness
0.38, SD=
0.38 errors made between
difference
between Supremeerrors(M=
in Supreme made0.51,
(M= SD=SD=
between
0.38, 0.28) and Pull
Supreme (M= &0.38, SD=
lostness between Supremelostness
(M=between
0.51, SD=Supreme
0.28) and(M=Pull
0.51,
& SD= 0.28) and Pull &
SD= 0.75); t(7) = 2.11 p= 2.57) Bear
0.06,and Pull (M= (M=
& Bear 0.27,1.57,
2.57) SD=SD=
and 0.26);
Pull t(11)t(7)
&0.75);
Bear = 2.21
(M= p= p=
=1.57,
2.11 0.01,
SD= one tailed.
0.06,
0.75); = The
t(7)Bear (M=p=0.27,
2.11 0.06,SD= 0.26);
Beart(11)
(M= = 0.27,
2.21SD=
p= 0.01,
0.26);one
t(11)
tailed.
= 2.21Thep= 0.01, one tailed. The
means (Mean differencetwo = 1.19) magnitude
tailed. The difference of in
two the difference
tailed.
the means in the difference
The difference
(Mean means
in the (Mean
means difference
= 1.19) =
(Mean magnitude
difference =of1.19)
the difference
magnitude
in theofmeans
the difference
(Mean difference
in the means= (Mean difference =
0.25) was large (eta squared = 0.18) 0.25) was large (eta squared
0.25) was= 0.18)
large (eta squared = 0.18)

t revealed the p-value

h the groups are

k 3 no statistically
was Errors made analysisErrors for Task
made3 analysis for Task 3
nov test revealed the p-value
VVIRUFKHFNLQJVL]H ¿W
¿W The result of Kolmogorov-The Smirnov
result of test
Kolmogorov-
revealed Smirnov
the p-valuetest revealed the p-value
,of Supreme
en both the groups are was .020 which showswas
(Md= 100, the data
.020 of
which
bothshows
the groups
the data
are of both the groups are
2),
p= U=62, z= 0.54 and p= VLJQL¿FDQWO\GLIIHUHQW VLJQL¿FDQWO\GLIIHUHQW
there was no statisticallyMann-Whitney 3. Conclusion
U testMann-Whitney
revealed there wasU test no revealed
statistically 3. Conclusion
there was no statistically 3. Conclusion
rs made between Supreme VLJQL¿FDQWGLIIHUHQFH inVLJQL¿FDQWGLIIHUHQFH
the errors
After conducting made between
the performance in the Supreme
errorsbetween
analysis made between
SupremeSupreme
After conducting the performance
After conducting
analysis
the between
performance
Supreme
analysis between Supreme
Md= 0, n= 9), U=27, z= 0.05 and
(Md= 0, n=9)and
andPull
Pull&&(Md=
Bear0,the
Bear, (Md=
n=9) 0,
and
n=Pull
results 9), U=27,
infer &that
Bearz= (Md=
0.050,and
n= 9), U=27, z= 0.05
and Pull andthe results
& Bear, and Pull
infer& that
Bear, the results infer that
p= 0.92. p= 0.92.
Supreme and Pull & Bear have equal performance as there Supreme
is and Pull & Bear
Supreme
have equal
and Pull
performance
& Bear haveas equal
there is
performance as there is
QRVLJQ¿FDQWGLIIHUHQFHEHWZHHQWKHPLQPHWULFVRI QRVLJQ¿FDQWGLIIHUHQFHEHWZHHQWKHPLQPHWULFVRI
QRVLJQ¿FDQWGLIIHUHQFHEHWZHHQWKHPLQPHWULFVRI
• Task time • Task time • Task time
• Task completion • Task completion • Task completion
• Errors made • Errors made • Errors made
ich is greater than
IIHUVLJQL¿FDQWO\1RQ Supreme’s navigation is bad when compared to Pull & Bear’s Supreme’s navigation is Supreme’s
bad whennavigation
comparedistobadPullwhen
& Bear’s
compared to Pull & Bear’s
GLVWULEXWHG6RWKHQH[W
W DVLWKDVPRUHORVWQHVV7KHUHZDVDODUJHVLJQL¿FDQWGLIIHUHQFH DVLWKDVPRUHORVWQHVV7KHUHZDVDODUJHVLJQL¿FDQWGLIIHUHQFH
DVLWKDVPRUHORVWQHVV7KHUHZDVDODUJHVLJQL¿FDQWGLIIHUHQFH
c statistics. in lostness between Supreme (M=0.51) and Pull & Bear in lostness between Supreme in lostness
(M=0.51)
betweenandSupreme
Pull & Bear
(M=0.51) and Pull & Bear
DWLVWLFDOO\VLJQL¿FDQW (M=0.27) (M=0.27) (M=0.27)
8,
ween Supreme (M= 1.8, 4. Lostness analysis 4. Lostness analysis
541
D= which
= 0.75); is =
t(9) greater
-1.37, than
p= The result achieved p-value
The result
of .541
achieved
which is p-value
greaterofthan
.541 which is greater than

11
2.5 ANALYSIS: ACCESSABILITY
2.5 ANALYSIS: ACCESSABILITY

1.Introduction 1.Introduction
• 5 alerts on the shipping page indicating the text is •too 5small 5. shipping
alerts on the Redesignpagerecommendations
indicating the text is too small 5. Redesign recom
to read. to read.
To determine the accessibility issues of supremenewyorkTo determine the• accessibility
2QSURGXFWSDJHWKHUHDUHWZRLQVWDQFHVZKHUHWKH
issues of supremenewyork • 2QSURGXFWSDJHWKHUHDUHWZRLQVWDQFHVZKHUHWKH
After the evaluation, we noticed that supremenewyorkAfter needs
the evaluation, w
website, we need to run an expert evaluation. Providingwebsite, we need tobuttons
run an has lowevaluation.
expert contrast ratio failing AA and AAA design
Providing buttons has low
few contrast
elementsratio failing
to be AA and in
redesigned AAA design
order to achieve accessibility.
few elements to be re
accessibility means removing barriers that prevent people
accessibility
with meansrequirements.
removing barriers that prevent people with requirements.The designer should consider making these changes:The designer should c
disabilities from making use of services and products.(What is from •making
disabilities The navigation menuand
use of services is not consistently placed
products.(What is in one
• The navigation • menu is notnavigation
Re-group consistently placed
menu in one
options logically on the•home
Re-group navigatio
accessibility, 2014).location
accessibility, 2014). So, failing to make a website accessible through
So, failing out aallwebsite
to make the pages.
accessible location throughpage
out alland
themakepages.it consistent on all the pages in termspage
of and make it c
means that designer is negligent about 37.5% of total means that designer is negligent about 37.5% of total location. location.
population(‘Disabled People in the World in 2019: Facts /HYHO$$$$FFHVVLELOLW\LVVXHV$GYDQFHG
population(‘Disabled
and People in the World in 2019: Facts and /HYHO$$$$FFHVVLELOLW\LVVXHV$GYDQFHG
• Impart titles and clear structure to all the pages. • Impart titles and cl
)LJXUHV¶ZKRQRZ¿QGVLWGLI¿FXOWWRXVHWKHZHEVLWH:HDUH Following are some of the accessibility issues from WCAG
)LJXUHV¶ZKRQRZ¿QGVLWGLI¿FXOWWRXVHWKHZHEVLWH:HDUH Following
2.1 are some of the accessibility issues from WCAG 2.1
• /DEHODOOWKHOLQNV • /DEHODOOWKHOLQNV
comparing the website’s features against WCAG 2.1’scomparing
(W3C, AAA.
the website’s features against WCAG 2.1’s (W3C, AAA. • Improve contrast between the background and fore • ground
Improve contrast b
2018) requirements. • Many links are meaning less without proper labels.• Many links are meaning
2018) requirements. for all callless withoutbuttons.
to action proper labels. for all call to action
• When zoomed to 200% on browser, user needs to•scroll When zoomed • toInclude
200% captions
on browser, uservideo
for the needs
onto“random
scroll page”. • Include captions fo
2. Methods 2. Methods KRUL]RQWDOO\WRUHDGWKHWH[WDQGWKHUHDUHQRÀH[LEOH KRUL]RQWDOO\WRUHDGWKHWH[WDQGWKHUHDUHQRÀH[LEOH
presentation options like letting user to change background presentation options like letting user to change background
2.1 Setting and Sample 2.1 Setting and Sampleor foreground colors. or foreground colors.
We evaluated www.supremenewyork.com using the Firefox We evaluated
web • There are no detailed help
www.supremenewyork.com and
using theinstructions
Firefox webgiven. • There are no detailed help and instructions given.
browser. browser.
4. Conclusion 4. Conclusion
2.2 Data Collection 2.2 Data Collection
We evaluated the homepage, shop page, product page Weandevaluated the homepage, shop page, product page and
2XUHYDOXDWLRQIRUDFFHVVLELOLW\LVVXHVRQVXSUHPHQHZ\RUN 2XUHYDOXDWLRQIRUDFFHVVLELOLW\LVVXHVRQVXSUHPHQHZ\RUN
checkout page. All the problems were compared against checkout
WCAGpage. All the problems
website were
infers that it iscompared
failing basicagainst WCAG
guidelines of WCAG website
2.1. infers that it is failing basic guidelines of WCAG 2.1.
2.1’s (W3C, 2018) for attaining level A. 2.1’s (W3C, 2018) for attaining level A.
/HYHO$$DQG$$$ZDVWHVWHGE\DQDO\VLQJWKURXJKWKH:DYH
/HYHO$$DQG$$$ZDVWHVWHGE\DQDO\VLQJWKURXJKWKH:DYH
The key perceivable design issues are the lack of structure The key in perceivable design issues are the lack of structure in
website (Web accessibility tool, 2020) website (Web accessibility
home pagetool,with2020)
an illogical grouping of options in navigationhome page with an illogical grouping of options in navigation
menu, which might make user to get lost. There is no menu,
Errors showing meaning less empty links
text which might make user to get lost. There is no text
Errors sho
2.3 Data Analysis 2.3 Data Analysis alternative for the products in the carousel of the “shop page” for the productswithout
alternative any titles.
in the carousel of the “shop page” without an
I have categorized the test result into must address, should
I have categorized the creates
which test result
an into must address,
ambiguity for users.should
There are no captions
which creates
or an ambiguity for users. There are no captions or
address, Could address. This way it is easier to understand
address,andCould address. This wayfor
audio alternative it is
theeasier
videotoonunderstand
the “randomand
page”. There’s
audio alternative
no for the video on the “random page”. There’s no
implement these issues while the designer is redesigning
implement
the theseaudio
issues while the for
alternative designer
any of istheredesigning
pages. the audio alternative for any of the pages.
website. website. The critical operational design issues are inconsistentThe critical operational design issues are inconsistent
functioning of tab navigation in the “shop page” and lack functioning
of of tab navigation in the “shop page” and lack of
3. Results 3. Results visual clue when the user is switching between colorsvisual in product
clue when the user is switching between colors in product
/HYHO$$FFHVVLELOLW\LVVXHV%HJLQQHU page. Illogical grouping of navigation menu. Most of the
/HYHO$$FFHVVLELOLW\LVVXHV%HJLQQHU page.
pages
Illogical grouping of navigation menu. Most of the pages
See Table 1 See Table 1don’t have titles which makes hard for the user to be aware don’t have titles which makes hard for the user to be aware
where he/she is. Some links don’t have labels and some whereof he/she is. Some links don’t have labels and some of
/HYHO$$$FFHVVLELOLW\LVVXHV,QWHUPHGLDWH them have unclear labels.
/HYHO$$$FFHVVLELOLW\LVVXHV,QWHUPHGLDWH them have unclear labels.
I have listed the major accessibility issues from WCAG I have listed the The
2.1 AA majorkey understandable
accessibility issuesdesign issue is2.1
from WCAG lack
AAof clear labels
The key or understandable design issue is lack of clear labels or
and according to Wave. and according toinstructions
Wave. given making their purpose uncertain. instructions given making their purpose uncertain.
• There are 32 errors of empty links on shop page with • There
no are 32 errors of empty links on shop page with no
text. text.

12 12
13 13
 2.6 ANALYSIS:
2.6 ANALYSIS: PSYCHOLOGY
PSYCHOLOGY

1. Introduction
1. Introduction The logo is red The logo
over theisblack
red over the blackwith
background background with a faded image-
a faded image- the primary
the primary navigation navigation
would would
be on the top be on the
of the page.top of the page.
Foreground toForeground
backgroundtocontrast.
background contrast. (negative) (negative)
It is importantItfor
is websites
importantorforapps
websites or apps
to follow to follow
the basic the
rules ofbasic rules All the list •of options
• of All the list
on of
theoptions
homepage on the
is homepage
placed close is to
placed close• toThe images • inThe
theimages
carouselin are
the not
carousel are not
associated associated
with text/ with text/
humaninpsychology
human psychology designing as in the
designing as thethe
experience experience
user each other,
the user each other, following following
Gestalt’s law Gestalt’s
of proximitylawmaking
of proximity
usersmaking users labels
labels violating violating
the Dual codingthetheory.
Dual coding theory. (negative)
(negative)
getswebsites
gets using these using these websites
will go through will go through
three differentthree different levels
levels believe they are believe they are
connected to connected to the same
the same category. But category.
the But• theThe usage• of The usage
colours of colours isand
is harmonious harmonious
highlightingandthehighlighting the
of informationofprocessing
information processing
levels in human levels in like
brain human visceral, main option
brain like visceral,main option “shop” “shop”for
is important is both
important for both
customers customers
and the and the centre part ofcentre partwhich
the page of theispage which (positive)
important. is important. (positive)
EHKDYLRUDODQGUHÀHFWLYH9LVFHUDOEHLQJWKHEDVLFVXEFRQVFLRXV
EHKDYLRUDODQGUHÀHFWLYH9LVFHUDOEHLQJWKHEDVLFVXEFRQVFLRXV company in order company
to buyinmore
orderproducts.
to buy more products.
levelcan
level where user where user the
process caninformation
process theoninformation
colors usageon colors usage
• Information • scent-
Information scent-
The option The option
random, news, random,
mailingnews, list all page-View all page-
list mailing View
in websites andin websites and basic of
basic organization organization
it (Gestalt principle). are not comprehensible
of it (Gestalt principle). are not comprehensible and vague. It’s and vague.
hard It’s hard to understand
to understand
6LPLODUO\WKHKLJKHVWRQHLVWKHUHÀHFWLYHOHYHOLQZKLFKXVHUFDQ
6LPLODUO\WKHKLJKHVWRQHLVWKHUHÀHFWLYHOHYHOLQZKLFKXVHUFDQ where the user where
goesthe user
after goes those
clicking after clicking
options.those options. • No grouping • ofNocontent
grouping of content
is seen on thisis page
seen as on athis page
result it isas a result it is
consciously
consciously think think about
about his/her his/herinexperience
experience using the website. • The color •used
in using the website. Theoncolor used on the
the homepage is homepage
red. A single is color
red. Aissingle color islooking clutteredlooking
and cluttered
making lessandsense
making to less sense brain.
the user’s to the user’s brain
used inwith
used in association association
black andwith black
white whichandiswhite
called which is called They could use They could
more usespace
white moreand
white space
clear and cleartoboundaries to
boundaries
2. Methods2. Methods DVPRQRFKURPDWLFFRORUWKHPH,WLVUHÀHFWLQJWKHEUDQG¶V
DVPRQRFKURPDWLFFRORUWKHPH,WLVUHÀHFWLQJWKHEUDQG¶V separate the
separate the garments garments
following following
Gestalt’s Gestalt’s principles.
principles.
image as boldimage and yetas minimalistic.
bold and yet minimalistic. • The images • are
Thenotimages are not
associated associated
with texts not with
following not following Dua
texts Dual
2.1 Setting2.1 andSetting
sampleand sample coding theory. coding theory.
I evaluated https://www.supremenewyork.com
I evaluated https://www.supremenewyork.com using a Firefox Product page-Product page-
using a Firefox
web browser.web browser.
4.recommendations
4. Redesign Redesign recommendations
2.2 Data collection
2.2 Data collection
I mainly
I mainly focused focusedon
the analysis thethe
analysis on thecategories
Homepage, Homepage, categories • The primary • navigation
The primary navigation
throughout throughout
the the website
website should be should be
page, productpage,
page product page and
and checkout checkout
as they as they
are often are often connected
connected changed
changed following following principles
the Gestalt’s the Gestalt’s likeprinciples
putting the like putting the
to the
to the top tasks top tasks
carried by thecarried by theshopping
users while users while
in shopping in items which areitems which
related are related
together together in proximity.
in proximity.
e-commerce
e-commerce websites websites 2018).
(McGovern, (McGovern, 2018). • Include
• Include suitable iconssuitable
with theicons
texts with
using the texts
Dual using Dual coding
coding
• The “add to • basket”
The “add andto“keep
basket” and “keep
shopping” shopping”
buttons buttons are justtheory.
are just theory.
2.3 Data Analysis
2.3 Data Analysis texts
texts without the without
aid theThis
of icons. aid of
is icons. This
violating Dual coding Dual coding
is violating • Improve font • size
Improveand font sizefor
weights andtheweights for the
text blocks text
and blocks and desig
design
The
The analysis is analysis by
conducted is conducted
checking forby any
checking for issues
usability any usability issues theory.
theory. Recalling Recallingwould
information information
be much would beifmuch
faster wordsfaster if words it inway
it in a hierarchal a hierarchal
followingway following
UI design UI design principles.
principles.
based on most based on most
commonly commonly
used usedprinciples
psychology psychology likeprinciples like are associated are associated
with imagery. with imagery. • Follow
• Follow consistent consistent
layout layout
for all the pages for all the website.
in the pages in the website.
colour theory,colour theory,
Gestalt’s Gestalt’s
laws, laws,scent,
Information Information scent, Dual coding
Dual coding • The free
• The free shipping shipping
message message
is red is redgives
color, which color,users
whichagives users a
theorymodels.
theory and Mental and Mental models. falseofassumption
false assumption some system of some
warning system warning
or error or error message.
message.
The usage of Thecolorusage
is notof color is notfor
appropriate appropriate
the situation for here.
the situation here.
3. Report 3. Report • Theadd
• The size button, sizetobutton,
basket,addkeepto basket,
shopping keep shopping buttons
buttons
Home page- Home page- are grouped
are grouped together with together with in the
in the proximity proximity
of next buttonof next button
giving sense ofgiving
theysense of a
all have they all have
similar a similar
function, function, indicating
indicating
law of
law of proximity. proximity.
There should There
be more should
whitebespace
moretowhite space to
differentiate them.
differentiate them.

Shop page- Shop page-

• • The
The navigation navigation
menu is in themenu
bottomis in thenot
and bottom and not consistent
consistent
in its structureinon
itsall
structure
the pageson all
on the
the pages
websiteonwhich
the website
is which is
contradicting contradicting
to the mental to the mental
models of themodels of the users. Usually
users. Usually

14 14
 Table
Table 1 showing 1 showing
website User website
interfaceUser interface
elements elements review
review

No spacing No spacing
between thebetween
prodcutsthe prodcuts making
making
it look
it look cluttered andcluttered and it is cogni-
it is increasing increasing cogni-
tive load ontive
usersload on users
while while
scanning scanning
them for them for
¿QGLQJDSURGXFW
¿QGLQJDSURGXFW

• There are •no There are no icons

icons associated associated with
with
text inItthe
text in the buttons. buttons.
is failing to It is failing to
followtheory.
follow Dual coding Dual coding theory.
• • buttons
As different As different buttons are placed
are placed
very close
very close to each other to each
they canother they can
be confused forbe their
confused for their
function. It is function. It is
violating
violating Gestalts Gestalts principles.
principles.

No proper
No proper grouping of grouping of the
the products in products
the in the
carousel
carousel which feels which
like thefeels likecarou-
entire the entire carou-
sel belongssel belongs
to one singleto group.
one single group.

15 15
3. SUMMARY OF USABILITY ISSUES3. SUMMARY OF USABILITY ISSUES

1. Introduction 1. Introduction
/DFNRI¿OWHU /DFNRI¿OWHU
After conducting several usability tests on the existing supreme newyork
After conducting • $VWKHUHZDVQR¿OWHUXVHUKDGWRVHDUFKDQGVNLPWKURXJKPDQ\SURGXFWVRQWKH
website several usability tests on the existing supreme newyork website • $VWKHUHZDVQR¿OWHUXVHUKDGWRVHDUFKDQGVNLPWKUR
such as heuristics, accessability analysis, performance, satisfaction
suchmetrics
as heuristics,
and accessabilityZHEVLWHUHQGHULQJWKHXVHU¶VWDVNDWKDQGOHVVHI¿FLHQW
analysis, performance, satisfaction metrics and ZHEVLWHUHQGHULQJWKHXVHU¶VWDVNDWKDQGOHVVHI¿FLHQW
biometrics, some key usability issues were discovered. biometrics, some key usability issues were discovered.
Unreadable text Unreadable text
• Smaller text size and lighter font size made the text not readable • Smaller
especially text size and lighter font size made the text no
2. Analysis 2. Analysis in the instances where large volumes of text was peresent. Not only in the
it caused
instances where large volumes of text was peres
annoyance in the normal users but also it makes low sighted people’s annoyance
life veryin the normal users but also it makes low s
Home page Home page hard. (W3C, 2018) hard. (W3C, 2018)
• Home page structure is very ambiguous without any clear navigation,
• Homeheaderpage structure
and • Sans
is very serif font
ambiguous has been
without any proved to have more
clear navigation, legibility
header and when •compared
Sans serif to serif
font has been proved to have more legibility
footer. footer. VPDOOHUIRQWV0LFKDHO%HUQDUG&KLD+XL/LDR VPDOOHUIRQWV0LFKDHO%HUQDUG&KLD+XL/LDR
• Navigation menu is inconsistent and most of the options in it are
• Navigation
not relatingmenu
to theis inconsistent and most of the options in it are not relating to the
top tasks. top tasks. Mention of sold out products Mention of sold out products
The text is not readable •beacause
• The text is not readable beacause of it’s smaller font size and• weight. User could’nt able to font
of it’s smaller viewsize
thatand
the weight.
product was sold out on the• shop
Userpage
could’nt
itself.
able to view that the product was sold ou
• There is lot of negative space with very less content on the homepage
• There making
is lot of it’s
negative space 2QO\DIWHUFOLFNLQJRQWKHSURGXFWDQGLQWRDGLIIHUHQWSDJHWKHQXVHUZRXOGEH
with very less content on the homepage making it’s 2QO\DIWHUFOLFNLQJRQWKHSURGXFWDQGLQWRDGLIIHUHQWSD
purpose questionable. purpose questionable. able to know if the product has been sold out. This is leading to frustration
able to know as the
if the product has been sold out. This is le
user had to go back to the main page every time.(More regressive user
saccades)
had to go back to the main page every time.(More
Shop page Shop page
• The carousel in the center of the page with products is very confusing.
• The carousel
It doesn’tin the center of the page with products is very confusing. It doesn’t
show the product’s name and there is change of state when usershow hovered
the product’s
on it. name3.and Conclusion
there is change of state when user hovered on it. 3. Conclusion
• The navigation bar is in the bottom of the page and the font size
• The
is small
navigation
makingbar it is in the bottom of the page and the font size is small making it
YHU\KDUGIRUWKHXVHUWR¿QGLW YHU\KDUGIRUWKHXVHUWR¿QGLW
Existence of all these usability issues on supreme website was the Existence
reason for of all these usability issues on supreme website
bad experience for the user. This made supreme score the lowest bad
in SUS
experience
surveyfor the user. This made supreme score the
View all page View all page in satisfaction metrics. In performance analysis, all the metrics like in satisfaction
time taken for metrics. In performance analysis, all the me
• All the products are placed very close to each other without boundaries
• All the products
or usageare placed thevery
task,close to each other
task success, without
errors madeboundaries
and lostnessor could
usagebe improved
the task,
a lot task
if these
success, errors made and lostness could be
of white space making it look cluttered. There are no product namesof white
available
space making it usability
look cluttered.
issuesThere are no product names available
were solved. usability issues were solved.
under the products. under the products.
• The navigation menu is again inconsistent in it’s location which• isThe
on the
navigation
left sidemenu is again inconsistent in it’s location which is on the left side
of the page. of the page.

Navigation structure Navigation structure

• /DFNRIVWUXFWXUHLQQDYLJDWLRQLVWKHELJJHVWLVVXHEHLQJLQFRQVLVWHQWWKURXJKRXW
• /DFNRIVWUXFWXUHLQQDYLJDWLRQLVWKHELJJHVWLVVXHEHLQJLQFRQVLVWHQWWKURXJKRXW
the website both in terms of location and grouping of options making
the website
hard forboth
the in terms of location and grouping of options making hard for the
user to follow the tasks. user to follow the tasks.
• User could’nt able to understand where he/she was present on • the
User
website
could’nt
as able to understand where he/she was present on the website as
there were no usage of breadcrumbs. there were no usage of breadcrumbs.

Lack of search function Lack of search function

• 7KHUHLVQRVHDUFKIXQFWLRQZKLFKLVPDNLQJWKHWDVNRI¿QGLQJFRQWHQWGLI¿FXOWIRU
• 7KHUHLVQRVHDUFKIXQFWLRQZKLFKLVPDNLQJWKHWDVNRI¿QGLQJFRQWHQWGLI¿FXOWIRU
the users leading to discoverability issues. the users leading to discoverability issues.

16 16
 Product page of supremene original website Product page of supremene original website
nal Home page of supremene original

ge has log of Homepage has log of

space with negative space with
ent less content

n the naviga- The options in the naviga-

e illogically tion menu are illogically
ions like grouped. Options like
ers are kept news and others are kept
e not in the first which are not in the
top tasks.

y small Text size and weight are very small

The carousel is very confusing The carousel is very confusing

without any label names and without any label names and
proper images of garments. proper images of garments.

inal website The original

Shop page of supreme top tasks like delivery info and sizing info were not
website The top tasks like delivery info and sizing info were not
shown on the product page. User has to remember the shown on the product page. User has to remember the
sizing info and select an option in this page. sizing info and select an option in this page.

View all page of supreme original website View all page of supreme original website

The navigation menu is inconsist- The navigation menu is inconsist-

ent in it’s location and categories ent in it’s location and categories
wise. It is left side of the view all wise. It is left side of the view all
page page

No labels and pricing mentioned No labels and pricing mentioned

oducts are also included The sold out productsfor
arethe products.
also includedlack of proper for the products. lack of proper
they were sold out in the spacing
and shown that they were soldmaking it look cluttered.
out in the spacing making it look cluttered.
carousel

17 17
4.1 REDESIGN: WEB DESIGN
4.1 REDESIGN: WEB DESIGN

1. Iteration 1. Iteration

7KHPDLQIRFXVRIWKH¿UVWLWHUDWLRQZDVWRJLYHDJRRGVWUXFWXUHWRWKHKRPHSDJHDQGZLWKJRRGRUJDQLVDWLRQRIQDYLJDWLRQPHQXRQLWVRWKDWWKHXVHUVFDQUHDFKWKHLUGHVWLQDWLRQTXLFNO\7KH
7KHPDLQIRFXVRIWKH¿UVWLWHUDWLRQZDVWRJLYHDJRRGVWUXFWXUHWRWKHKRPHSDJHDQGZLWKJRRGRUJDQLVDWLRQRIQDYLJDWLRQPHQXRQLWVRWKDWWKHXVHUVFDQUHDFKWKHLUGHV
navigation bar was kept at the top of the page
navigation
below the
barheader.
was kept
Byatclicking
the topon
of the
the section
page below
on the
thetop
header.
menu,By
a more
clicking
detailed
on thedrop
section
downonmenu
the top
with
menu,
categories
a moreofdetailed
optionsdrop
would
down
come
menu
up so
with
that
categories
users of options wo
FRXOGFKRRVHVRPHWKLQJVSHFL¿FIURPWKHP FRXOGFKRRVHVRPHWKLQJVSHFL¿FIURPWKHP
Impart search bar and wishlist features on to
Impart
the home
search
page
bar which
and wishlist
will accelerate
features the
on to
users
the home
tasks. page which will accelerate the users tasks.

2. Paper sketches 2. Paper sketches

,QLWLDOO\WKHVNHWFKHVZHUHPDGHZLWKSHQDQGSDSHUJLYLQJLPSRUWDQFHWRWKHQDYLJDWLRQÀRZDQGWKHWRSWDVNV+HUH,KDYHGUDZQKRPHSDJHVHDUFKUHVXOWV¿OWHUDQGSURGXFWSDJHV,VWDUWHGIRUPLQJ
,QLWLDOO\WKHVNHWFKHVZHUHPDGHZLWKSHQDQGSDSHUJLYLQJLPSRUWDQFHWRWKHQDYLJDWLRQÀRZDQGWKHWRSWDVNV+HUH,KDYHGUDZQKRPHSDJHVHDUFKUHVXOWV¿OWHUDQGSURG
the structure of the website after making the
the
basic
structure
information
of the website
architecture.
after making the basic information architecture.
/DWHUSDSHUVNHWFKHVZHUHWDNHQWRWKH¿JPDIRUGHVLJQLQJRISURWRW\SH
/DWHUSDSHUVNHWFKHVZHUHWDNHQWRWKH¿JPDIRUGHVLJQLQJRISURWRW\SH

Home page Home page Product page Product page Search and filter Search and

A simple Drop down menu A simple

Vertical Drop
filter bar down
alongmenu Vertical
Sold out productsfilterare
bar along Sold out products are
from the top navigation bar from
with the
the top navigation
products so that bar clearlywith
shown the on
products
the so that clearlywith
Image galler shown
right&on the Image galler with right&
layout of products on layout of products on user can easily filter out resultsuser
pagecan easily
itself, filter out
instaed results
left swipe page
option. itself, instaed
It shows left swipe option. It shows
the homepage the homepage the products the itproducts
of finding out in the next wishlist of finding
symbol it out in the next
also wishlist symbol also
page page

18 18
Home page of supremenewyork redesign Home page of supremenewyork redesign Product page of supremenewyork redesign Product page of supremenewyork redesign

Imparted search Imparted search

function function
Consistent Consistent
Top Naviga- Images were shown Top Naviga- Images were shown
tion bar in gallery format and tion bar in gallery format and
Carousel made provided with left provided with left
attractive with and right cursors and right cursors
clear focus on the
selected product Clear titles for Clear titles for
and with titles. different sec- Product details alongdifferent sec- Product details along
tions of page with the info on tions of page with the info on
material was shown material was shown
Change of state clearly clearly
with red border
when hovered Shipping informa- Shipping informa-
Customer reviews Customer reviews tion was shown in tion was shown in
was added as it was was added as it was the product page the product page
one the top task. one the top task. itself so that user itself so that user
need not to go to need not to go to
another new page another new page

Simlar products were Simlar products were

Footer with sec- shown on the product shown on the product
ondary navigation page page

Product names and prices were Product names and prices were
given along with images given along with images

Filter feature was

After the action of After the action of
added to improve
adding to cart, the cart adding to cart, the cart
the efficiency of
After adding to cart After adding to cart is visually showing the is visually showing the
searching products.
user can quickly user can quickly number of products it number of products it
go to the checkout go to the checkout had. had.
option buy clicking option buy clicking
Apply filter option on it. on it.
was given to select
and apply many
filters.

19 19
 4.2 REDESIGN: TOP TASKS
4.2 REDESIGN: TOP TASKS

1. Introduction 1. Introduction Homepage Homepage

In the original supreme web home page there In the
areoriginal supreme
many tiny web home
tasks options pagetogether
placed there are many tiny tasks options
with
Top tasks
Top tasks cover 50% of all the tasks customers cover while
care about 50% of all the tasks
shopping customers
online. Making the topwhile
care about tasksshopping
which required
online.user to put
Making top tasks
themore effort which
in going to required
the right user to So,
option. put more
I haveeffort in going to the right optio
started
topimportant
top tasks easily visible on the website is very tasks easily visibleofon
as most thethe website
users careisonly
very redesidning
important as
about most of thebyusers
keeping
carethe topabout
only redesidning
tasks as a checklist. by keeping
Below the top tasks
is the comparison as a designs:
of both checklist. Below is the compar
them, rather
them, rather than showing many tiny unimportant tasks than showing
all over many tiny
the website. unimportant tasks all over the website. (McGovern,
(McGovern,
2018) 2018)
Fig 1 original homepage Fig 1 original
Fighomepage
2 redesigned homepage Fig 2 redesigned
)RUH[DPSOH,IDXVHULVVHDUFKLQJIRUDVKRHRQWKHKRPHSDJHKHVKHVKRXOG¿QG
)RUH[DPSOH,IDXVHULVVHDUFKLQJIRUDVKRHRQWKHKRPHSDJHKHVKHVKRXOG¿QG
QDYLJDWLRQEURZVLQJDQG¿OWHULQJZKLFKPDNHVWKHWDVNHDV\LQ¿QGLQJVKRH,QVWHDGRI
QDYLJDWLRQEURZVLQJDQG¿OWHULQJZKLFKPDNHVWKHWDVNHDV\LQ¿QGLQJVKRH,QVWHDGRI
showing what he wanted there should’nt beshowing what he
unnecessary tinywanted there
tasks like should’nt be
subscribing to unnecessary tiny tasks like subscribing to
website,
website, f.a.q etc.. which would only distract the userf.a.q
andetc..
makewhich
themwould
abortonly distract the user and make them abort the task.
the task.

Pie
Pie chart 1 showing the percentages of tasks chart 1 showing
considered the percentages
important by users of tasks considered important by users

In¿J original homepage, options In¿J original homepage, options

in the menu like “preview”, “random”, in the menu like “preview”, “random”,
“about”, “news” are not related to the “about”, “news” are not related to the
top tasks and everything was clubbed top tasks and everything was clubbed
together with the top task “shop” which together
In with the top task “shop” which In ¿JUHGHVLJQHGKRPHSDJH
¿JUHGHVLJQHGKRPHSDJHWKH¿UVWIRXUFDWHJRULHV
can create confusion in the user to can more
are createdetailed
confusion in thewhich
version user were
to originally
are more detailed
hidden in version whi
select the shop button while shopping. select
the the shop
“shop”. button
The new while shopping.
categories the “shop”. The new categorie
“clothing”, “accessories”,
“shoes”,
“shoes”, “skate”, are directly related to the top tasks“skate”, are directly r
that is most customers search for them while thatthey
is most
are customers search
shopping on the supreme website. Considering shopping on the supreme web
supreme
From the above pie chart, we can can clearly From the abovethat
understand piethe
chart,
top we can can
5 tasks are clearly
Deliveryunderstand that the top 5 tasks are Delivery has only limited products unlike other websiteshas only limited products unlik
like zara,
information, product images, customer reviews,information, product images,
sizing information customer
and product reviews, sizing information and product description.
description. Pull & Bear etc.. remaining options like news, Pullmailing
& Bearlist
etc.. remaining op
These are the things that customers care aboutThesewhile
are the things online.
shopping that customers
so, everycare abouthas
website while shopping online. so, every website has were also included in the navigation. were also included in the navi
to ensure that
to ensure that it is meeting with all these requirements it is
and to meeting with
presented in all these
a way requirements
that is easily and to presented in a way that is easily
visible to the user. visible to the user.

20 20
 Product page
,QWKHRULJLQDOVXSUHPHSURGXFWSDJHPDQ\IHDWXUHVVKRXOGEHLPSDUWHGUHODWHGWRWKHWRSWDVNVZKLFKZRXOGPDNHXVHUVWDVNRIFKHFNLQJWKHSURGXFWVL]LQJDQGGHOLYHU\LQIRUPDWLRQHI¿FLHQWO\
XFWSDJHPDQ\IHDWXUHVVKRXOGEHLPSDUWHGUHODWHGWRWKHWRSWDVNVZKLFKZRXOGPDNHXVHUVWDVNRIFKHFNLQJWKHSURGXFWVL]LQJDQGGHOLYHU\LQIRUPDWLRQHI¿FLHQWO\

roduct page Fig 3 original product

Fig page
4 redesigned product page Fig 4 redesigned product page Fig 5 Shipping information popup Fig 5 Shipping information popup

Image gallery with Image gallery with

right& left cursors. right& left cursors.

shipping info related to shipping info related to

their country their country

User reviews Shipping information is clearly

User reviewscategorised Shipping information is clearly categorised
according to their time and price. User can according
view to their time and price. User can view
this direclt on the product page itself, so it saves
this direclt on the product page itself, so it saves
the time and reduces the cognitive load on the the time and reduces the cognitive load on the
user. user.
In original
per top tasks there shouldproduct
be page, as per top tasks there should be
ges of garment,clear sizing information,
description and images of garment, description and
e and number delivery
days. Theinformation
sizing with price and number days. The sizing
andthere
t pages. Although shipping are on different pages. Although there are no
are no
major tasks weretinynot
tasks on this page, theInmajor
mentioned redesigned product
tasks were In redesigned
page, new features such
not mentioned as Fig 6such
product page, new features Sizing
as information popup Fig 6 Sizing information popup
erent pages andclearly. User had
remember customer
the to go to different reviews,
pages and product details,
remember the good view customer reviews, product details, good view of image
of image
the task hard. information which is making gallery, shipping
the task gallery, shipping
hard. information and sizing information have information and sizing information have
been added considering the top tasks in thebeen mind.added considering the top tasks in the mind.

e Fig 7 original sizing page

Sizing information has been improved a lotSizing

when information has been improved a lot when
The sizing info was unclear with no compared
The sizing info was uncleartowith
original
no website. User can view compared
the to original website. User can view the
measurements like inches/cms and measurements sizing info on the
like inches/cms product page itself and itsizing
and has info on the product page itself and it has
it was on a different page. clearpage.
it was on a different measurements. clear measurements.

21 21
4.3 REDESIGN:
4.3 REDESIGN:
ACCESSABILITY
ACCESSABILITY
Fig 1 showing carousel
Fig 1 showing
on original
carousel
website
on original website

In¿J original shoppage, when analysed

In¿J original shoppage,withwhenwave websitewith
analysed thewave
carousel had the
website 32 errors
carousel had 32 errors
with images of thewith
products
imageshaving
of theno text alternatives
products having nolike
textproduct titles.like
alternatives Thisproduct
createdtitles. This created
Contrast issues which
Contrast
wereissues
analysed
which
through
were analysed through lot of confusion inlot
users while choosing
of confusion a while
in users product from this
choosing area. from this area.
a product
wave website werewave
rectified
website
by improving
were rectified
the by improving the
contrast betweencontrast
the foreground
betweenand
theback-
foreground and back- Fig 2 showing redesigned
Fig 2 showing
carousel
redesigned
on homecarousel
page of on
supreme
home page
website
of supreme website
ground ground

In¿JKRPHSDJHWKHFDURXVHOKDVEHHQPRGL¿HGFRPSOHWHO\ZLWKFOHDUSURGXFWLPDJHV7KH
In¿JKRPHSDJHWKHFDURXVHOKDVEHHQPRGL¿HGFRPSOHWHO\ZLWKFOHDUSURGXFWLPDJHV7KH
red border aroundredtheborder
imagearound
is showing the center
the image focus of
is showing thethe carousel.
center focusThe product
of the labels
carousel. The product labels
Shipping page has
Shipping
so manypage
accessibility
has so many
issues
accessibility issues
and the pricing were
andalso provided
the pricing under
were alsothe focusedunder
provided image.
theThe carousel
focused hasThe
image. clearcarousel
title has clear title
and those were eliminated
and thoseinwere
the redesign.
eliminated in the redesign.
called “Fall new releases 2020”.
called “Fall newAll the accessibility
releases 2020”. Allissues related to carousel
the accessibility are solved.
issues related to carousel are solved.

22 22
 Fig 3 showing highlighted top navigation
Fig 3 showing bartop
highlighted and header bar and header
navigation
Navigation bar was made consist-
Navigation bar was made consist-
ent and the con tents are the
ent and logically
con tents are logically
grouped. grouped.

Contrast for call toContrast

action for call to action
buttonshas been improved
buttonshas been improved
by usage of heavier by font
usage of heavier font
Fig 4 showing Add to4cart
Fig buttonAdd to cart button
showing weight. weight.

Fig 5 showing subFig

sections of redesigned
5 showing product
sub sections page
of redesigned product page

Content was meaningfully presented

Content was with presented with
meaningfully
good hierarchy sogood
that the user will
hierarchy so be
thatable
the user will be able
to find important info quickly.
to find important info quickly.

The content has been meaningfully

The content presented
has been with presented with
meaningfully
suitable labels and titles on
suitable all the
labels pages
and titlesthroughout the throughout the
on all the pages
website website

23 23
4. REDESIGN: NAVIGATION 4. REDESIGN: NAVIGATION
Flow chart 1 showing Navigation structure of redesigned supremeFlow chart 1 showing Navigation structure
website

1. Navigation redesign 1. Navigation redesign

2YHUDOOQDYLJDWLRQVWUXFWXUHKDVEHHQPRGL¿HGIRUEHWWHU 2YHUDOOQDYLJDWLRQVWUXFWXUHKDVEHHQPRGL¿HGIRUEHWWHU
HI¿FLHQF\LQWKHUHGHVLJQHGYHUVLRQRIVXSUHPHZHEVLWH HI¿FLHQF\LQWKHUHGHVLJQHGYHUVLRQRIVXSUHPHZHEVLWH
The newly added features are: The newly
Thereadded features
are almost are:
four There are almost four
• Imparted search bar on the home page along with the • Imparted
modessearch bar on the
of navigation pos-home page along with the modes of navigation pos-
primary navigation menu. primary
siblenavigation
for the usermenu.
to reach sible for the user to reach
• Divided the shop option into sub-categories into clothing, • Divided the shop
product page option into sub-categories into clothing,
from the product page from the
accessories, shoes and skate. home page.
accessories, Theand
shoes primary
skate. home page. The primary
• Made the primary navigation consistent throughout the • Made navigation includes
the primary the top
navigation consistent throughout the navigation includes the top
website at the top. levelat
website navigation
the top. bar and level navigation bar and
search bar which is con- search bar which is con-
• Added breadcrumbs on different pages so that they could • Added breadcrumbs on different pages so that they could
stant through out the web- stant through out the web-
aid in getting back to previous pages and also they provide aid in getting back to previous pages and also they provide
site. site.
information for the user where they are curretly located. information for the user where they are curretly located.
• Filter feature has been added for both search results page • Filter feature has been added for both search results page
and browsing through product categories page, which can and browsing through product categories page, which can
reduce the users efforts of scrolling through many products. reduce the users efforts of scrolling through many products.
• Clicking on logo on every page was linked backed to • Clicking on logo on every page was linked backed to
homepage. homepage.

2. Implementation of navigation principles 2. Implementation of navigation

Filter feature is added after principles Filter feature is added after
the search results and even the search results and even
(I¿FLHQW1DYLJDWLRQLVYHU\FUXFLDOIRUDZHEVLWHDVLWSOD\V while browsing through prod-
(I¿FLHQW1DYLJDWLRQLVYHU\FUXFLDOIRUDZHEVLWHDVLWSOD\V while browsing through prod-
a major role in reaching the destination when the user is a majoructs.
role Itincuts downthe
reaching taskdestination
time when the user is ucts. It cuts down task time
while searching for appropri-
performing their task. I have redesigned the navigation structure performing their task. I have redesigned the navigation structure while searching for appropri-
ate products. ate products.
based on some of the principles of navigation like Momentum, based on some of the principles of navigation like Momentum,
XQLW\PLQDPDOLVPFODULW\¿GHOLW\DQGPDJQHWLVP XQLW\PLQDPDOLVPFODULW\¿GHOLW\DQGPDJQHWLVP
(Gerry McGovern, 2018) (Gerry McGovern, 2018)
Unless it is meaningful and simple there would be many Unless it is meaningful and simple there would be many
chances where users might get lost and frustrated leading to chances where users might get lost and frustrated leading to
the aborting the website. the aborting the website.

24 24
 of home page Fighome
Fig 1 showing Navigation structure of 3 showing
page Navigation of product page Fig 3 showing Navigation of product page

Navigation menu taking Navigation menu taking

up very minimal space on up very minimal space on
Both search bar and Both search bar and the product page which is the product page which is
top lev navigation menu top lev navigation menu
following the principle of following the principle of
are kept at the top are kept at the top “Minimalism”. “Minimalism”.
within proximity which within proximity which
is demonstrating “Unity is demonstrating “Unity
principle” principle” The “Add to cart” button is The “Add to cart” button is
able to take users to the able to take users to the
cart which is an example cart which is an example
of clear “Magnetism”. of clear “Magnetism”.

rousel has both right anddown

Drop left menu is The carousel has both right and left
navigation and it focusing
clubbedon thethe top
with swipe navigation and it focusing on the
t well with a bordernav
around
menyit.and all the product well with a border around it.
er doesn’t have to sub
scroll down
categories are The user doesn’t have to scroll down
at products logically grouped to look at products
together.
The supreme logo on all the pages which is at the left The supreme logo on all the pages which is at the left
most corner was linked back to homepage. so it can most corner was linked back to homepage. so it can
also act as backward navigation. also act as backward navigation.

navigation in footer Fig 2 showing secondary navigation in footer

Fig 4 showing breadcrumbs usage Fig 4 showing breadcrumbs usage

When the user reaches bottom of the page, he/sheBread

, he/she can go to a dif- can gocrumbs near the top nav bar
to a dif- Bread crumbs near the top nav bar
ons provided in the footer helps to make users aware of their cur-
ferent page with the help of navigation options provided in the footer helps to make users aware of their cur-
in. This is much helpfulwithout
is reaching to the top of the page again. Thisrent location
is much andiscan aid as secondary
helpful rent location and can aid as secondary
and pages large websites with numerous information and pages navigation also. This is an example of navigation also. This is an example of
principle “Momentum”. principle “Momentum”.

25 25
 4.5 REDESIGN: PSYCHOLOGY
4.5 REDESIGN: PSYCHOLOGY
Homepage Homepage
Following below is the comparison betweenFollowing
the homebelow
pagesisof
the comparison
original between the
and redesigned home in
versions pages of original and redesigne
1. Implementation of psychology principles
1. Implementation of psychology principles terms of usage of psychology and UI principles.
terms of usage of psychology and UI principles.

Fig 1 Original homepage

2QWKHRULJLQDOVXSUHPHZHEVLWHWKHUHZHUHPDQ\VKRUWFRPLQJVIRUQRW
2QWKHRULJLQDOVXSUHPHZHEVLWHWKHUHZHUHPDQ\VKRUWFRPLQJVIRUQRW Fig 1 Original homepage
Fig 2 Redesigned homepage Fig 2 Redesigned homepage
followingand
following principles of psychology mostly Gestalt’s principles of psychology
Information scent. mostly Gestalt’s and Information scent.

2. Areas of interest in redesign 2. Areas of interest in redesign

2.1 Homepage 2.1 Homepage

• The options in the Navigation menu are•regrouped
The options in thebyNavigation menu are regrouped logically by
logically
excluding certain vague options like “random” excluding
which has certain
poorvague options like “random” which has poor
information scent. All the options in the top information scent.are
navigation menu All very
the options in the top navigation menu are very
clear in and
clear in their titles so that the user can understand theirpredict
titles sowhere
that the user can understand and predict where
he/she would land by clicking on them. he/she would land by clicking on them.
• Imparted clear labels and pricing for the• products
Imparted clear in
present labels
the and pricing for the products present in the
carousel in the center of the page. carousel in the center of the page.
• Gestalt’s law of proximity was used to• separateGestalt’sthelaw of proximity
products in the was used to separate the products in the
to sellers category on the home page. The to sellers were
products category on the home page. The products were equally
equally
distributed
distributed with white space and placed in proximity with white
through which space
userand placed in proximity through which user
could understand that they are related to each could understand that they are related to each other.
other.
• Dual coding theory was used by including • icons
Dual coding
for many theory
titleswas used
in call to by includingIn¿J
icons original
for manyhomepage,
titles in calloptions
to In¿J original homepage, options
action buttons. action buttons. in the menu like “preview”, “random”, in the menu like “preview”, “random”,
“about”, “news” are not related to “about”, “news” are not related to
the top tasks are placed in proximity the top tasks are placed in proximity
with “shop” option giving a sense of with “shop” option giving a sense of In ¿JUHGHVLJQHGKRPHSDJHWKH¿UVW
In ¿JUHGHVLJQHGKRPHSDJHWKH¿UVWIRXUFDWHJRULHV
2.2 Productpage 2.2 Productpage belonging to same group. (‘Gestalt belonging
are moretodetailed
same group.
version(‘Gestalt are more
which were originally detailed version which were or
hidden
Principles’, 2020) Principles’, 2020)
in the “shop”. in thegood
All these categories are following “shop”. All these categories are fo
• Gestalt’s law of similarity was used to• group Gestalt’s lawsizing
different of similarity
options was used to group different sizing options information scent, meaning all those options information
were clearscent, meaning all those opt
2SWLRQ³UDQGRP´RQKRPHSDJHLV
OLNH³6´³0´³/´DQG³;/´7KHVHVL]LQJRSWLRQVZHUHGHVLJQHGWR
OLNH³6´³0´³/´DQG³;/´7KHVHVL]LQJRSWLRQVZHUHGHVLJQHGWR 2SWLRQ³UDQGRP´RQKRPHSDJHLV where they would lead to when they are
where they would lead to when they are clicked.
have similar shaped boundaries around them have similarwhich
through shaped userboundaries
can failingthrough
around them to havewhich
good user
information
can scent. failing to have good information scent.
understand those are related to eachother. understand those are related to eachother.
• The images in the gallery of the products • were
The grouped
images intogether
the gallerywithof the products were grouped together with
similar boundary and rectangular shape. They similar
wereboundary
also placed rectangular shape. TheyFig
and closed 3 original
were website
also placed buttons
closed Fig 3 original website buttons
to of
to eachother which is folllowing Gestalt’s law eachother
proximitywhich is folllowing Gestalt’s law of proximity and similarity
and similarity
• • Manyalong
Many icons like cart and wishlist were included iconswith
likethe
carttheir
and wishlist were included along with the their
titles following Dual coding theory. titles following Dual coding theory.
• The icons such as zoom for search bar •matches the mental
The icons such asmodel
zoom of for search bar matches the mental model of In the
In the original website the primary call to action original website the pri
but-
ton “add to cart” was placed
ton “add to cart” was placed close to other similar
users. users.
rectangular buttons rasising a
rectangular buttons rasising a bit of confusion.

26 26
designed homepage- Top sellers Fig 4 redesigned homepage- Top sellers
Fig 5 Image gallery Fig 5 Image gallery
Fig 6 content on product page Fig 6 content on product page

All the sizing options hav-
ing rectangular shaped
boundary making them
look similar to eachother
and hence giving sense of
related to eachother. This
is following “Gestalt’s law
os similarity.”
All the sizing options hav-
ing rectangular shaped
boundary making them
look similar to eachother
and hence giving sense of
related to eachother. This
is following “Gestalt’s law
os similarity.”

All the small images below have a sim- All theThe

small
redimages
“Add to below
cart” have a sim-
button The red “Add to cart” button
ilar boundaries and placed together in ilar boundaries
is standingand placedfrom
different together
the in is standing different from the
proximity giving similar look and sense proximity
uppergiving similar
coloured look and as
rectangles sense Icons were included with
upper coloured rectangles as
Icons were included with
on the home page were separated equally by
All the products on the home page were to
belonging separated equally
same group. Thisbyis follow- belonging to same group. This is follow- titles following dual cod- titles following dual cod-
they have difference in their they have difference in their
ng meaningful order to them following
white spaceGe-
giving meaningfuling
order to them
Gestalt’s lawfollowing Ge- region and
of common ing Gestalt’s
colours law common region and ing theory.
andofshapes. colours and shapes.
ing theory.
oximity. When the hovers over the product
stalt’s a red When the
law of proximity. hovers over the product a red
proximity. proximity.
ars on the top of it. boundary appears on the top of it.

Light box usage on the Light box usage on the

product page with back- product page with back-
ground greyed for zoom- ground greyed for zoom-
ing in the product (UI ing in the product (UI
elements) elements)
Improved legibility of text in the rede- Improved legibility of text in the rede-
sign by increasing font size, weight and sign by increasing font size, weight and
by using a sans serif font, which comes by using a sans serif font, which comes
under User Interface elements. under User Interface elements.

27 27
 4.6 REDESIGN: HEURISTICS
4.6 REDESIGN: HEURISTICS

1. Areas of interest in redesign 1. Areas of interest in redesign

Fig 1 Redesigned homepage Fig 1 Redesigned homepage
Search bar was imparted to im- Search bar w
1.1 Homepage 1.1 Homepage prove the efficiency of usage prove the effi
• When user hovers on the categories of •the When user hovers on the categories of the top navigation
top navigation
barunder
bar it shows a visual cue as red coloured line it showsthe a visual cue as red coloured line under the
category.The
category.The categories in the drop down menu changescategories in the drop down menu changes Wishlist feature was introduced Wishlist fe
it’s state
it’s state whe user hovers on it showing system statuswhe to user
the hovers on it showing system status to the for flexible and efficiency of for flexibl
user. user. use. use.
• The products which are in the center of •theThe products
carousel are which are in the center of the carousel are
higlighted
higlighted by red colored border again showing by red
it’s status of colored border again showing it’s status of
selection. selection.
• Navigation bar was made to be consistent• and
Navigation
placed barat was made to be consistent and placed at
the top
the top on every page on the website following on every page on the website following consistency
consistency
standards. standards. State of selection was shown State of s
by the red border highlighting by the re
• Help and f.a.q options were provided in •theHelp
footerand f.a.q
area at options were provided in the footer area at
around the product’s image. around th
the bottom of the page. the bottom of the page.
• • 6HDUFKEDUDQGZLVKOLVWZHUHDGGHGIRUPRUHHI¿FLHQF\RI
6HDUFKEDUDQGZLVKOLVWZHUHDGGHGIRUPRUHHI¿FLHQF\RI
use. use.

1.2 Filter page 1.2 Filter page

• • )LOWHURSWLRQZDVDGGHGWRLPSURYHWKHÀH[LELOLW\DQG
)LOWHURSWLRQZDVDGGHGWRLPSURYHWKHÀH[LELOLW\DQG
effciency of use. effciency of use.
• • 7KHFOHDUDOODQGLQGLYLGXDOFOHDURI¿OWHURSWLRQVZHUH
7KHFOHDUDOODQGLQGLYLGXDOFOHDURI¿OWHURSWLRQVZHUH
SURYLGHGLQFDVHLIXVHUKDGVHOHFWHGZURQJ¿OWHURSWLRQ
SURYLGHGLQFDVHLIXVHUKDGVHOHFWHGZURQJ¿OWHURSWLRQ
which helps as recovery from errors. which helps as recovery from errors.
• Sold out products were shown as greyed • out
Sold
andout products were shown as greyed out and clealry
clealry
mentioned as sold out on them, preventingmentioned
errors like as sold out on them, preventing errors like
opening those products. opening those products.

1.3 Product page 1.3 Product page

• The sizing and delivery information was•given
Theinsizing and delivery information was given in the same
the same
Showing visual cue of Showing
f.a.q option visual
for help wascue of f.a.q option for help was
page
page which is encouraging recognition rather which
than is encouraging recognition rather
recall. redthan recall.
border around the redinborder
provided around the
the foooter provided in the foooter
• • Sizing
Sizing information has been clearly displayed withinformation has been clearly displayed with
product when it was hov- product when it was hov-
measurements. measurements. ered over. ered over.

28 28
Fig 2 Redesigned filter page
Clear option in the
menu to recover
from errors of
wrong selection
Sold out
Selection of filter
options with the
change of stateSold out
into red.
Sold out products were clearly
shown on the top of product and it
the opacity was reduced.
rmation popup Fig 4 Shizing informationFig
e product page. User can Sizing pop up on the product page. User can
quickly check from this popup.
his popup. It also has clear
metrics.
Fig 2 Redesigned filter page product page
Fig 3 Redesigned Fig 3 Redesigned product page
Size can be selected easily Size can be selected easily
from the buttons under the size from the buttons under the size
label. Greyed out buttons indi- label. Greyed out buttons indi-
cate unavailable. cate unavailable.
Sold out
Shipping info was given on the same page Shipping info was given on the same page
Sold out
and user didn’t have to go through the all and user didn’t have to go through the all
countries delivery information. User can countries delivery information. User can
search for their country and view shipping search for their country and view shipping
details like price and time for their country details like price and time for their country
Sold out products were clearly
shown on the top of product and it
the opacity was reduced.
popup
5 Shipping information popup Fig 5 Shipping information popupFig 6 drop down menu on home page Fig 6 drop down menu on home page
Sub categories were well grouped Sub categories were well grouped
Shipping It also has clearis clearly categorisedShipping
information according information
to their is clearly categorised according
meaningfully to their
with clear selection of meaningfully with clear selection of
time and price. User can view this direclt on time
theand price.page
product User can view this hover
direclt state
on the
onproduct page
the option. hover state on the option.
itself, so it
itself, so it saves the time and reduces the cognitive saves
load on the time and reduces the cognitive load on the
user. user.
29 29
5. PROTOTYPE 5. PROTOTYPE
KWWSVZZZ¿JPDFRPSURWR75WS1*G9%G-G.TL\NLY$)LQDO6XSUHPH5H-
KWWSVZZZ¿JPDFRPSURWR75WS1*G9%G-G.TL\NLY$)LQDO6XSUHPH5H-
design?node-id=1%3A7830&viewport=1809%2C593%2C0.08114264905452728&scaling=min-zoom
design?node-id=1%3A7830&viewport=1809%2C593%2C0.08114264905452728&scaling=min-zoom

7KHFRPSOHWHSURWRW\SHZDVGHVLJQHGXVLQJ¿JPDE\EDVHGRQWKHIRXQGDWLRQODLGIURPWKHEDVLFQDYLJDWLRQVWUXFWXUH7KHPDLQIRFXVLQWKLVUHGHVLJQZDVWRFKDQJHWKHH[LVWLQJKRPHSDJH
7KHFRPSOHWHSURWRW\SHZDVGHVLJQHGXVLQJ¿JPDE\EDVHGRQWKHIRXQGDWLRQODLGIURPWKHEDVLFQDYLJDWLRQVWUXFWXUH7KHPDLQIRFXVLQWKLVUHGHVLJQZD
into a more meaningful and purposeful. To conserve the
intooriginal
a moresupreme’s
meaningfulpositive things, theTobasic
and purposeful. elements
conserve like carousel
the original was still
supreme’s preserved
positive things,onthe
thebasic
home page butlike
elements it waa redesigned
carousel inpreserved
was still a on the hom
more usable way. more usable way.
All the pages were kept minimal as the supreme website haspages
All the very limited products.
were kept minimal as the supreme website has very limited products.
The Shipping page has been redesigned in a much better way by reducing
The Shipping page haslarger
beenvolumes of text
redesigned in asections. The sizing
much better way byinformation and shipping
reducing larger volumeswere displayed
of text sections.onThe
thesizing
product page itself.
information and shipping were disp

Fig 1 Redesigned homepage Fig 1 Redesigned

Fig homepage
2 Redesigned filter page Fig Fig
2 Redesigned filterproductpage
3 Redesigned page Fig 3 Redesigned productp

30 30
 Figon4 home
Fig 7 Carousel Drop down
page menu Fig 7 Carousel on home page Fig 12 Shipping information popup Fig 12 Shipping information popup

Fig 8 Top Nav bar Fig 8 Top Nav bar

Fig 5 Image gallery Fig 13 Sizing information popup Fig 13 Sizing information popup

Fig 9 Footer with secondrary navigation Fig 9 Footer with secondrary navigation

Fig 14 product zoom Fig 14 product zoom

Fig 6 Filter options
Fig 10 Shipping: selected country details FigFig
11 10
Checkout after
Shipping: addingcountry
selected to cart details Fig 11 Checkout after adding to cart

31 31
5.1 A/B TESTING: PERFORMANCE 5.1 A/B TESTING:
5.1 A/B
PERFORMANCE
TESTING: PERFORMANCE

1. Introduction 1. Introduction
Task time analysis for Task1. Introduction
2 Task
Tasksuccess analysis
time analysis for
forTask
Task Task 2 2 analysis for Task 2
time Task
The KS test achieved p-value .62 which means the groups are The
Theresult of Kolmogorov-
KS test achieved p-valueThe Smirnov
KS.62 test
testwhich revealed
achievedmeans p-value p-value
the groups .62 which are meansThe the
A/B testing for analysing was done comparing the original QRWVLJQL¿FDQWO\GLIIHUHQW
A/B testing for analysing A/Bwas testing
done for comparing
analysingthe was done comparingwas
original the.00003
originalwhich showsQRWVLJQL¿FDQWO\GLIIHUHQW
QRWVLJQL¿FDQWO\GLIIHUHQW the data of both the groups are was
website to the redesigned version to know if the redesigned An independent
website meanswebsite
to the redesigned t-test
versionrevealed
to the
to know there
redesigned was
if the statistically
redesigned
version to know if theVLJQL¿FDQWO\GLIIHUHQW
Anredesigned
independent means Ant-testindependent
revealed means there was t-test revealed there VLJQ
statistically was
version has better performance metrics than the original VLJQL¿FDQW
version hasdifferrencein task
better performance
version times hasEHWZHHQ2ULJLQDOVXSUHPH
metrics
better than
performance
the originalmetrics than the Mann Whitney
VLJQL¿FDQW
original test revealed
differrencein VLJQL¿FDQW
task times there differrencein
was no statistically
EHWZHHQ2ULJLQDOVXSUHPH
task times EHWZHHQ2ULJLQD Man
website. (M= 82, SD= 200.5) and website.
website. Redesigned supreme (M= 30, VLJQL¿FDQWGLIIHUHQFHLQWKHWDVNVXFFHVVEHWZHHQ2ULJLQDO
(M= 82, SD= 200.5) and(M= Redesigned
82, SD= 200.5) supreme and(M=Redesigned
30, supremeVLJQ(M=
SD= 90); t(8) = 1.8, p= 0.002, two tailed. The magnitude of Supreme
SD= 90);(Md= t(8) =82, n=12)
1.8, and90);
p= 0.002,
SD= Redesigned
twot(8) tailed.
= 1.8, version
The (Md=
p=magnitude
0.002, two100, Supr
oftailed. The magn
2. Data collection and analysis 2. Data in
difference collection
the means and 2. Data
(Mean analysis collection
difference = 52) andwas largeanalysis(eta n= 4), U=58,inz=
difference the-0.8 anddifference
means p=
(Mean 0.58difference
in the means = 52) (Mean
was large (eta = 52)n=
difference wa4
I have collected the data required for performance analysis with squared = 0.17) the data
I have collected I have
required collected
for performance
the data required analysis forwith
performancesquared = 0.17)
analysis squared = 0.17)
with 







4 people after explaining them the tasks they had to perform. 4 people after explaining 4 people
them the after
tasksexplaining
they hadthem to perform.
the tasks they had to perform. 

Number of people participated - 4 Number of people participated

Number- of 4 people participated - 4



 



 


 



 
 





Metrics used for comparing the redesign vs original Metrics used for 

comparing
Metrics the used
redesign for comparing
vs originalthe redesign vs original 










1.Task Time 1.Task Time 1.Task Time












2.Task completion 2.Task completion
2.Task completion 



    
 


3.Errors made 3.Errors made
3.Errors made

    
 

    
 

    
 

/RVWQHVV /RVWQHVV /RVWQHVV Task success analysis for Task 3 Task

The result of Kolmogorov- Smirnov test revealed the p-value The
Task1LVWRVHDUFKIRUDMDFNHW¿OWHUVHOHFWDQGHQWHULW¶VSDJH Task1LVWRVHDUFKIRUDMDFNHW¿OWHUVHOHFWDQGHQWHULW¶VSDJH
Task time analysis for TaskTask1LVWRVHDUFKIRUDMDFNHW¿OWHUVHOHFWDQGHQWHULW¶VSDJH
3 was
Task .003
timewhich showsfor
analysis theTask datatime
Task 3of both the groups
analysis for Task are 3 was
Task 2 is to inspect the product’s images, read some user re- Task
The KS2test
is toachieved
inspect the Task
product’s
p-value 2 is which
.32 to
images,
inspect
meansread
thetheproduct’s
some userimages,
groups re-
are read some
The KSuser
test re-
VLJQL¿FDQWO\GLIIHUHQW
achieved p-valueThe KS.32 testwhichachievedmeans p-value
the groups .32 which are meansVLJQ the
views, and read the garment’s description. views, and read the garment’s
VLJQL¿FDQWO\GLIIHUHQW views, and description.
read the garment’s description. Mann Whitney test recealed
VLJQL¿FDQWO\GLIIHUHQW there was no statistically
VLJQL¿FDQWO\GLIIHUHQW Man
Task 3LVWR¿QGWKHVL]HLQIRUPDWLRQDQGFKHFNWKHVL]H\RX Task 3LVWR¿QGWKHVL]HLQIRUPDWLRQDQGFKHFNWKHVL]H\RX
Task 3LVWR¿QGWKHVL]HLQIRUPDWLRQDQGFKHFNWKHVL]H\RX
Mann Whitney test revealed there was no statistically VLJQL¿FDQWGLIIHUHQFH
Mann Whitney testinrevealed the
Mann taskWhitney
success
there wastestfor
nochecking
revealedsize
statistically there & was no statistic
VLJQ
VKRXOGEX\¿QGRXWGHOLYHU\DQGUHWXUQVLQIRUPDWLRQ VKRXOGEX\¿QGRXWGHOLYHU\DQGUHWXUQVLQIRUPDWLRQ
VKRXOGEX\¿QGRXWGHOLYHU\DQGUHWXUQVLQIRUPDWLRQ
VLJQL¿FDQWGLIIHUHQFHLQWKHWDVNWLPHVEHWZHHQ2ULJLQDO ¿WGHOLYHU\DQGUHWXUQVLQIRUPDWLRQEHWZHHQ2ULJLQDO6XSUHPH
VLJQL¿FDQWGLIIHUHQFHLQWKHWDVNWLPHVEHWZHHQ2ULJLQDO
VLJQL¿FDQWGLIIHUHQFHLQWKHWDVNWLPHVEHWZHHQ2UL ¿WG
Supreme (Md= 70, n=11) and Redesigned supreme (Md=59 , (Md=
Supreme89, n=12)
(Md=and 70, Redesigned
n=11)Supreme supreme
and Redesigned (Md= 70,(Md= n=11)94,
supreme and n= 4),
(Md=59
Redesigned , (Md=
suprem
1.Task time analysis for task 1 n= 4), U=48,
1.Task timez= -1.5 andfor
analysis p=task
1.Task 0.17. time
1 analysis for task 1 U=62,
n= 4),z= -0.24z=
U=48, and p=and
-1.5 0.73.
n=p= 4),0.17.
U=48, z= -1.5 and p= 0.17. U=6
The p-value after doing KS test is .58 which is greater than The p-value after doingThe KS test p-value is .58 after
which doingis greater
KS testthan is .58 which is greater than
7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ 
 




7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ 
 













 






VLJQL¿FDQW VLJQL¿FDQW 
VLJQL¿FDQW 






An independent means t-test revealed there was statistically An independent 
means Ant-test
independent
revealed means there was t-test
statistically
revealed there was statistically 





VLJQL¿FDQW differrence in task times EHWZHHQ2ULJLQDOVXSUHPH VLJQL¿FDQW differrence

inVLJQL¿FDQW
task timesdifferrenceEHWZHHQ2ULJLQDOVXSUHPH
in task times EHWZHHQ2ULJLQDOVXSUHPH 





(M= 72.75, SD= 192.54) and Redesigned supreme (M= 32.83, (M= 72.75, SD=
192.54)(M= and72.75,RedesignedSD= 192.54) supreme and(M= Redesigned
32.83, supreme (M= 32.83, 



SD= 98); t(8) = 2.4, p= 


 


 






SD= 98); t(8) = 2.4, p= 0.03, two tailed. The magnitude of 0.03,
SD= 98); two t(8)tailed.= 2.4,
Thep= magnitude
0.03, twooftailed. The magnitude of  

  

difference in the means (Mean difference = 40.21) was large difference in the meansdifference
(Mean difference in the means = 40.21) (Mean wasdifference
large = 40.21) was large
(eta squared = 0.12) 2.Task success
(eta squared analysis
= 0.12) (etaforsquared
Task 1 = 0.12) 2.Task success analysis 2.Task for Tasksuccess 1 analysis for Task 1
The result of Kolmogorov- Smirnov test revealed the p-value 3.Errors
The result made analysisThe
of Kolmogorov- forSmirnov
Task
result1oftest Kolmogorov-
revealed the Smirnov
p-value test revealed3.Erth

 



 was .0002 which shows 
 




the data of both the groups are

 



 The
wasresult
.0002achieved
which shows p-value
wastheof.0002 .06 of
data which
bothisshows
which thegreaterthethan
groups data
are of both the group The


VLJQL¿FDQWO\GLIIHUHQW



7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
VLJQL¿FDQWO\GLIIHUHQW VLJQL¿FDQWO\GLIIHUHQW 


Mann Whitney test revealed there was
no statistically


VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG
Mann Whitney test revealed Mann Whitney there wastest no statistically
revealed there was no statistic VLJQ




VLJQL¿FDQWGLIIHUHQFHLQWKHWDVNVXFFHVVEHWZHHQ2ULJLQDO The t independent test VLJQL¿FDQWGLIIHUHQFHLQWKHWDVNVXFFHVVEHWZHHQ2
revealed ZDVVWDWLVWLFDOO\VLJQL¿FDQW
VLJQL¿FDQWGLIIHUHQFHLQWKHWDVNVXFFHVVEHWZHHQ2ULJLQDO The




Supreme (Md= 100, n=12) and Redesigned version (Md= 100, GLIIHUUHQFHLQHUURUVPDGHEHWZHHQ2ULJLQDOVXSUHPH0
Supreme (Md= 100, n=12) Supreme and Redesigned
(Md= 100, n=12) version and(Md= 
Redesigned
100, GLIIH
versio




 


n= 4), U=23, z= -1.002 
and p= 0.25. 


 


SD=
n= 4),19.54)
U=23, andz=Redesigned
-1.002 n= and 4), supreme
p=U=23,
0.25.z= (M= 0.11, and
-1.002 SD=p= 23); t(9)
0.25. SD=
= 2.4, p= 0.02, two tailed. The magnitude of difference in the = 2.4

32 32 32
05) 4.means
Lostness(Meananalysis
differencemeans
= 1.8)(Mean
was small (eta squared
difference = 1.8) was small (eta 4.
= 0.05) Lostness
squared analysis 4. Lostness analysis
= 0.05)
e p-value The result achieved p-value of .731 which is greater than The result achieved p-value of .731
The result which isp-value
achieved greaterofthan
.731 which is greater than
ps are 7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ 7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ




 
 



 

VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W
 
VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W
VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W
ally test is “t independent test” in Parametric statistics. test is “t independent test”
testinisParametric
“t independentstatistics.
test” in Parametric statistics.

 

2ULJLQDO A “t independent test” (two tailed) to investigate if Redesigned A “t independent test”A(two tailed) to investigate
“t independent test” (two if Redesigned
tailed) to investigate if Redesigned
 
(Md= 100,6XSUHPHKDVORZHUORVWQHVVWKDQ2ULJLQVOYHUVLRQ 6XSUHPHKDVORZHUORVWQHVVWKDQ2ULJLQVOYHUVLRQ
6XSUHPHKDVORZHUORVWQHVVWKDQ2ULJLQVOYHUVLRQ
Result- The test revealed

 VWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH

 Result- The test revealed VWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH
Result- The test revealed VWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFH
LQORVWQHVVEHWZHHQ2ULJLQDO6XSUHPH0
 6'
  LQORVWQHVVEHWZHHQ2ULJLQDO6XSUHPH0 6' 
LQORVWQHVVEHWZHHQ2ULJLQDO6XSUHPH0 6' 
 


 



and Redesigned supreme (M= 0.12, SD= 19); t(8) = 1.01 and Redesigned supreme and (M= 0.12, SD=
Redesigned 19); t(8)(M=
supreme = 1.01
0.12, SD= 19); t(8) = 1.01
p= 0.0002, one tailed. The magnitude of the difference in the p= 0.0002, one tailed. The magnitude
p= 0.0002, oneoftailed.
the difference in the of the difference in the
The magnitude
means
Errors(Mean
madedifference = 0.39)
analysis Errors
for Task was
2 large
made analysis(eta squared
for Task=20.26) means (Mean differencemeans = 0.39) was large
(Mean (eta squared
difference = 0.39) was= 0.26)
large (eta squared = 0.26)
The result achieved p-value of .054
The result which isp-value
achieved greaterofthan .054 which is greater than
7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
H[W VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W
VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W

 
 

test is “t independent test”
testinisParametric
“t independent statistics.
test” in Parametric statistics.

 
 

e p-value The t independent testThe revealed QRVWDWLVWLFDOO\VLJQL¿FDQW
t independent test revealed QRVWDWLVWLFDOO\VLJQL¿FDQW

 
 

PH
are differenceLQHUURUVPDGHIRUWDVNEHWZHHQ2ULJLQDO6XSUHPH
differenceLQHUURUVPDGHIRUWDVNEHWZHHQ2ULJLQDO6XSUHPH

 
 

= (M= 1.94, SD= 22.3) and (M= Redesigned
1.94, SD= supreme
22.3) and(M= 0.5, SD= supreme (M= 0.5, SD=
Redesigned

 
 

eally 0.93); t(8) = -1.37, p= 0.238,
0.93);two t(8)tailed.
= -1.37, Thep=difference
0.238, twointailed.
the The difference in the

 
 

ng size & means (Mean differencemeans = 0.44) (Mean difference = 0.44)

 
 

DO6XSUHPH
  
, n= 4), 



 


   



 
 
  

  
 

 

 

3. Conclusion 
    
 
    
 3. Conclusion 3. Conclusion
$IWHUFRQGXFWLQJWKHSHUIRUPDQFHDQDO\VLVEHWZHHQ2ULJLQDO $IWHUFRQGXFWLQJWKHSHUIRUPDQFHDQDO\VLVEHWZHHQ2ULJLQDO
$IWHUFRQGXFWLQJWKHSHUIRUPDQFHDQDO\VLVEHWZHHQ2ULJLQDO
and redesigned version the results infer that and redesigned versionand the redesigned
results inferversion
that the results infer that
Errors made analysis Errors for Task 3 analysis for Task 3
made
The result achieved
Redesigned supreme p-value
hasThe
betterof .78
result which is greater
achieved
performance in taskthan
p-value of .78and
time which is greater than supreme has
Redesigned Redesigned
better performance
supreme has in task
better
time
performance
and in task time and
7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
7KLVLQGLFDWHVWKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\1RQ
LQRQHWDVNRIHUURUVPDGH,WKDVVKRZHGVLJQL¿FDQWGLIIHUHQFH LQRQHWDVNRIHUURUVPDGH,WKDVVKRZHGVLJQL¿FDQWGLIIHUHQFH
LQRQHWDVNRIHUURUVPDGH,WKDVVKRZHGVLJQL¿FDQWGLIIHUHQFH
H[W VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W
when compared to original VLJQL¿FDQWIURPWKDWZKLFKLVQRUPDOO\GLVWULEXWHG6RWKHQH[W
website. However, it has not when compared to originalwhen website.
comparedHowever,
to original
it haswebsite.
not However, it has not
than test is “tin
changed independent
Task success test”
test
andinisother
Parametric
2 tasksstatistics.
“t independent of test”
errorsinmade.
Parametric statistics.
changed in Task success changed
and other
in Task
2 tasks
success
of errors
andmade.
other 2 tasks of errors made.
QWO\1RQ The t independent testThe revealed QRVWDWLVWLFDOO\VLJQL¿FDQW
t independent test revealed QRVWDWLVWLFDOO\VLJQL¿FDQW
PH differenceLQHUURUVPDGHIRUWDVNEHWZHHQ2ULJLQDO6XSUHPH
Redesigned supreme has differenceLQHUURUVPDGHIRUWDVNEHWZHHQ2ULJLQDO6XSUHPH
got better navigation compared the Redesigned supreme has Redesigned
got bettersupreme
navigationhascompared
got betterthe
navigation compared the
D= (M= 0.64,
LJQL¿FDQW original oneSD=as it 25.3) and
has very (M=Redesigned
low 0.64, supreme
25.3) and(M=
SD=score.
lostness 0.52, SD=supremeoriginal
Redesigned (M= 0.52,
oneSD=
as it has very
original
low lostness
one as itscore.
has very low lostness score.
e
PH0 0.33); t(8) = -0.32, p= 0.528,
0.33);two t(8)tailed. The
= -0.32, p=difference
0.528, twointailed.
the The difference in the
D= 23); t(9) means (Mean differencemeans = 0.12) (Mean difference = 0.12)
nce in the

33 33
5.2 A/B TESTING: SATISFACTION 5.2 A/B TESTING: SATISFACTION
5.2 A/B TESTING: SATISFACTION

1. Introduction 1. Introduction
The achieved p-value in the KS test was .078 which1.indicates Introduction 5.The Report
achieved p-value in the KS test was .078 which Theindicates
achieved p-value 5. inR
WKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\6RWKHQH[WFRQGXFWHGZDV WKHGDWDGRHVQ¶WGLIIHUVLJQL¿FDQWO\6RWKHQH[WFRQGXFWHGZDV WKHGDWDGRHVQ¶WGLIIHUVL
A/B testing was done comparing the original website to the “tA/B
independent
testing was test”.
done comparing the original website A/Btotesting
the was done Doing
“t comparing
independent thetest”.
original website to the “t independent test”.Doin
redesigned version to know if the redesigned version is has An independent
redesigned means
version t-test
to know wasredesigned
if the conducted version
to compare
redesigned
is hasthe versionThe independent
Anknow
to most iffrequent means
the redesigned t-test was
activity undertaken
version conducted
is hasthroughouttothe
An independent
compare
think the means
The
more satisfaction metrics than the old one. SUS
more scores of original
satisfaction and than
metrics redesigned
the old versions.
one. SUS exercise
more satisfaction metrics
aloud scores
than the ofwasoriginal
old one. andon
clicking redesigned
the links or versions. SUS scores of original
buttons(10 alou a
The test revealed there wasVWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFHLQ The test revealed
instances). The nextthere wasVWDWLVWLFDOO\VLJQL¿FDQWGLIIHUHQFHLQ
frequent activity users did wasThe test revealed there
to search instaw
2. Methods 2. Methods
SUS scoresEHWZHHQ2ULJLQDOVXSUHPH0 6' 2. 
Methods SUS
for scoresEHWZHHQ2ULJLQDOVXSUHPH0
a jacket(6 instances). For example, one participant 6'
SUSstated

scoresEHWZHHQ2U
³, for a
SUS rating scale (Brooke, 1996) was chosen to measure the and
SUS Redesigned
rating scalesupreme
(Brooke,(M= 72.6,
1996) SD=
was 360.54);
chosen t(13)
SUS =
to measure -7.05,
rating and Redesigned
the scale (Brooke, 1996) wassupreme chosen to(M= 72.6, SD=
measure
ZRXOGOLNHWRVHHWKLVPLGGOHMDFNHWZKLFKLVIRFXVHG´ the 360.54);andt(13)
Redesigned
= -7.05, suprem ZRX
satisfaction in quantitaive method. p= 0.00001, two
satisfaction tailed. Themethod.
in quantitaive magnitude of differencesatisfaction
in the p= 0.00001,
in quantitaive method. two tailed. The magnitude of difference p=in 0.00001,
the two tailed. T
Number of people participated - 13 means
Number (Mean difference
of people =35.6) was
participated - 13 large (eta squared
Number0.52).of people Thinking
means (Mean
participated - 13difference =35.6) was large (eta squared means0.52).(Mean differenceThin
Method - Quantitative SUS scale rating Method - Quantitative SUS scale rating Method - Quantitative TheSUS mostscale
common ratingthought the participants had during the task The
The results revealed average SUS score of Redesigned Thearesults
was good thing revealedwhileaverage
they were SUS scoreabout
talking of Redesigned
wellThe results revealedwas
structured ave
2.1 Data collection 2.1 Data collection
VXSUHPHLV!VDWLV¿HGZKLFKLVIDUEHWWHUWKDQWKH 2.1 Data collection VXSUHPHLV!VDWLV¿HGZKLFKLVIDUEHWWHUWKDQWKH
menu with simple navigation(5 instances). The other VXSUHPHLV!VD
thoughts men
I have collected the data of SUS scores with 13 students of our original
I have supreme
collected is the37.1 (<50
data scorescores
of SUS is unacceptable) clearly
with 13 students
I have collected original
of our theparticipants supreme
data of SUS mentioned
scoresis 37.1
with (<50
were scorethe
13 feeling
students isofunacceptable)
number
our original
clearly
of products supreme is 37.1parti
class by using a Google forms survey which has 10 questions showing
class bythe improvement.
using a Google forms survey which has 10 class
questions showing
were
by using a Google less
forms thesurvey
for improvement.
selecting (4 instances).This
which has 10 questions showing
was probably due the
to improvemen were
regarding the usability of websites. regarding the usability of websites. the limitations
regarding the usability of websites. of products shown in the prototype. Products the l
Investigating Individual scale scores Investigating
being highlighted Individual
in the centerscale scores
of the homepage (3 Investigating
instances) Individua
bein
2.2 Data analysis 2.2 Data Redesigned
Comparing analysis version (See Bar chart 2) 2.2 Data analysis For example,Redesigned
Comparing one participant stated
version (See Bar chart 2)Comparing Redesigned
“,W¶VJUHDWWKDW,FDQVHOHFW For e
The SUS scores for each website were calculated by using Redesigned
The SUS scores version forwas
eachfound to behaving
website good characteristics
were calculated The
by using
SUS scores for Redesigned
each websiteversion was foundby
were calculated
PDQ\SURGXFWVIURPWKHWRSFDWHJRULHV´. to using
behaving good characteristics
Redesigned versionPDQ was
a SUS calculator and later I ran some statistics on the SUS inaindividual SUS scores.
SUS calculator and later I ran some statistics ona the
SUSSUScalculator and in individual
later I ran SUS somescores.
statistics on the SUS in individual SUS scores
scores to understand how my redesigned version is performing • scores
Higherto frequent
understand usehow my redesigned version scores is performing
to understand • howHigher frequent use
1HJDWLYH,QRQHLQVWDQFHSDUWLFLSDQWIHOWWKH¿OWHUZDVQRW
my redesigned version is performing • Higher frequent use 1HJ
when compared to original website. • when
/HVVFRPSOH[WRXVH
compared to original website. when compared toshown • /HVVFRPSOH[WRXVH
original until the bottom of the page. This is showing• there
website. /HVVFRPSOH[WRXVH
is still show
• Easy to use • Easy
room to use
for improvement. • Easy to use room
3. Report • 3.Not
Report
Requiring technical support 3. Report • Not Requiring technical support • Not Requiring technic
• Functions integrated well Feeling
• Functions integrated well • Functions integrated Feel
Bar chart 1 SUS scores of orignal vs redesigned • Easier to learn
Bar chart 1 SUS scores of orignal vs redesigned Bar chart 1 SUS •scores
Easier to learnvs redesigned
2QO\SRVLWLYHIHHOLQJVZHUHGHWHFWHGWKURXJKRXWWKHZHEVLWHQR
of orignal • Easier to learn 2QO\
• 8VHUVGRQ¶W¿QGLWDZNZDUGWRXVH • 8VHUVGRQ¶W¿QGLWDZNZDUGWRXVH
negative feelings were detected. They felt happy(6 •instances). 8VHUVGRQ¶W¿QGLWDZ nega
• 8VHUVKDYHPRUHFRQ¿GHQFHXVLQJWKHV\VWHP • example,
For 8VHUVKDYHPRUHFRQ¿GHQFHXVLQJWKHV\VWHP
participant once said ³,DPKDSS\WKDW,VHHP\ • 8VHUVKDYHPRUHFRQ For e





• /HVVHUOHDUQLQJFXUYH











• /HVVHUOHDUQLQJFXUYH
GHOLYHU\FRVWVKHUHLWVHOI´ • /HVVHUOHDUQLQJFXUYH GHOLY


 4. Think Aloud protocol 
 6.4.Conclusion

Think

Aloud protocol 4. Think Aloud prot
6. C
Number of people participated - 4 Results
Number from
of people
satisfaction
participated
metrics- showed
4 an overallNumber of people particResu
Method- Qualitative THink Aloud improvement
Method- Qualitative
in the usability
THink Aloud
of the website for the chosen
Method-tasks
Qualitative impr
THin
This suggests the improvements has brought a positive impact This

4.1 Data collection

and analysis 
4.1
on theData collection and analysis
design. 4.1 Data collection on tha
The full transcripts were analysed which were recorded while 7KHXVHUVDUHPXFKPRUHVDWLV¿HGZLWKWKH5HGHVLJQHG
The full transcripts were analysed which were recorded The full
while 7KH
transcripts were
participants were performing think aloud on Redesigned version version.
participants were performing think aloud on Redesigned participants
version vers
were perform
of supreme.The user tasks were recited by myself before they of supreme.The user tasks were recited by myselfofbefore supreme.The
they user tas
  
start doing. start doing. start doing.



 
 


 
 


 


34 34 34
 Table 1 showing coding of thematic analysis Table 1 showing coding of thematic analysis

y undertaken throughout the think

ng on the links or buttons(10
uent activity users did was to search
For example, one participant stated ³,
GOHMDFNHWZKLFKLVIRFXVHG´

ht the participants had during the task

hey were talking about well structured
tion(5 instances). The other thoughts
ere feeling the number of products
instances).This was probably due to
s shown in the prototype. Products
enter of the homepage (3 instances)
pant stated “,W¶VJUHDWWKDW,FDQVHOHFW
RSFDWHJRULHV´.
al vs redesigned supreme
Bar chart 1 showing Individual SUS scores for Original
Bar vs redesigned
chart 1 showingsupreme
Individual SUS scores for Original vs redesigned supreme

HSDUWLFLSDQWIHOWWKH¿OWHUZDVQRW


 
the page. This is showing there is still   


    


 
 
 
UHGHWHFWHGWKURXJKRXWWKHZHEVLWHQR
 
etected. They felt happy(6 instances).

once said ³,DPKDSS\WKDW,VHHP\ 
  
 
 
metrics showed an overall

ility of the website for the chosen tasks

ements has brought a positive impact 
 
HVDWLV¿HGZLWKWKH5HGHVLJQHG
 
                        

   

   

 

35 35
6. CONCLUSION 6. CONCLUSION

The A/B testing results from performance and satisfaction

The A/B testing
metricsresults
has proved
from performance
that the redesigned
and satisfaction metrics has proved that the redesigned
version has better usability than the original one. version has better usability than the original one.

However, the prototype is limited in it’s functionality

However,
to only certain
the prototype
pages,isthe
limited
possibilities
in it’s functionality
of getting to only certain pages, the possibilities of getting
lost and errors made might have been reduced. The lost participants
and errors made
were might
onlly 4have
people
been so,reduced.
the results
The participants were onlly 4 people so, the results
might not be accurate to the original website. So,might
to getnot
better
be accurate
results more
to the
participants
original website.
would beSo, to get better results more participants would be
recommended with proper calculation of sample size. recommended
Within thewith
limited
proper
timecalculation
and covid restrictions
of sample size. Within the limited time and covid restrictions
EHHQSODFHGPRVWRIWKHZRUNKDVEHHQPDGHUHPRWHO\VRJHWWLQJPRUHSDUWLFLSDQWVZDVGLI¿FXOWLQ
EHHQSODFHGPRVWRIWKHZRUNKDVEHHQPDGHUHPRWHO\VRJHWWLQJPRUHSDUWLFLSDQWVZDVGLI¿FXOWLQ
the current situation. the current situation.

What was the biggest improvement? What was the biggest improvement?
• I would say the biggest improvement in the redesigned
• I wouldversion
say thewas
biggest
to make
improvement
the navigation
in thesimple
redesigned version was to make the navigation simple
DQGPXFKHI¿FLHQW DQGPXFKHI¿FLHQW
• Imparting search bar and Top level navigation•menu Imparting
has mad search
ethe bar
navigation
and Topquicker
level navigation
and it wasmenu has mad ethe navigation quicker and it was
the reason to reduce the task time effectively. the reason to reduce the task time effectively.
• Next important thing made was including the top • Next
tasksimportant
like sizingthing
information
made wasandincluding
shipping the top tasks like sizing information and shipping
LQIRUPDWLRQRQWKHGHOLYHUXSDJHLWVHOI2QWKHRULJLQDOYHUVLRQWKRVHLQIRUPDWLRQZHUHRQGLIIHUHQW
LQIRUPDWLRQRQWKHGHOLYHUXSDJHLWVHOI2QWKHRULJLQDOYHUVLRQWKRVHLQIRUPDWLRQZHUHRQGLIIHUHQW
pages and they were so cluttered. pages and they were so cluttered.

What could be still improved? What could be still improved?

• 7KH¿OWHUVSDJHFRXOGEHLPSURYHGE\PDNLQJWKH¿OWHUVRSWLRQYLVLEOHXQWLOWKHHQGRIWKHVFUROOLQJ
• 7KH¿OWHUVSDJHFRXOGEHLPSURYHGE\PDNLQJWKH¿OWHUVRSWLRQYLVLEOHXQWLOWKHHQGRIWKHVFUROOLQJ
In the search results page the more products could
In the
be included
search results
helpingpage
the user
the more
to see
products
more incould be included helping the user to see more in
single viewport. single viewport.
• A/B testing could be done with more number of• participants
A/B testingwith
couldmuch
be done
morewith
interactive
more number
prototype.
of participants with much more interactive prototype.

36 36