• APPLY

  • fix Product footer position using Bootstrap cards
  • Based of project feedback
    • introduce Back to top button
    • decrease Copyright disclaimer text size
    • replace pictures that makes bad impression (exhaust parts wrapped in black foil that looked like coroner's place)

• CHECK

  • Caps lock style on all subtitles all pages
  • Active Navigation button same as Titles background
  • If all links works correctly after deployment.

• TO DO
  • Apply
  • Check
• UX (User Experience)
  • Project Goals
  • Business Goals
  • Targeting
  • Business Values
  • User Goals
  • User Stories
  • Designer Goals
  • Design Choices
    • Fonts
    • Colours
• Wireframes
• Features
• Future Goals
• Technology Used
• Testing
  • Issues and Resolutions
• Known Bugs
• Deployment
• Credits
• Acknowledgements

The goal of this project is to create with use of HTML and CSS languages a static front-end site that will link two parties by presenting information demanded by customers and desired by owner.

• Goal: Increase sales.

  • Having a website to being officialy present in the internet, well-organized content, user-friendly site, effective calls to action, over the time establish good conversion rate (unsettled / unknown yet for this kind of niche market and not having this sort of data from past),
  • Motivate an audience to take next step (call, text, e-mail or submit a web inquiry). Designed pages and implemented features should serving to that goal by many marketing and decision-making ways.

• Gain trust.

  • Delivering history of company confirmed in timeline on social media,
  • Assuring quality of product by providing buyers reviews,
  • Upfront display of models highlighting quality of craftsmanship,
  • Offering lifetime warranty with shipment cost covered.

• Improve communication with potential customers.

  • Present contact details for different communication channels.
    • Highlight benefits of WhatsApp costless contact.

• Increase number of social media real followers.

  • stablishing easy access to owners socials channels.

• Become an growing engineer.

  • Providing information about wide range of products,
  • Releasing teaser about research and tests of new materials to be introduced in near future,
  • Providing open-minded approach to external, unlisted models or requested extra shaped / custom-tailored projects.

• The user has access to the gallery, gets offers, sees range of products and has possibility to ask for price or any additional
  questions through form or using contact details. Here highlighted WhatsApp feature informs that unwelcomed international
  call/text costs can be avoided, handy especially to ease contact for overseas buyers (company has a global range of consumers).
  
  Visitor can recognise credibility of company, an essential verification based on insight into company social media profiles.
  That allows to assess owner’s timeline, check quality of followers, number of comments and likes. In times of scam websites
  and fake sellers it is appreciated “tool” for customer. Meanwhile it works perfectly for the owner to attract visitor to become
  a follower or further - earn a buyer.
  
  Contact form delivers simple communication channel to ask whatever they like.
  
  

• Who is the focus of the goal?

  • a biker who wants to tuning their machine in significant way by adding hand crafted exhaust,
  • a friend or close person (or group) who knows one interest and want to buy a gift / surprise,
  • motorcycle owner, enthusiast of bold design.

• Why users buy a product?

  • to feel satisfaction while driving,
  • to be noticed by other road users,
  • to make impression in visited places by look and sound,
  • to be recognizable differnet among all riders on the same bike model,
  • to share their proud with social media,
  • to make a gift for someone else,
  • to reach for a Bucket List item.

• What they're worried about?

  • high prices,
  • hidden fees,
  • long time of product delivered,
  • fake company (scam),
  • unskilled welder (bungler),
  • poor materials / quality,
  • bad look of product (aesthetics).

• How to help them?

  • clear straight prices,
  • walk through order to delivery process
  • assurance of delivery fee included (where possible - currently Europe),
  • gain trust by proving buyers good experience and social media reputation, pictures of products and from buyerrs feedback.

The owner has an opportunity to display products in the Web, advertise extras, attract buy decision by highlighting offers,
prove experience as successful entrepreneur for number of years and show his technical skills through pictures of products
and positive feedback from actual customers and fanpage visitors.

Heritage and trust gained by couple of years posting on healthy accounts Facebook and Instagram with no-fake-followers
has been incorporated now into webpage to build strong image of “entrepreneur you can rely”. Pictures bringing closer to
product and enthusiastic comments can assure new visitors about how stable this company is.

There’s more behind this project – client motivated by creating process of the website ordered new line of logo from States,
that led to creating cool picture in terms of overall marketing and public relations.

The main expected user falls into one of the below criteria:

• Motorcycle owner

• Motorcycle / classic / vehicle enthusiast

• Biker family or friends

• Someone who seen one of the page photo content in image searching machine by looking for custom-built botorbike

Research done at beggining of creatng this website delivered following goals:

• Need to veryfy if company is real
• Products quality/look meets potential buyer's expectations
• Find a proce without hassle of asking for
• Get a contact details to ask specific questions

Manual

• Common elements
  • The header announce purpose of the website, mainly for positioning reasons (crucial content of Header 1), this element is hidden on smallest displays for sake of better landing page impression. Right below is main navigation that stays exactly same on all pages: Logo of company (with its initial “S” letter used for favicon) has black background and is linked to index page – same as Home button. Next buttons (“About”, “Range” and “Media”) ore getting slightly brighter shade of grey. Always one of them indicates at which page you’re at the moment. They are interactive laptop/PC screens when mouse hover over particular element – color change to a bit brother that active page button color. This reddish color is kept for all h2 section titles and makes good effect as first title on page looks like an active tab – descendant of active menu button. Yellow color of company logo is kept over all yellow accents on website.
  • The footer is repeated on all pages to make it easy to learn for the visitor to get in touch (alternative ways to Contact form) and bright social media icons (color-coded with their linked platforms) calls to check out more information on the provided Social Media networks (long timeline, positive feedback and pictures that proves quality and aesthetics, finally – increase number of true followers) and spreads advertisement widely by this days version of “Word-of-mouth”.
• The Home page
  
  begins with a jumbotron style hero image with a motorbike background introducing what the page is about. It's a short and to the point statement as well as CTA (call to action) button allowing the visitor and a potential client to immediately enquire about the exhaust for their bike.

• The About page
  Begins with a hero image introducing the CEO and Designer in one, the owner of the company. Just below there is a short three columned introduction to the person behind SpyraMoto:

  • The Scratch
    is about the Family Roots and where the love for motorcycles come from and ends with internal link in blue pill button that gives a user opportunity to check whole range of products.
  • SpyraMoto describes how Wojtek started and what drives him and contains promise of Lifetime guarantee, a strong statement declaring quality and proactive company approach.
  • The Futures touches on the attention to detail and what is in store for Future days for SpyraMoto, this sends also a message that company is bursting, keeps development and is innovation-orientated.

  As we scroll down, there is a map showing where some of past clients are coming from as well as the reviews section end up with Legal notice about copyrights and statement that owner holds documentation for these testimonials.

• Range page
  starts with triple message to encourage reader to take an action, convince him it’s deserved to beautify his bike. Right below starts the portfolio of SpyraMoto works (shorted to 6 of over 30 models just to show my concept of presentation), which essentially shows the quality of it. Designed to have visually three different columns on tablets and bigger displays as well as keep dirrerent background for each product in responsive version on smartphones.
  As a prospect customer I can immediately check out some examples of Wojtek's work, in case I am not sure what I want or if I like their look. As range covers three main brands: Harley-Davidson, BMW and Yamaha, every model has been marked with a brand-named button that corresponds with color code of particular brand, e.g. exact shade of red used by Yamaha.
  At smartphones it contains only first 3 products as a teaser with extra message encouraging user to visit more products on more comfortable displays such a tablets or computers. * In future this section is going to be extended by:
  - clickable mini gallery of each product to show each model alone and at least one example of exhaust already fitted to bike.
  - filter options to display all products for chosen 1 brand only
  - functionality of social media: like / share.

• Media page
  Brings the prospect client behind the scenes of exhaust production. Video brings some level of excitement about the product, the visitor to the page gets to see the man behind the company before they contact Wojtek and can appreciate a craftmanship that may bring over decision to make first step and become a buyer.
  This is followed by various articles to showcase Spyramoto presence in media with date of publication - these confirms that Wojtek – the owner, is trustful player on the market and company is stable and reliable. This impression was one of the keys to assure visitor this is not a scam business nor some freshly started EU granted project that could collapse after time essential to keep donated grants. Yes, this is life.
  

• Links, pictures, video and all featrued tested for leading to correct place, proper hover (where applicable), opening internal or blank page etc.

• Buy now
• Filter: display all products for same bike model
• Embedded Google Maps with Buyers town location (respect to GDPR)

In this section, you should mention all of the languages, frameworks, libraries, and any other tools that you have used to construct this project. For each, provide its name, a link to its official site and a short sentence of why it was used.

• JQuery
  • The project uses JQuery to simplify DOM manipulation.
  • Popper.js and jQuerry
  • Photoshop
  • Bootstrap
  • Font Awesome

Tested on PC, laptop, iMac, iPad, notebook and dozen smartphones plus my reviewers devices.

1. Contact form implemented on level to conform returned values.

Site deplyed successfully.

• Licenses: • Hover.css is made available under a free personal/open source license. • Copyrights of Third parties quotations requests approved

Responsivness tested at: • http://ami.responsivedesign.is/

Other tools:

• Font finder https://www.myfonts.com/WhatTheFont/result
• Photoshop 2020
• Chrom Dev Tool (device frames for screenshots, testing Network (loading status – 200))
• Diff checker – comparing versions ( https://www.diffchecker.com/s1i2zWFd )

Page design with rule of third , even for two-columned sections they’re 1/3 + 2/3 of the page width.
Lessons learned:

• insist on Client to deliver required spreadsheet
• special characters of business sector – inches, diameters ¾, Pounds, “>” etc…

• Press Intervews quotation approved by sources:
  • Blog
  • Made In Swietokrzyskie
  • Garage shed costam

• The photos used in this site were obtained from ...
  • Delivered by the owner
  • From developer own library
  • Thanks to courtesy of photographers/filmmakers: Wiktor Taszlow, Grzegorz Betkowski, Mateusz Iskra

• I adapted Contact form inspired by Dinesh Varyani here: https://www.youtube.com/watch?v=9dL516qYL4w

This project delivers values for both client and users. And for me, so it’s win-win-win

This was great opportunity to create content, set and consult PR line, invent and test some marketing tools and combine all
that with good design.

Thanks for reading!

Bart

Credits for readme.md:

Code Institute
Richard Wells https://stackoverflow.com/questions/4823468/comments-in-markdown

Credits for project:

• Matt Rudge
• Jonathan Munz
• Kasia Bogucka