The Float Club

The Float Club is a hub for all things Onewheel. Onewheel is a unique e-board that simulates the experience of snowboarding or surfing on land. This site is dedicated to both new and experienced riders, providing the user with information about the floating sensation. It has in-dept information about learning how to ride and maintain the board with images of fellow Onewheelers in the community.

The live link can be found here - https://dhowai.github.io/portfolio-1-the-float-club/

User Experience (UX)

• User Stories

  • First Time Visitor Goals

    • As a First Time Visitor, I want to understand the main purpose of the site and learn about the product.
    • As a First Time Visitor, I want to be able to easily navigate the site.
    • As a First Time Visitor, I want to see the product in use and social media links.

  • Returning Visitor Goals

    • As a returning Visitor, I want to easily find any new details about the product.
    • As a returning Visitor, I want to get in contact to possibly ask questions.
    • As a returning Visitor, I want to find more about how this product functions.

  • Frequent User Goals

    • As a frequent User, I want check if any new information that can improve my experience with the product.
    • As a frequent User, I want to see any new implements to the site based on user feedback.

• Design

  • Color Scheme

    • The main color was taken using an eye dropper site called eyedropper.org to get a shade of orange from the main landing page image. Then using mycolor.space I got a palette of accompanying colors.
    • I used the #2F4858 color for the main headings and body text, #F5874E for the hover element, #7D5D90 in the warning section, #E46974 for the submit button on the enquiry page.

  • Typography

    • The Cairo font for the headings was used throughout the whole website with Sans Serif as the fallback font. Cairo is simple and clean font and it loosely resembles the Onewheel logo font which made it the appropriate choice.
    • Rubik was used as the body text because it accompanies Cairo well with Sans-Serif as a backup.

  • Imagery

    • Each page beside the form enquiry has a background here image of people using the product. Each one is in a different setting which catches the user's attention, that this board can be used in different settings.

Features

Existing Features

• Navigation bar
  • This is featured on all 5 pages, includes links to the home, how to section, maintenance section, Gallery and form page.
  • The user will have access to all pages to easily navigate the site no matter what page they are on.

• The footer
  • The footer section includes links to various social media site about onewheel.
  • It encourages the user to connect with others with the similar interest in onewheel across multiple social media platforms.

• Index page

• The landing page image

  • The landing page includes an image of a user riding a onewheel with the company name and specifically its guide to Onewheel.
  • Adds an animation of the image flying in to emphasize the onewheel movement.
  • Adds a short introduction to index page about the product.

• introduction section and Pint VS XR section
  • Adds a short sentance about the product by Future Motion.
  • This section displays the current devices that the company Future Motion sells and which one would be right for you.
  • It shows the comparisons between the 2 boards in terms of looks with an image and a table with the price, top speed, range and weight differences.

• Home page images
  • This section has 3 images of onewheel users in different environments.

• How page

• landing image

  • Title of page with a background images of riders in a group ride.

• Warning section
  • Warning section explaining the dangers of the onewheel.
  • Indicates to learn about the board features and always wear appropriate safety gear.

• Protective gear section
  • This is section highlights that safety gear is important when riding.
  • The accompanying video describes the gear needed.

• Let's go section
  • This section has the step by step tutorial for learning how to ride.
  • Has a similar structure of some text followed by a video.
  • Each step has an accompanying video or two, one from the manufacturers source and the other from experienced riders.

• Maintenance Page

• Landing image

  • The page opens up with a rider posing with one foot on his/her Onewheel XR with the title.

• list of items
  • This section has a list of items needed to maintain the board.
  • Its in a table format with the name of item, an image and followed by a link to the amazon page.

• Lets Get Clean
  • This section has the step by step instructions for cleaning the board.
  • Each step has a paragraph with the instructions followed by a GIF of the process.

• Gallery page
  • The gallery shows the float community of riders in various settings.
  • Shows the versatility of the board, being able to ride in different settings.

• Form page
  • An enquiry page designed for users who visit the site to post any question to the site owners.
  • The user types their name, email followed by a sentence. This creates a dialog between the user and the site owner.
  • Used the Code Institute's formdump link to send the information to.

Features left to implement

• A button that allows the user to jump back to the top of the page instead of scrolling.
• Or to fix the nav bar on the side on top without interfering with the content.
• Some possible feature that comes from user feedback through the enquiry form.

Testing

Functional Testing

• Navigation Bar - The nav bar stays on the top tight and is evenly spaced and visible.. - As the screen size gets lower the nav bar moves under the main log and reduces line-spacing and font-size to fill the screen. - Tried to get the nav bar to stick to the right as the user moved down the screen, but it interfered with the content. - Would try to implement Javascript in the future to achieve that or have a back to top button.

• Footer

  • The social media links are located in the footer and are on all pages.
  • The social media icons change color as the mouse hovers over, letting the user know which one is being selected and open in a new tab.
  • The spacing between the icons move closer and get smaller as the resolution gets smaller.

• Hero Images

  • The hero images have a background around the text or on the actual image to make the text more visible.
  • As the resolution gets smaller the images height gets reduced by half to fit smaller screens and the text gets reduced in size.

• The media (Pictures/videos)

  • All the media on the site responds to changes in resolution.
  • The images reduced in size keeping the small image ratio as the screen gets smaller.

• The text content

  • The Paragraphs have specific CSS that positions the text in the middle of the screen with equal padding on both sides of the screen.
  • This allows the users to focus on the content in the middle without looking at each end of the screen to read the sentences.
  • As the resolution reduces the text gets smaller and the content remains in the middle of the screen.

• How to page, iframe

  • The Iframes used on the how to page are responsive in a 16:9 ratio,
  • As the screen resolution reduces the Iframe adjust in proportion to the aspect ratio.
  • However, at larger screens the Iframe media are large and makes scrolling an issue.

• The maintenance page

  • The lets get cleaning section has steps with text and an accompanying GIF.
  • The inital style allows the media to respond better when the screen resolution reduces, however, at larger screens the media is not equal distance from each other and wasn't aesthetically pleasing.
  • Each step is inline and parallel with the other media by adjusting the width so solve the above issue.
  • This causes the media to move closer together at lower resolution screens, therefore a media query was placed at 950px which removes the width style and allows the media to line up better.

• The Gallery page

  • This page has images of the float community.
  • As the screen resolution reduces the column count reduces from 3 to 2 to 1. Allowing for a better viewing experience.

Testing User Stories from User Experience (UX) Section

• First Time Visitor Goals

  1. As a First Time Visitor, I want to understand the main purpose of the site and learn about the product.

     • Upon entering the site, users see an animation of a user using the product with the text introducing the site.
     • There is a small description on what the product it.
     • Displays the products available and the differences between through images and table of features.

  2. As a First Time Visitor, I want to be able to easily navigate the site.

     • The site logo and nav bar are located on the top of the page clearly displaying the pages.
     • Each page has detailed content based on what page you're on with clearly labelled sections.
     • Each media link opens in a new tab which leaves the user invested in the site.

  3. As a First Time Visitor, I want to see the product in use and social media links.

     • The Home page displays images of users in different settings, showing the versatility of the product.
     • The Home page shows a picture of the products side by side and a table showing the differences in features.
     • Each page has a footer that links to different social media with content about the product.

• Returning Visitor Goals

  1. As a returning Visitor, I want to easily find any new details about the product.

     • If a new model was ever announced, an updated photo and table showing comparable features.
     • An update of the gallery images as the community is ever growing.

  2. As a returning Visitor, I want to get in contact to possibly ask questions.

     • The form page allows the user to fill their name, email and question to the site owner. Which creates the dialog between the site user and owner.

  3. As a returning Visitor, I want to find more about how this product functions.

     • The how page has information through text and various videos on how to use the product.
     • It has a safety warning and an accompanying section which recommends safety gear.

• Frequent User Goals

  1. As a frequent User, I want check if any new information that can improve my experience with the product.

     • If the user ends up purchasing the product, there's a maintenance section that shows the user how to maintain their product.
     • If there are any new tutorials on how to better the experience with the product. E.g. waterproofing the product.

  2. As a frequent User, I want to see any new implements to the site based on user feedback.

     • Implement any new features that users have frequently asked about.

• Validator Testing

• HTML

  • No errors were returned when passing through the official W3C validator

• CSS

  • No errors were found when passing through the official (jigsaw) validator

Known Bugs

• No bugs were found at the moment of deployment

Deployment

• The site was deployed to GitHub pages. These are the steps to deploy:
  • Login to GitHub and click on the repository
  • In the GitHub repository, navigate to the settings tab
  • On the sidebar navigate to the pages tab
  • From the source section, select the Master Branch, root and save
  • After a few minutes it will say your site has been published with a link to the site

Credits

Languages Used

• HTML5
• CSS3

Content

• Code and text content was written by the developer - Daryl Howai
• Text on home page for the introduction to onewheel was taken from Wikipedia
• The font used was taken from Google Fonts
• The icons used were taken from Font Awesome
• GitHub used to store the project code
• Wireframe software used to design the site structure Balsamiq
• Used Autodesk sketchBook to edit picture for readme of site on different screen sizes
  • Used W3schools for instruction on how to:
  • Align images side by side on home page was taken from W3schools
  • Create hero images on each page was taken from W3schools
  • Create responsive Iframes on the how-to page was taken from W3schools
  • Create the responsive image grid on the gallery page was taken from W3schools
  • Create the contact/enquiry form was taken from W3schools
• The ReadMe file was written in reference to The Code Institute sample README,The Code Institute readme template, Mastering Markdown
• Enquiry page uses the Code Institute's link to send the form results.The Code Institute

Media

• Photos used from www.pexels.com by Lain Lee
• The photo used for Pint vs XR on home page was taken from Skishacksports
• The photo used in the gallery page was taken from Pixabay by Deborah Jackson
• The photos used for the gallery page was taken from Unsplash by users Jasper Garrat, Cameron Venti, Dalton Smith, Jakob Rosen and Mike Marrah
• The Eye Dropper extention tool was used from Eye Dropper
• The color Palette was chosen using the website ColorSpace
• The iframe videos from the how page was taken from the Future Motion Onewheel Youtube page Future Motion
• The iframe videos from the how page was taken from Jake Leary's Youtube page Jake Leary
• The iframe video from the how page was taken from Jimmy Chang's Youtube page Jimmy Chang
• The gifs used in the maintenance page was taken from my own gif profile giphy

Acknowledgement

• The Onewheel community on Reddit for introducing myself to the product and giving me the inspiration for doing this site.
• My mentor for giving constant feedback throughtout the sessions.