CYKLAR WooCommerce Case Study

A website redesign (via Wordpress) of a body care company

Spring 2025

CYKLAR Home Page— https://erinkhall.com/project-three/commerce/

Overview — — — — — — — — — — — — — — — — — — — — — — — — — — —

For this project, I was tasked with building a functional e-commerce website using the WooCommerce plugin in WordPress. I chose to recreate the CYKLAR website, incorporating my own creative interpretations throughout the design. I also integrated additional plugins like HUSKY and Superb Addons to enhance functionality. While my version isn’t an exact replica of the original, I’m really proud of how it turned out — especially in terms of layout, visual aesthetic, and overall usability.

Problem — — — — — — — — — — — — — — — — — — — — — — — — — — — —

The goal of this website is to serve as a central hub for all external body care needs, with a strong emphasis on sustainability and user satisfaction. The site’s design is intentionally sleek, fresh, and subtly vintage to reflect the brand’s commitment to the environment, high-quality products, and long-lasting appeal. Even at first glance, the striking visuals are designed to capture attention and spark interest in the products. With a wide range of body care items and fragrances, the site offers something for everyone, allowing each customer to find products that reflect their preferences and identity.

Solution — — — — — — — — — — — — — — — — — — — — — — — — — — — —

To create this commerce site, I began by familiarizing myself with the original CYKLAR site, focusing on its typeface, color scheme, and overall aesthetic. I found that the site conveyed a clean, sensual, and slightly vintage vibe. With that in mind, I researched various themes that could capture a similar look. Surprisingly, choosing the right theme turned out to be one of the most challenging parts of the project. I also ran into difficulties customizing the CSS, particularly when it came to typography, colors, and block placement. After a lot of trial and error, I ultimately chose the Woodix E-Commerce theme.

— — — — — WOODIX E-Commerce Theme — — — — —

This theme featured a color scheme and typography that aligned well with CYKLAR’s clean aesthetic by using cool browns, blacks, and sans serif fonts. The page layout also enhanced the brand’s inviting and sensual feel, complementing both the products and the existing brand image. After selecting the theme, I organized all of my product images into an organized folder, created the site pages and navigation bar, and added functional links to the buttons.

— — — — — Folder Organization for Images — — — — —

With the brand image, website setup, and all necessary information and images in place, I moved on to designing each page. Because I had already invested time in finding a well-functioning theme, this stage turned out to be one of the easiest and most rewarding parts of the process. It allowed me to become more comfortable with WordPress and explore various widgets and layout patterns.

My main goal was to create clear calls to action for each product on the homepage while maintaining a visually balanced layout. I used white space around each element to convey cleanliness, applied visual hierarchy to highlight new items, and staggered images and text to create a sense of flow and balance — reflecting the brand’s overall harmony. For typography, I chose varying shades of brown to represent skin tones, nature, and a vintage aesthetic, all reinforcing the brand’s identity.

— — — — — Home Page — — — — —

— — — — — About Page — — — — —

Overall, the product page (Shop) was the most challenging part of the site to build. I struggled with learning the WooCommerce plugin, especially when it came to tagging products, setting up filters, and optimizing the shopping experience for accessibility. To work through these issues, I watched tutorials and relied on trial and error to understand how different settings affected the page layout and functionality. Despite the initial difficulty, I’m really proud of how the Shop page turned out. The final version features 13 products, each with a detailed description, fragrance notes, ingredients, customer reviews, and multiple images (both of the product itself and in use) with a zoom-in feature for closer viewing.

— — — — — Shopping Page Overview — — — — —

— — — — —Individual Product Page — — — —

— — — — — Individual Product Page Cont. — — — — —

— — — — — Cart View — — — — —

— — — — — Checkout Page — — — — —

Results — — — — — — — — — — — — — — — — — — — — — — — — — — — —

All in all, I believe the final website successfully reflects the CYKLAR brand in terms of accessibility, visual balance, and overall representation. I’m especially proud of the homepage and the video compilation I created for the banner, which I feel truly captures the brand’s focus on sustainability and quality.

Throughout this process, I gained a solid understanding of WordPress basics and now feel confident navigating themes, plugins, widgets, and blocks. Looking ahead, I hope to improve my skills in customizing CSS, particularly with fonts, colors, and plugin styling. This was the one area I didn’t fully master, and I believe enhancing it would’ve made my site even more aligned with the original CYKLAR design.