HelloJute was a brief, month-long project to work with a third party designer to turn their Adobe xD mockups and custom Timult Hype animation into marketing landing pages that they could reuse as templates for future projects.
The directive was to build the initial project using Tailwind CSS and Ruby on Rails so that their existing website infrastructure could run the pages seamlessly. The design was simple involving a custom animation for the header, a simple Q&A type of mock capture form, and replacing a long section with a carousel on mobile for above-the-fold viewing. The mock capture form and the animation were the two biggest technical components.
The mock capture form used a series of simple checkboxes and if enough of them were selected and their points tallied to determine if these quick website plans are a good fit for the end user. Since all we needed was comparators for how many boxes were checked and their values, jQuery was used. Since all it had to do was display a good fit versus bad fit blurb and not actually send any data, the code was clean and minimal.
The header animation was the bigger technical hurdle. It had been built using a desktop application called Timult Hype, and the integration took some trial and error. Ruby on Rails typically wants all assets to be delivered as a part of its fingerprinting pipeline. However, Hype animations always expect assets to be present at specific hard-coded locations. Though a Ruby gem for integrating Hype animations into the Rails Asset Pipeline was located that would supposedly map these assets appropriately, it was built for Rails 4 and has not been updated since 2016. For a quick fix, the Hype animation was exported using the “Organized Assets” export script and then the images and JS folders were placed in the project’s public folder so that they could bypass the asset pipeline process. The support staff at Timult stated they would look into our workaround and create a knowledgebase article to assist future users.
