2021 winner!

Cloudburst Design wins the Web Excellence Awards
"Best of the best" in web design and development!

ABBA – Mobile Adaptive WordPress eCommerce Website

ABBA mobile adaptive wordpress web design

ABBA is an global hair care brand that specializes in formulating products with the cleanest, all plant-derived ingredients available, and is the first brand to make 100% Vegan hair care products!  This mobile adaptive WordPress eCommerce web design and development project for ABBA integrates a modern, professional web design style, and fully integrated eCommerce and fulfillment system on a WordPress Content Management System that the client is able to manage and maintain.  In addition to the web design & development aspects of this project, we also designed and created beautiful product imagery graphics with botanical images to help convey the natural brand messaging for this client.

WordPress eCommerce Content Management

This WordPress eCommerce Content Management project was complex on many levels, and required extreme attention to detail to account for orders from all over the world and international shipping fulfillment.  We decided to use WooCommerce to handle the onsite product management and product variations in the eCommerce system.  Product dimensions, weights, and variations were all populated  to allow for seamless integration of  shipping pricing options and fulfillment components for the website.  We also leveraged the Stripe payment gateway for direct online payments over SSL, so customers stay directly on the site during the checkout process.

What is unique about this WordPress eCommerce web development project is that this is the first time that ABBA is able to be purchased directly by consumers from the www.pureabba.com.  Previously, customers could only purchase product from external online retailers and resellers, but the ability to sell direct to consumers via this WordPress eCommerce platform is a huge step forward for the ABBA brand.

ABBA mobile adaptive wordpress ecommerce

Mobile Adaptive Design & Development

There are many ways to deliver mobile web content to users. Most recently the terms mobile responsive and mobile adaptive development have gotten the most attention.  We refer to this design as mobile adaptive simply because the site content actually adapts to the mobile device, which means that the mobile content and mobile user experience are actually tailored specifically for mobile users to deliver the best possible mobile experience.

For the ABBA web development project, we leveraged our custom-build Cloudstrap theme running on Twitter Bootstrap mobile framework to handle the mobile CSS breakpoints and baseline mobile adaptive functionality.  All images are scaled and resized correctly across the site, and this is true for all banner designs, product images, galleries, and ecommerce functionality.

ABBA mobile adaptive wordpress web development

Product Image Design & Layout

This web design project had several critical components to convey the brand and products in a professional way, and product imagery was one of those design considerations that we spent significant time and design cycles on for this web design project.  Specifically, the product image designs required that we combine high quality product shots with botanical imagery to convey the all-natural aspects of the ABBA brand.  We took great care to combine these images in realistic way, from detailed shadowing, depth and layering, and a clean reflection to create a sharp, crisp design style for the product images within the website design.  These were created at resolutions for the web, as well as larger print resolutions for use in larger applications and traditional print advertising.

ABBA mobile adaptive wordpress web development

Custom User Roles & Accounts

This WordPress eCommerce mobile adaptive website also features custom user roles and user accounts for salon professionals.  In addition to selling directly to consumers, this eCommerce site was developed to allow salon professionals to apply for a professional account on the website, which is reviewed and approved by site admins within the CMS.  Once these salon professional users are approved by an ABBA admin user, they are able to browse the site as a logged in user and receive wholesale pricing on products for direct purchase and shipping to their salon.  With this functionality, we enabled this WordPress eCommerce CMS site to support both direct to consumer shopping, as well as wholesale pricing structure for industry professionals who need to restock ABBA products in their salons.

About ABBA

ABBA is global hair care brand based out of the United States, that specializes in creating 100% Vegan hair care products that perform extremely well for their customers.  The company has been around for over 25 years, and continues to be the dominant, all natural hair care brand for environmentally conscious customers and salon professionals world wide.

Visit the site