DONE LONDON

A website for London based clothing brand - Done London. Website features a home page with a hero carousel promoting the brands clothing, a shop page where customers are able to browse and purchase clothing, an about page, a contact page and a basket page. The primary goal of the website is to provide users with information about the companies' product range and lead them to make a purchase. It also aims to provide information about the brand and ways in which to make contact with the company. It is designed to be responsive and accessible on all devices, making it easy for uses to make a purchase, find out more information about the company and contact the company with any questions or queries they may have.

The main aim was for the website to have the fewest number of steps to the point of purchase.

Goals

The business goals of this website are:

• Build brand awareness
• Increase social media following
• Showcase and promote the brands' clothing
• Drive sales
• Lead visitors to the point of purchase in the fewest number of steps
• Provide excellent UX to generate a positive emotional response from users

The customer goals of this website are:

• Find high quality, well designed products
• Clear and easy to find pricing
• Simple and intuitive ordering process
• Find information about the brand
• Find information about how to contact the company

UX

Ideal client

The ideal client for this business:

• Has disposable income.
• Has interest in casual streetwear apparel.
• Lives in London (but can be anywhere in the world).

When visiting this site, the aims of the visitor are:

• To make a purchase for either themselves or as a gift.
• To find out more about the brand.
• To get in contact with the company.
• To join the companies mailing list.

This project is the best way to help them achieve these things because:

• It provides a simple, positive UX.
• It displays the brands product range and story in a clear, concise format.
• It provides multiple routes to contact the brand depending on the preferences of the user.
• It provides an easy way to join the companies mailing list to stay up to date with company news and developments.
• This website:
  • Is easy to navigate.
  • Leads the user through easy to understand, learnable information.
  • Gives the user the information they need without overloading them.
  • Guides the user to the goal of the website - to make a purchase.

User stories:

• First Time User goals:

  • As a First Time User, I want to easily understand the purpose of the site.
  • As a First Time User, I want to be able to easily navigate the site.
  • As a First Time User, I want to be able to view the range of products on offer.
  • As a First Time User, I want to be able to easily find out more information about the company.
  • As a First Time User, I want to be able to easily locate thier social media links to gather more information.

• Returning User goals:

  • As a Returning User, I want to be able to quickly view the products on offer.
  • As a Returning User, I want to be able to make a purchase with the fewest steps possible.
  • As a Returning User, I want to find out about any new products on offer.
  • As a Returning User, I want to find the best way to contact the company with any questions or issues I may have.

• Frequent User goals:

  • As a Fequent User, I want to sign up to the Newsletter so I am kept up to date with products, news and promotions/sales direct to my inbox.
  • As a Fequent User, I want to find out if there are any new products for sale.
  • As a Fequent User, I want to find out about any new releases coming up.
  • As a Fequent User, I want to be able to find out the latest news on what the company is doing.

Design

• Colour Scheme

  • The main colours used are black (#000000) and white (#ffffff) to keep the styling in line with the brand logo. As with similar sites, colours are kept to a minimum in order to put the focus on the products on offer. Red (#b71c1c) has been used to highlight buttons and links in order to draw attention to them. A darker red (#7f0000) has been used to accent buttons when hovered over to provide a point of difference and positive UX.

• Typography

  • P22 Johnston Underground is the main font used throughout the whole website with Sans Serif as the fallback font in case the font isn't being imported into the site correctly for any reason. P22 Johnston Underground was chosen as it is the font used in the Done London logo.
  • Roboto is used as the secondary font as it is a clean, attractive font used frequently in programming that pairs well with the main font and provides a subtle point of difference to the typography of the website.

• Imagery

  • The imagery used is from a recent photo shoot and has been chosen to promote the brand and draws on the link with Transport for London (TfL) from their recent collaboration. All photos were taken by Ryan O'Toole Collett.

• Wireframes

  • Home Page Wireframe
  • Shop Page Wireframe
  • About Page Wireframe
  • Contact Page Wireframe
  • Basket Page Wireframe

Features

Each page features a responsive navigation bar with conventional placing of the logo (top left) and navigation links (top right). The navigation links reduce to a toggle menu at mobile size to improve UX and provide positive responsive design. Each page has a responsive footer with join mailing list, copyright information and social media icons linking to the brands social media pages. The join mailing list feature was removed on small and medium screen sizes so as not to clutter the UI.

Home

The Home page features a hero image carousel with navigation functionality displaying three images of models wearing the brands products. On mobile and tablet there are a set of three portrait images to better suit the screen size at these breakpoints, this is changed to landscape at the desktop size. There is a call to action button overalyed towards the bottom of the carousel to encourage visitors to "Shop Now" by guiding them to the Shop page to further explore the product range and direct them towards making a purchase. The purpose of this hero carousel element is to give maximum impact when arriving at the website and drive visitors towards the shop page.

Shop

The Shop page features a hero image followed by a shop heading styled in a similar style to the navigation bar and inkeeping with the overall style and presentation of the website. Below this are images of the range of products on offer. Each image is a link to the product page which will have a more detailed product description and information about sizing, ordering etc. (this functionality is beyond the scope of this project but is a feature that will be added at a later date - see "Features to Implement in Future" section below). Below the product image is a brief description of the product and below that is the price. Under the product image is an "Add to basket" button which will add the item to the users basket (this functionality is beyond the scope of this project but is a feature that will be added at a later date - see "Features to Implement in Future" section below). It currently links to the basket page which features a "coming soon" message as basket funtionality is beyond the scope of this project. The Shop page is layed out in columns of Bootstrap cards with an image, supporting text, pricing and an "Add to basket" button, 2 columns wide for mobile devices and 4 columns wide for tablet and desktop. This design choice was made to give each individual product enough space to be viewed clearly by the visitor without overcrowding the UI or making links or buttons hard to press on mobile devices.

About

The About page features a hero image followed by an about heading and is broken up into two sections with relevant sub-headings. First, the "who we are" section containing a brief paragraph explaining the brand history, ethos and who it has collaborated with in the past. This was taken from an article on The Industry.Fashion website. It has been kept breif in order to satisfy curiosity without overwhelming the user. Below this is a short promotional video that engages the user and shows them more about where the brand takes its inspiration from. Second, the "press" section contains Bootstrap cards with thumbnail images and text of recent press articles written about the brand. These contain an image of the sources logo, the headline and the first sentence, to give the viewer a idea of what the article is about. Below this is a "See more >>" button which will open the full article in a new tab. These behave responsively with the images displayed above the text on mobile and to the left of the text on tablet and desktop.

Contact

The Contact page features a hero image followed by a contact heading and is broken up into four sub-headings detailing the various ways to contact the company and a button to launch a modal which users can click to sign up to the mailing list. First, the "visit us in store" section provides the user with the shop address, a Google Maps image of the shops location and two images of the shop interior. On mobile devices, only the map is visible to provide a positive responsive design. Second, the "send us an email" section provides the user with the two email addresses for the business. One for shop enquiries and one for print enquiries. The email addresses are links to open up the users default mail app to assist in guiding them to make contact and are highlighted in red to grab attention. Third, the "send us a message" section features a contact form, which requests the users name, email, and a box to add their message. At the bottom of the form is a Send Button. The width of the form changes depending on the screen size to ensure it looks clear on all devices. The form is not currently functional as it is beyond the scope of this project (see "Features to Implement in Future" section below). Finally, the "join our mailing list" section features a paragraph element explaining what users gain from signing up to the mailing list and a Join Mailing List Button that launches a Modal which requests the clients name and email. Below this is a Close Button to close the modal and a Submit button to submit the request. The submit button is not currently functional as it is beyond the scope of this project (see "Features to Implement in Future" section below).

Basket

The Basket page features a message that the page is under construction and invites users to come back soon once basket/checkout funtionality had been added to the site.

Existing Features

• Header Logo - Exists on every page and allows users to eaily identify the business brand. Clicking the logo returns users to the home page as they would expect.
• Header Navigation Bar - Exists on every page and allows users to easily navigate all pages of the website and easily find what they are looking for.
• Footer Join Mailing List - Exists on every page and allows users to enter their email to sign up to the mailing list. This feature is only visible on desktop as it overcrowds the footer at smaller screen sizes.
• Footer Copyright Info - Exists on every page and protects business copyright.
• Footer Social Icons - Exists on every page and allows users to access the brands social media platforms.
• Hero Image Carousel - Allows potential clients to view examples of the brands products. Creates immediate connection and emmotional response.
• Call to Action Button - Guides potential clients towards the shop page via "Shop Now" button to lead them into making a purchase. Reduces steps to point of purchase.
• Hero Image - Exists on shop.html, about.html and contact.html - Grabs the users attention and allows users to view examples of the products on offer. Also helps improve the UX.
• Shop Item Cards - Lists items available for purchase in a clear grid view. Each card provides an image of the product, a brief description of the product, the products price and a button to add the product to basket.
• About Paragraph - Provides information about the brand without overloading the client with information.
• Promotional Video - Allows potential clients to connect with the brand, see what inspires their designs and get insight into a photo shoot. Creates connection and emmotional response.
• Press Links - Allows the client to learn more about the brand by reading about featured press articles.
• Contact Information - Provides the client with all available methods to contact the company. This can be done by visiting the store, by email or by direct message.
• Join Mailing List - Allows the client to sign up to the compaines mailing list to recieve information direct to their inbox.

Features to Implement in Future

• GDPR compliant pop-up screen - Allows all new visitors to the website to approve or deny the processing of their personal data. Ensures the business complies with the EU data protection law.
• Add CAPTCHA to contact form - Allows business to protect the contact form from spam.
• Add basket/checkout functionality to allow users to buy products.
• Add "send us a message" form functionality to allow users to send messages to the company.
• Add mailing list functionality.
• Add links to more detailed product information and size selection when a product is clicked on shop.html.
• Add Google Maps API to show more detailes store location information on contact.html.
• Add detailed ordering and returns information once shopping cart/buying functionality had been added.

Technologies Used

Languages Used

• HTML
• CSS

Frameworks, Libraries & Programs Used

• Gitpod - Gitpod was used for the IDE while building the website.
• Bootstrap 4.5.3 - Bootstrap was used to assist with the responsiveness and styling of the website.
• Font Awesome - Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
• Fonts Geek - Fonts Geek were used to download and import the 'Johnston P22 Underground' font into the style.css file using the @font-face CSS at-rule to style the fonts used on all pages of the project.
• Google Fonts - Google fonts were used to import the 'Roboto' font into the style.css file to style the fonts used on all pages of the project.
• TinyPNG - TinyPNG was used to reduce the file size of .png/.jpg files used.
• JQuery - jQuery came with Bootstrap to make the navbar responsive but was also used for Bootstrap's Javascript modal component.
• Git - Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
• GitHub - GitHub is used to store the projects code after being pushed from Git.
• Balsamiq - Balsamiq was used to create the wireframes during the design process.
• Web Formatter - Web Formatter was used to beautify code.

Testing

Detailed testing information can be found in separate TESTING.md file.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps:

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. Another dropdown will appear to the right, select "/(root)" in this dropdown.
6. Then click Save.
7. The page will then refresh.
8. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps:

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository.
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash.
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type "git clone", and then paste the URL you copied in Step 3:

$ git clone https://github.com/theopmw/milestone-project-1-done-london

7. Press Enter and your local clone will be created.

Credits

Code

• Bootstrap4: Bootstrap Library used throughout the project mainly for the Bootstrap Grid System and to make the site responsive but also for certain Bootstrap Components.
  • Template for multi-image carousel on Home page taken from Bootstrap4 and modified to suit the needs of the site.
  • Bootstrap4 display properties were used to show/hide different carousels at different breakpoints on Home page and to hide the shop images on xs/sm screen sizes on Contact page.
  • Template for cards used on Shop page and About page taken from Bootstrap4 and modified to suit the needs of the site.
  • Template for modal used on Contact page taken from Bootstrap4 and modified to suit the needs of the site.
• Favicon in the HTML head taken from DONE LONDON website.

Content

• The text for the About page was taken from an article on The Industry.Fashion.

Media

• All the photos and videos for the site were supplied directly by DONE LONDON and taken by Ryan O'Toole Collett.

Acknowledgements

• DONE LONDON/Ryan O'Toole Collett for allowing the developer to use their work for the purpose of this project and thier support in providing the media used throughout the site.
• Inspiration for this site came from the work of DONE LONDON and the layout and deign of similar clothing sites including ASOS and End.
• Thanks to my Code Institute Mentor, Akshat Garg, for continuous feedback and support.

Diclaimer

All content on this site was developed for educational purposes only.