Problem
Client was rolling out a new major category of products and needed a full build out of content on their existing site. The primary focus was incorporating AI generated voice for each of the 4 “Fuzzy Friends.”
Solution
From flat design I built out the CPT structure needed for the content and coded the archive and single pages. I also structured the import of over 300 AI generated voice samples and linked them to their appropriate “Fuzzy Friend”.
Highlights
Take a closer look at the specifics of the different elements and functionality I included in this project.
AI Voices
The desired result was to take a long list of AI generated voice samples that each have an encouraging phrase and allow for the user to play that voice on the webpage. The voices also change every day necessitating the creation of custom JavaScript code to regulate the consistency and functionality of the voices. JavaScript code was also needed to ensure that the text on the page that contained the encouraging phrase matched the voice sample for that day.
Custom Accordion
The inclusion of text heavy “social stories” for each “Fuzzy Friend” presented a problem; there was too much text on screen making it difficult and confusing to navigate. The solution was to place each “social story” inside of an accordion dropdown box that could be opened when clicked. The click will also close any previously opened boxes, ensuring the page does not become too long. All of this functionality was built with custom JavaScript.
Vertical Slider
The desire was to keep the page fun and interesting while still providing helpful content. This custom built vertical slider with an indicator track on the right allowed for the page to keep a consistent flow while still packing in a good amount of content.
Onpage Element Update
When clicking the “See Another” button, it changes which card is being displayed without having to reload the page. This is done through both custom created PHP and JavaScript functions.
Animated Popup
Following the theme of light and fun, the client wanted to draw attention to their new product with an animated popup. Using JavaScript functions and CSS keyframes the end result is an appealing and attention-grabbing popup.
