Alterna Haircare

Learn how we supported Alterna Haircare’s website, developing custom modules, managing databases, and optimizing performance for their luxury brand.

Project Overview

Alterna Haircare, a brand under Henkel Brands, was founded in 1997 with the vision of offering a luxurious yet sustainable hair care collection. As part of Skyrocket Digital's development team, I contributed to maintaining, updating, and enhancing Alterna Haircare’s online presence. The project focused on building new features, managing their content infrastructure, and ensuring smooth day-to-day operations.

Project Scope

For years, Skyrocket Digital maintained the Alterna Haircare site, and during my time working on the project, my role was as a full-stack development. The scope was large, covering everything from component creation to backend management, database updates, and CI/CD pipeline management. We focused on continuous improvements, adding new features, and providing ongoing support to the platform.

Some of my key responsibilities included:

  • Building new pages and modules, ensuring a smooth user experience.
  • Managing and updating the database, especially with regards to inventory and product information.
  • Ensuring the CI/CD pipeline was functioning efficiently, performing unit tests, and managing Docker containers.

My Role

In this project as a full stack developer I contributed in the following.

  • Front End: My work involved developing and enhancing multiple pages, primarily using PHP and JavaScript. I rebuilt the mega-menu for improved navigation and designed a multi-step hair quiz to help users discover personalized product packages based on their preferences. I also revamped the product search functionality, ensuring a smoother and faster experience for users.
  • Back End: I managed the Craft CMS, updating internal APIs and the MariaDB database to keep the site’s content up-to-date. This included managing inventory data, optimizing content, and ensuring seamless integration with the front-end. Additionally, I worked on optimizing the CI/CD pipeline, including updates to unit tests and managing Docker containers and cloud infrastructure.

Over my time on the project, I built 6+ new pages and updated more than 10 existing pages, playing a significant role in the site's continuous evolution.

Technology Stack

The technology stack behind Alterna Haircare’s platform was robust and scalable:

  • Front End: PHP, JavaScript, SASS
  • Back End: Craft CMS (PHP), MariaDB
  • Infrastructure: Docker, AWS (for cloud hosting and scalability)

One key integration was with AWS S3 for hosting and optimizing images to ensure fast load times without sacrificing quality.

Unique Features

A few standout features I worked on included:

  • Mega-Menu: A redesigned, user-friendly navigation system for easy browsing.
  • Hair Quiz: A custom-built, multi-step form designed to recommend personalized product packages based on user input. This required careful integration of product data to ensure accurate results.
  • Product Search: I completely updated the product search functionality, ensuring users could easily find what they were looking for, with optimized performance for heavy traffic.

Challenges

The Alterna Haircare project came with its fair share of challenges, including:

  • Content Optimization: Managing and optimizing the massive volume of high-quality images was a major task. By integrating AWS S3, we ensured images were compressed on upload and displayed without compromising quality, which significantly improved load times and user experience.
  • Hair Quiz: Developing the Hair Quiz feature was a complex challenge due to the large variety of products available. It required collaboration with the client to refine product data and map user responses to accurate product recommendations.
  • Heavy Traffic: Alterna Haircare’s site received substantial traffic, especially during promotions or product launches. We needed to implement a scalable solution to ensure the platform could handle traffic spikes without performance degradation, though specific details on the scalability solutions remain confidential.

Client Collaboration

We maintained constant communication with the client, collaborating at least every two weeks. This allowed us to deliver updates and meet new requirements, ensuring the platform was continuously improving and aligned with the client's evolving needs.

Results/Impact

Throughout my time on the project, Alterna Haircare saw ongoing improvements in the user experience and overall platform stability. Key features such as the Hair Quiz and optimized product search improved user engagement, while the AWS integration ensured faster page load times. The site’s ability to handle high traffic with scalability solutions in place contributed to its reliability during key moments like product launches.

Timeline & Delivery

While my involvement in the Alterna Haircare project lasted over a year, the support and continuous improvement of the platform was an ongoing effort as part of Skyrocket Digital. The project required continuous updates and enhancements, contributing to the platform’s evolution over time.

Post-launch Support

I was involved in the continuous maintenance and updates of the platform, including handling support tickets, fixing bugs, adding new features, and ensuring the site remained optimized for performance. After completing the initial features, we continued to release incremental updates to the platform as needed, working closely with the support and infrastructure teams.

Final Thoughts

Working on Alterna Haircare as part of Skyrocket Digital was a rewarding experience, allowing me to contribute to the development and maintenance of a high-traffic, content-rich e-commerce platform. Through collaborative client interaction and innovative solutions, we were able to improve the platform's performance, scalability, and user engagement.

‍

No items found.

Similar Projects

Explore Projects
Skyrocket Digital
Webflow
WebTricks
Javascript
CSS
HTML

Discover how we relaunched Skyrocket Digital’s website with 3D models, SEO optimization, and a custom CMS to highlight the outstanding agency services and case studies.

Carsimple
Webflow
JSDelivr
Github
WebTricks
Javascript

Discover how we built Carsimple’s website with a unique multi-filter sorting system, enhancing user experience for Vancouver’s leading used car reseller.

Kabuni
Webflow
Javascript

Read how we developed a clean, engaging landing page for Kabuni’s blockchain platform, focusing on fast delivery and efficient communication of key messages.

From learning to code in the early 2000 to building a tech career, my journey's been all about learning, experimenting, and growing with every line of code. Here’s where it’s led me.
A decade as a profesional software developer
In this article, we'll explore the huge role of design systems as foundational tools play in web development. Let’s dive in and unlock the power of design consistency together.
Unlocking the Power of Design Consistency: The Magic of Style Guides and Design Systems
Any new platform is intimidating the first time and even NoCode apps can be pretty scary, but taking one step at a time will get you there eventually. It is not the only tool that exists but Webflow has come with a lot of possibilities few competitors can match.
How to get started with Webflow