NARAEN SELVAKUMAR
CS COURSEWORK : MEN’S FORMAL WEAR CLOTHING WEBSITE
Section A : Analysis
Section 1.1. Problem Identification
Section 1.1.1 Definition of problem
My project aims to create an online system for a formal wear clothing website. It will
allow users to effortlessly browse, filter and review men’s formal wear products. While
you might be thinking there are clothing websites like ASOS and Moss Bros which
already solve this problem. They are large-scale clothing websites that are built using
advanced technologies ,such as APIs, databases and large-scale infrastructures which
are outside the scope of my project. I’m aiming to design a simplified version which
shows the core functionality of these systems using algorithmic techniques and
lightweight data handling.
In many of these smaller-scale systems , users tend to face several obstacles when
browsing and purchasing clothing. They often lack advanced searching and filtering
options, this makes it incredibly difficult for the users to quickly locate items their desired
item. An inability to filter by colour,price,size or brand, users have to spend significant
amounts of time searching which will massively reduce their satisfaction and
accessibility. There is also a lack of recommendation features among these smaller-
scale systems which will cause the system to feel static and less interactive for the user.
In some cases, where recommendations are given to users they tend to be quite
inaccurate and misleading. This will once again significantly increase the time taken to
find matching products leading to a poor user [Link], there is a struggle
among smaller-scale systems to implement an interactive user review system. This
limits the interaction between users making them feel lost and ignored during their
shopping experience.
Section 1.1.2. How is the problem solvable using computational methods
Problem Solvability by computational methods
The physical stores which sell men’s Abstraction will be used to shorten down
formal wear are very large making it very sections of the stores. This will make it
hard for customers to navigate their way easier for users to find their needs and
around the stores wants as
It often takes a great deal of time for Problem decomposition can be used to
customers to find the specific thing they split the website into smaller parts.
are looking for This will make it easier for users to find
their desired product as the online stores
decomposes the vast selection of clothing
by categories like styles, sizes and
brands
Some customers aren’t happy with the Algorithms are used to provide customers
shopping experience they often receive in tailed clothing suggestions . This
physical stores improves the customer experience.
Customers aren’t always able to find an Pattern recognition will allow customers to
accurate match for what they’re looking search for items using visual search. This
for will result in customers finding more
accurate results.
Customers dont get recommendations Pattern recognition will allow customers to
given to them by staff as they aren’t receive more thought out and better
aware of their preferences. This takes recommendations as it will recognize
time for the customer to establish their patterns in browsing and purchasing
preferences to staff. Even once staff are history. This will lead to a better overall
aware of the customers preferences, the shopping experience for customers.
recommendations wouldn’t be accurate
Section 1.2. Stakeholders
Youth customers Youth customers who are able to use
mobile phones,laptops and ipads.
Advertisements that are displayed in the
website will be cahchy and attract youth
customers to satisfy theiri personal
shopping experience.
The incredibly high number of young
people on social media platforms like
tiktok, instagram and twitter will lead to
clothing being promoted to countless
other young people in a short amount of
time. So youth customers are a very good
source of promotion for my project..
Needs for youth customers would be
offering discounts and introducing loyalty
schemes as this would cause existing
youth customers to continue shopping at
my website.
Also offering “buy now pay later” payment
methods as this is more appealing for
youth customers per multiple reports.
Their position in the company is
customers and they are responsible in
generating sales for the website.
Some can also act as influencers when
promoting the product on social media
platforms. These youth customers help
generate even more sales.
Retailers Retailers can use this website to place
bulk orders.
Ads about the bulk purchase discounts
will be targeted towards the retailers.
Discounts and per unit prices will be
adjusted based on the order quantity.
Good retailers enhance customer
experience as they are responsible for
quality, refund policy etc.
Retailers are able to utilize tools such as
analytic dashboards that are provided by
the clothing website. This will result in
improvements in performance, customer
behaviour etc.
Retailers will need to have a good
understanding of payment gateways to be
able to manage transactions. This is
important as it will make sure payments
and refunds are smooth and secure.
I will have multiple retailers in my project.
I would like to choose a mix of well
known, upcoming and brand new
retailers.
They will hold a relatively high position in
the company as they are very integral to
the project.
Investors Inverstors can use this website to know
the stock price, earnings and any other
details that will be required by investors.
They will play critical roles in the growth
and expansion of this website.
Their role in the project will majorly be
providing capital to fuel expansion of the
website
In some cases investors will be allowed to
make very important financial decisions.
However most investors will be given
some control of the company.
Investors will be experienced with
financial technology. As this will be
incredibly useful in my project due to my
financial systems online. With an investor
experienced in these depths it will make
the project more easier.
There are a variety of investors we will
have in our project e.g. angel investors
and venture capitalists.
Section 1.3. Solutions to similar problems that exist
BOOHOO MAN
Webistes like boohoo man have been created for all ages but more specifically
teenagers and have resulted in a massive success due to a more comfortable and
convenient way of shopping.
Boohoo man uses popular uk youtubers and footballers to promote their brand and i
intend to do the same thing with my website. Boohoo man uses a standard AES
password encryption algorithm to store the user credentials in the database. I am
aiming to use the same AES algorithm for storing user passwords securely in the
database. Boohoo man do offer massive discounts and low prices to help certain
customers. I am going to partly implement this strategy, in the sense that I will offer
discounts and will often reduce prices but I won't be as severe so there won't be
massive discounts and incredibly low prices . It will be online only like boohoo man
The category tab is clearly visible for customers allowing them to reach their desired
products in a much shorter [Link] will improve the shopping experience for
[Link] is a search bar on the top left to allow customers to quickly find their
desired product. Once again we can see boohoo man allows customers to have a quick
shopping experience.
Boohoo man provides users with a variety of shortcuts regarding help, information and
about us. This is all incredibly helpful for customers; it gives them a better insight on
boohooman. This will be highly appreciated by users and will cause them to use the
website more often.
Shein
Similar to boohooman in the sense they both offer cheap prices and very good
discounts - this is done by repeatedly making discounts pop up on the user’s screen. I
believe this is a very smart strategy and will definitely increase sales so it will be
implemented by me.
On the home screen of the website there are multiple discounts on display - this is done
to hook the user on the website. I wish to implement a similar approach on my website
as it will bring a lot of loyal customers. Their use of colour and boldness to highlight
certain aspects of the home page so the customers are instantly attracted to it. For
example, at the top of the home page we can see there is bold writing inside a yellow
box. The choice of a vibrant colour combined with bold writing will instantly cause
attraction by [Link] this case it is done to obtain new customers.
Section 1.4. Essential features of my computational system
Search and advanced filtering
Allows users to search for items using a search bar and significantly narrow down an
item using filters. Filters include size,colour,brand,availability,price etc. This will
drastically improve user experience as time taken to find their desired item will be much
shorter.I am implementing this using JSON files.
User Accounts and Authentication of User Accounts
Allows users to register for an account or login to their existing account or if needed a
password reset option which will allow them to reset their password depending on the
email they used. Allowing users to have their own account on the website will allow
them to personalize their account to their own accord, save their measurements for
future purchases and view their order history. I’m using hashing to secure the
passwords and MDF files to store them. All credentials will be checked against MDF
files for validation purposes.
Shopping Cart
Users will be able to add/ remove items, update the quantity of an item. This feature is
essential for my website as it will allow users to easily make changes to their shopping
providing them with a more efficient shopping experience. This is being accomplished
using a session cart as I have opted to not use a database. The session cart will
temporarily store the cart data until the program or browser is closed.
User Reviews
This feature allows users to share their thoughts of the product in two forms: numerical
rating out of 5 or a text comment. There is also an option provided to input their name or
remain anonymous. This makes the user experience more interactive and so will boost
the satisfaction of users. I am saving the reviews in a JSON file so once the program
restarts the reviews will appear under their respective products.
Recommendation Engine
This feature gives the user recommendations based on their current cart contents and
past purchases. For example if there is a striped tie currently in the cart, the user will
receive recommendations of shirts which would complement well with the tie. It gives
the website an edge among other clothing websites who don’t have this feature. It
enhances the user’s experience by allowing them to instantly compare between other
similar items. I am implementing this into my system using a recommendation algorithm
which will operate on dictionaries or lists containing product information, the system will
use loops and conditional logic to compare attributes of two different products and
select common features between the two. As you can see it combines computational
concepts such as pattern recognition, abstraction and algorithm design.
● One-click checkout - Allowing returning customers to complete payments quickly
with saved payment and shipping details.
● Different payment methods such as buy now pay later. Also allows customers to
pay securely through paypal and applepay. With the buy now pay later option,
customers will receive emails a couple days before they are set to pay their
installments.
● Providing shortcuts for customers to make their shopping experience quicker and
better overall.
● Providing customers with categories of help - similiar to the screenshot I have
provided of boohooman. This allows customers to find solutions to their problems
fairly quickly.
Section 1.5. Limitations to the solution
There were some features which I wish I could have included in my project but were just
simply unreasonable due to time, software, hardware and ability constraints. I'm going
to talk about some of these features below and explain the limitations surrounding it.
Lack of a true database system
This limitation is mainly due to a lack of my ability and time but also due to a decision I
made as I believed it would deter from the underlying purpose of my project. Data is
stored in local JSON files rather than a relational database.
Time : Designing, setting up and testing a full database would significantly increase my
development time. It would reduce the time available for more essential features like my
recommendation engine and user reviews.
Ability : I felt trying to implement a database of this scale would be out of my depth,
knowledge of aspects such as schema design and connection handling in code seemed
too advanced for me.
In the future a database such as MySQL could be implemented for a clothing website of
a much larger scale. MySQL would store data persistently and significantly improve
scalability.
Simplified interface design
The interface of my clothing website is static with limited animations and styling. There
are also no responsive layouts.
Time : I opted to prioritise my development time focusing on functional programming
features rather than advanced UI frameworks.
Ability : I wasn’t entirely confident in my knowledge of advanced design patterns so I
felt it would be better to focus on other aspects of the program which I felt my
knowledge was more secure. My experience in Java is quite strong in most areas
however it's quite limited when it comes to animation libraries. These two factors ended
up convincing me to look away from creating a more advanced interface design.
Hardware : Some users may not be able to view these advanced animations the way I
want them to view it. For example, some animations may lag, images with a higher
resolution may load much slower and interactive features may feel unresponsive. These
are caused by limitations in the hardware they own in which I have zero control over,
e.g. Low-end CPUs, Older GPUs, low-resolution displays, slow HDDs.
No integration with Payment APIs
My current system will not integrate with real-world payment gateways such as Paypal
and Stripe.
Time: Setting up a live payment system along with testing and securely implementing it
requires many stages of verification, compliance with PCI DSS (which is outside my
project scope) and API key configuration. All of which are incredibly time consuming
and given the development time given for this project - it’s simply not reasonable to
implement this feature.
Software: My project uses front-end-only technologies however front-end code doesn’t
execute on a server meaning it's incapable of safely handling sensitive operations such
as user authentication or financial transactions.
Section 1.6. Specify and justify the solution requirements include
hardware and software configuration
Section 1.6.1. Software Requirements
Programming language Advantages Justification
Java Java is an object oriented Due to java being the most
programming language widely used programming
and most widely used language, it would most
across the world. likely mean it has been
It uses the oop concepts discovered and mastered
like objects, classes, at a higher rate. This will
abstraction, inheritance, allow me to find more tools
polymorphism, for my program. This will
encapsulation. also mean there are more
tutorials available on the
Java programs can be run internet for me to learn as i
in different IDE’s. Eg. have very minimal
Eclipse is a free version experience in Java.
that can be downloaded
and installed on any Its ability to be run on
platform. different IDEs is also very
appealing as it will save
Java has an edition called costs for my project.
Java EE which provides
users with robust
frameworks like Hibernate
and Spring that enable
vertical and horizontal
scalability
Java have many built-in
security APIs which help
companies secure
sensitive data like payment
info and customer info.
Python Has powerful web Python would be a very
frameworks like Django smart choice for my project
and Flask that streamline due to the fact that it
the development. contains libraries which are
very optimal for my specific
Python has a variety of project. This means python
different libraries. Libraries could enhance my project
such as Panda and NumPy while also making it easier
are very optimal when it for me.
comes to data analysis as
they are able to reveal Although python is
trends in customer considered suitable to
preferences. complete the back end of
my project so it might
Its compatibility with cloud mean i have to rule out
services like google cloud python unless i want to
allows easy scalability for complete some of it in
storage. python.
.NET .Net is also an object .NET shares the
oriented programming advantages of Java due to
language that uses all the the fact they both use
OOPS concepts like Java. OOPS concepts which are
useful in coding.
The disadvantages when
compared to JAVA Its dependency on the
programming might be the Windows platform doesn’t
development environment affect me as I own a
might be heavy and can Windows laptop.
have a dependency on
windows platform.
JSON files
IDE - Github or Eclipse
Web server - Apache Tomcat
Front End development - HTML, CSS, JSP and Javascript
Back End development - Java
Section 1.6.2 Hardware Requirements
A laptop or computer with Windows OS with Windows 10 version.
RAM - 4gb or above.
Processor - Intel i5 core processor.
Storage - HDD or SSD - 250 gb or above.
Monitor, Keyboard and Mouse.
Input
The user will only need a basic laptop/computer so he/she is able to access the site. It
can also be accessed on mobile phones and ipads. It really doesn’t require anything
specific or “over the top”.
Processing
My program will use a standard computer with CPU and motherboard. Once again, my
program doesnt have any demanding requirements. The CPU that is required can be
obtained with every modern computer.
Output
My website can be displayed on something as basic as a mobile phone. Again, there
are no demanding requirements.
Section 1.7. Identify and justify measurable success criteria for
the proposed solution
Section 1.7.3. General Success Criteria
Requirement Justification How this will be tested
The solution should This is an essential feature I will act as an user and
provide users with of my solution as it will add view a specific item
recommendations when allow users to have a much and then verify if the
they’re looking at a product more enjoyable experience relevant products appear
as recommendations
The solution should allow This is a basic feature and I will act as an user and
users to input text non-negotiable for my attempt to input
/symbols/numbers in the system. It allows users to text/symbols/numbers into
search bar quickly find what they’re the search bar and see if it
looking for allows me to do this
The solution should have a This is another I will act as an user and
menu button on the top left fundamental feature and is login to the home page. I
of the home page. When it important for customers as will check if there is a
is clicked it should provide it will help them navigate menu option at the top left
a drop down of categories. across the website. of the home page. I will
click the home page to see
if I am provided with a drop
down.
All inputs will be validated Prevents unexpected I will act as an user and
before it’s processed and crashes and improves attempt to submit login
stored usability by informing users credentials, review forms
of any mistakes incorrectly. I will also enter
invalid empty text fields,
invalid email addresses to
confirm I am getting the
correct error messages.
Submission should be
prevented until all fields
are valid
The solution should have An essential feature which I will act as an userand
an orders tab located at allows customers to view place an order and after
the top of the page their past orders giving everything has been
them reassurance of what confirmed I will check if my
they have ordered and not order has correctly
ordered. appeared in the orders tab.
The solution should This is also not a I will act as an user and
provide the user with fundamental but again not login to the home page. I
categories of help at the a complex feature. This will scroll to the bottom of
bottom of the home page allows customers to quickly the home page and see if
which when it is clicked will receive help with any of there are categories of
redirect the user to the their problems. help. I will proceed to click
correct page them and see if they all
redirect me to the correct
pages.
The solution should allow This is a fundamental I will act as a user and
users to save their login feature. It allows existing login to the page. Before I
credentials by giving the customers to login to their am redirected to the home
user an option to save the accounts quicker. page I see if I get an option
credentials. which says “Do you want
to save your credentials?”
The solutions should allow A shopping cart which I will add items to the
customers to add, remove functions properly is a core basket, remove them and
and update items in their part of the shopping update quantities of items
cart experience. It improves and check if the basket
convenience and user correctly updates
control. according to the changes i
make.
Section [Link] Design usability success criteria
The design usability success criteria will cover aspects of my clothing website which
correlate with how it will feel and look for the user.
Requirement Justification How this will be testes
The website will open with This allows users to save This will be tested by
a login screen their shopping if they wish to opening up my website
come back later and allows and checking if there is a
them to receive personalized login screen.
notifications.
On the login screen there This provides the user with This will be tested by
will be two options : log in, other options based on what checking if these options
sign up they wish to do. This is very are available on the login
important as if we dont have screen.
an option the user wishes to
use. They won't be keen on
using the website.
All the font must be size 11 This prevents the need of This will be tested by
having more pages on the checking through the
website therefore making it website to see if the font
easier to navigate through is in size 11.
the website.
All the product images Making the product image This will be tested by
should be 2040 px by 2040 sizes consistent will make checking through the
px and maintain a high the site appear more website to make sure that
resolution appealing. the product images are
2040px by 2040px.
All categories should be in This makes the categories This will be tested by
bold more visible for users so checking all the
they are able to find their categories in the website
items quicker are in bold.
The title on the home page This is so the company This will be tested by
should be in bold and at name can stand out so users checking if the title on the
least size 40. dont forget the company home page is in bold and
name when they wish to at least size 40.
revisit the website.
Buttons such as ‘proceed This is so it doesnt take too This will be tested by
to checkout and ‘ add to much space on the screen finding these buttons on
basket ‘ should be 144 px however at the same time is the website and checking
by 42 px in size . clearly visible for the user. if they are around 144 px
by 42 px in size.
Small interactive icons This is so it takes up as This will be tested by
such as the basket and minimal space as possible. It finding these icons on the
search icon should be 24 is usually placed at obvious website and checking if
px by 24 px in size. parts of the screen so can they are around 24 px by
be small. 24 px in size.
Search bar needs to be a The users will be able to This will be tested as I
minimum of 27 characters type as many characters as will type more than 27
wide they want but will only see characters in the search
27 characters. This is bar. I will then check to
because it is what I deem see if only 27 of the
appropiate characters are visible.
The layout is consistent on I will browse through all the Reduces confusion for
all pages pages and make sure the users when navigating
layout is the same for all through the website.
pages. Tabs are in the same
order and the header is
correctly positioned
Section [Link] Input usability success criteria
Requirement How will it be tested Justification
There is a list of interactive This provides users with
options along the top of shortcuts to quickly find
the website and when their desired item.
clicked it should lead to
more options which will
redirect the user.
On the login screen there
should be two boxes
labelled email and
password which allow the
user to enter and submit
text
The user should be able to I will act as a user and
save their login details with login to my account. I will
a ‘ save my details’ button check to see if I am
once they login to their presented with a ‘ save my
account. details ‘ button.
The user should always I will act as a user and
receive a ‘ save my details’ login to my account. I will
button once they login to ignore the ‘ save my
their account unless they details’ button I am
have previously clicked it presented with.
The user should be able to I will act as the user and This allows customers to
click an ‘ add to basket ‘ login to the home screen. I have a better shopping
button next to an item. It will randomly choose an experience as they’re able
should add this item to the item. I will check if there is to store items which they
basket. an ‘ add to basket ‘ button hold an interest in.
next to the item. I will click
this button. I will then
return to the home screen
where I will click the basket
icon at the top right. When
I am redirected to the
basket page, I will check to
see if the item which I just
added is visible.
The user should be able to I will act as the user and This allows customers to
click a basket icon at the login to the home screen. I access the basket quicker .
top right of the home will then check if there is a This will make it easier for
screen. It should also basket icon at the top tight customers to remove items
correctly redirect the user of the home screen. I will from the basket or proceed
to a page which has all the click the basket icon to see to checkout from the
items the user has added if I am correctly redirected basket.
to basket to a page which has all the
items that I added to the
basket.
The user should be able to I wil act as the user and This will allow users to
click the ‘go to checkout’ login to the home screen. I quickly proceed to
button next to an item. It will then randomly choose checkout once they want to
should also correctly an item to purchase. I will buy an item.
redirect them to the check if there is a ‘ go to
checkout page. checkout ‘ button next to
the item. I will also click it
to see if I am correctly
redirected to the checkout
page.
Section [Link] Output usability success criteria
Requirement How it will be tested Justification
Interactive boxes based on I will login to the home Hooks in the user as it will
discounts placed around screen. When I enter the tempt them with interesting
the home screen home screen I expect to offers.
see multiple of these
interactive boxes.
Once the user has logged Thus will be tested by me The user needs to be able
in, the user should be acting as the user and to access the home
redirected to a home page logging in. I will check if i screen. If the user is not
have been correctly correctly redirected to the
redirected to the home home page after logging in,
page users won’t be able to use
the website.
Section 1.7.5