1.0Overviewso, basically...

KOTA had an existing site that was old and didn’t match the quality of the longboards they produced. While developing this website for an agency called Zenman, I created a unique 3D board flipping hover effect for customers to preview both sides of the boards. I also created some complex post type relationships to make editing the site easy for KOTA staff.

Services

Details

  • Refreshed UI/UX to provide a high-quality experience.
  • Created 3D board flip hover effect.
  • Crafted complex custom post type relationships to make editing easy.
Screenshot of website development for KOTA Longboards

2.0Special Highlightslet me draw your attention to...

KOTA's WordPress back-end editor.

2.1Easy to Edit

One common difficulty for websites with front-end editing tools like Squarespace is how spread out things can get. For a site like KOTA’s, updating simple information like board shape specifications would involve tracking down and updating bits and pieces of information on multiple pages—board dimensions here, board shape pictures there, and board promo blurb yet another place.

I wanted to make sure KOTA’s staff could easily maintain the site after I’d built it. By going with a custom WordPress site, KOTA’s boards were much easier to manage. There was a Boards link in the editing interface on the back-end of WordPress where staff could edit all board information in one place, and then my custom code pulled each piece into the appropriate location throughout multiple pages of the website.

Although the client decided to go with a 3rd party ecommerce solution in conjunction with the WordPress site to sell the boards, my custom coding also put the site in a good place to switch to a more powerful ecommerce solution like WooCommerce should KOTA choose to do so in the future. Since each board is a record in the database with all associated information tied to it, they could be turned from individual product ads into purchasable products.

3.0Technicalfor the geeks

note: this early version isn’t responsively formatted for smaller screens

See the Pen Longboard CTAs – Small by tcmulder (@tcmulder) on CodePen.

3.1Flippin’ Board Details

One of the more creative features for the KOTA site is the board flip informational feature. The idea came from visiting KOTA’s production shop, where they had a row of their boards lined up vertically on a rack. KOTA longboards use a unique transparent grip tape so they can incorporate amazing graphics on the top and bottom without ugly black grip tape obscuring anything. To see both sides of each board, I’d lean it toward me and flip it over, then flip it back into place and grab the next one.

This is pretty unique functionality to achieve through code. I pitched the idea to the designer on the project who hadn’t realized this could even be a possibility for the site. I built a non-JavaScript version (which, using pure HTML and CSS, is an amazing feat itself!) to demo the functionality to the client for approval.

I then created a finalized version while waiting on designs to be approved, so it just took a little more work to integrate the feature into WordPress. I also addressed responsiveness at that time, so the two demos on this page might look odd on really narrow screens (scroll through the device previews further up this page if you’re interested in what the mobile breakdown looked like). Now KOTA staff could easily update the board graphics and performance statistics through the back-end of their site!