Multi-language E-commerce Solution for yurbuds
Goal
Create a robust e-commerce site to showcase yurbuds' vibrant products in multiple languages and currencies, as well as manage their growing inventory in a single place.
Project Overview
A leader in sports earphones, yurbuds was looking for an updated e-commerce solution that showcased their vibrant products. Our team at BIG YAM rose to the challenge and crafted a responsive site to house the growing number of products, which included a variety of earphones, armbands, and cases.
This was project was created during my time at BIG YAM, The Parsons Agency. As the lead front-end developer, my contributions included:
- Collaborating with designers to code static HTML, CSS, and JavaScript based on their designs in Adobe Photoshop
- Working closely with back-end developers on CMS integration with PrestaShop
- Integrating Bootstrap with PrestaShop and extensively customizing the CSS to match designs and handle responsive contexts
- Collaborating with designers and back-end developers on complex features including a custom homepage carousel, mega menu for site navigation, and the predictive search functionality
- Implementing a color swap feature on product pages that seamlessly swapped out product images and the color of interactive UI elements
- Ensuring the design adapts to multiple languages
- Building a custom solution for responsive embedded videos with placeholder images and branded play buttons
- Styling a third-party reviews plugin to make it cohesive with the rest of the site's design
- Building custom HTML email templates and testing across a number of email clients
- Assisting with content and product population
Development
The site was built on PrestaShop, which offers a robust e-commerce back-end solution. This allowed the yurbuds team to easily manage their catalog, stock, orders, customers, reviews, pricing structures, and shipping information. The site also supported eight different languages, including English (US and UK), Spanish, German, and French, as well as three different currencies.
My main focus during development was on the customer-facing pages, and updating PrestaShop's templates to match the designs. The markup and CSS were built up from Bootstrap with extensive customization. Some highlights of the site included a responsive design with a focus on mobile-first, a custom homepage carousel, integrated reviews, predictive search, emphasis on product photography and videos, and CSS transitions throughout. I also built a color swapping feature for the product pages that seamlessly updates the product photos and other colored UI elements like the add to cart button when the user selects their desired product color.
Additional Work
In addition to the website, I also coded multiple HTML emails for yurbuds to promote their new site and upcoming sales. Email templates were tested through Litmus to ensure they looked good across a number of different email clients before sending out.
Outcome
The work our team at BIG YAM did streamlined yurbuds' online sales platform, with a 36% increase in e-commerce transactions between December 2013 and December 2014. The brand quickly grew to the largest sports headphones company on the market, and in 2014, yurbuds was acquired by HARMAN, a leader in audio equipment and the parent company of JBL.
The e-commerce portion of the yurbuds site was phased out over time, with purchases being redirected to JBL's website, before eventually moving everything over to JBL and absorbing the yurbuds brand.