Chugs R' Us

E-Commerce site for heavy metal fanatics built on Shopify

E-Commerce

UX Design

UI Design

Research

Frontend Development

Designed & Built with

Shopify

Vanilla Javascript

Liquid Templating Language

CSS

Figma

Here were the

Context & Problems

The young company was eager to experiment with various marketing strategies for their blog to attract recurring visitors. They aimed to incorporate email marketing into these strategies, requiring flexibility in the blog design to accommodate different concepts they wanted to test.

The brand sought to balance the dark and aggressive aspects of heavy metal music with humor. Metal is a genre known for its darkness, aggressiveness, grandiosity, and fast pace, which often conveys themes of institutional anarchy, intense emotions, personal struggles, and resilience. They wanted their branding to capture the "heaviness" associated with these elements.

Here was my

Approach

My approach to this was simple. First, I aimed to understand the potential content types they were looking to explore and their goals. It turned out they were primarily interested in written articles and videos, as well as building an email list. From there, I sought to examine other platforms that have excelled in creating content-heavy sites. I looked at YouTube, Medium, Dev.to, and others, with the goal of understanding successful layouts and how they incorporated ads/promotions.

I also examined popular fashion brands such as Life is Good, Gym Shark, Nike, and others to see how they handled product content.

During discussions with the client, it became clear that they were more focused on appealing to listeners of specific subgenres rather than covering the entire metal spectrum. For instance, instead of targeting fans of thrash metal bands like Warbringer or SpiritWorld, their primary focus was on attracting listeners of metalcore and deathcore bands such as Make Them Suffer, Shadow of Intent, Breakdown of Sanity, and Ice Nine Kills. While this might seem like similar aggressive noise to non-"metalheads," it holds significant distinctions for dedicated listeners. This preference influenced the styling, drawing inspiration from the artwork of popular modern metal bands. Additionally, I explored brands like Liquid Death, a popular canned water brand, to understand how they balanced a dark yet humorous dynamic.

Here was the

Solution

To simplify user interactions, a drawer opens when clicking the search icon, quick add button, or mini cart button. It dynamically loads relevant information, streamlining code and ensuring a consistent user experience.

For versatile content testing, a "blog type" allows creation of blogs as traditional written or video posts with YouTube or Vimeo URLs. The page layout accommodates both video and written blog content, with an optional product recommendation space.

The theme supports various blog types, including written and video blogs. The main navigation can display all blogs and suggest recent articles as desired, achieving a balanced design with dark colors, grays, reds, and yellows.

Results for

Mobile

Home page on mobile.

Minicart for users to quick see cart contents.

Minicart scrolled down.

Quick add panel instead of loading the entire page.

Responsive search with debounce in javascript.

Top of product page.

Top of blog page with video type selected.

Scrolled down on the blog page showing email sign up form.

Results for

Desktop

Home page at full width.

Minicart panel open.

Quick add panel without loading entire product page.

Responsive search with debounce in javascript on desktop.

Product page on desktop view.

Blog page with video type selected. Optional product promo by admin.