Website breakdown
Site wide options
Futura Font has been uploaded to the site.
Cambridge font has been uploaded to the site.
Futura font has been used as the main font for all text on the site.
Site Header
Homepage
The homepage is a standard homepage template, there is very little customisation on the page. The advert that is displayed is set as the background to the section. This is because a requirement of the website was to autoplay the advert upon a user reaching the site. When using a “video” block, the autoplay feature would not work. After consulting with the forums; it was deemed that you could only autoplay properly if embedding from YouTube but the YT controls would appear, this was not acceptable for the requirement and so instead another alternative was sought.
Setting the video as the background of the block allows for autoplay but does not allow for the sound of the video to play.
Therefore, the homepage advert has been reverted to a regular video block and users will need to press play to get the full experience - this does not fully meet the requirement and will be periodically revisited.
Store
Look & Feel Requirement:
An introductory image was to be selected for the page of each store, referencing people wearing the specific items in the store. A limitation of the Squarespace template system is that it upon window re-size on larger sized screens, images would be aggressively cropped from all four sides of the image.
Much time and effort was spent conversing with a Squarespace forum user to implement custom code to make the section’s image static, these failed. In the end we have chosen to record a 10-second clip of the image in Premier Pro and upload the static image as a background video to the section. The background is then set “Inset” to remove bleed on the screen as much as possible.
Upon re-sizing the image is still cropped but only at the sides, as to be expected.
User Journey Requirement:
A limitation in the functionality of a Squarespace store is that the homepage of the store displays ALL items, regardless of category assigned. It is not possible to filter the homepage to show only a specific category, and this was a requirement of the user experience. The requirement was to be able to default a users journey to the “Sets” category rather than all items and this is the preference for purchasing.
The way the requirement has been achieved is to create two store’s. The first selling the No-Gi apparel, and the second selling Leisurewear. The Store option in the main navigation is a dropdown link that allows a user to click a hyperlink to the required category view.
The next limitation is that the breadcrumb trail by default would send a user back to the homepage of the store, violating both the requirement and the user journey. Some custom code was used (via the help of the Squarespace forum) to redirect a user back to the required category view of “Sets”. The custom CSS is added to the individual store in the “Page Header Code Injection” pane under the advanced tab.
From that view they can browse the store via the category tree.
Related Products Requirement:
The requirement here was to limit the related product offering from 5 to 4. 5 products spilled onto a second line and caused significant bleed to the bottom of the page, and made the user experience ugly. Some custom CSS was found on the Squarespace forums to alter this, and can be found in the site-wide Custom CSS pane.
General Layout Choices:
“Simple” format has been chosen for the display of the products
“Inset” width has been chosen, as otherwise the featured images are huge.
“Slideshow” was the option chosen to display the images of the products.
Customisations:
The breadcrumb icon has been modified to a “/”, this is done by some site-wide custom CSS.
The “Size” box was modified to be more user friendly.
The “Quantity” box was resized to be more user friendly.