The Cracked Dispensary eCommerce Store

Challenges

Cracked was strategically evolving from what was strictly an editorial based humor and entertainment site to a full blown media brand. With such a rapid growth in audience size, how can we leverage our growing audience to scale the brand?

Solutions

In order to continue the growth of the brand and to leverage their ever growing audience size, Cracked looked to scale the business by branching out into new revenue streams. This gave birth to the Cracked Dispensary eCommerce store. The original idea behind the Cracked Dispensary was to create a market place where Cracked users could purchase t-shirts which designs were based on the most viral topics discussed in Cracked’s content. Cracked users could also submit their own artwork based on their favorite pieces of content and would be paid if their submissions were chosen by the editorial team. Cracked also strategically used their popular article list format, “listicles”, on the website to promote the store by featuring articles written specifically about the artwork designs on the t-shirts, where links to purchase them were embedded into the content. Cracked would also promote and advertise the store through in-house banner ads on the site, as well as through their weekly email newsletter, on social media and with cast members wearing the t-shirts in various media content.

MY ROLE

As the lead product designer and art director for the Cracked Dispensary eCommerce Store website, my responsibilities encompassed the end-to-end product design process. This involved conducting user research to gain valuable insights into user needs and preferences. With the research findings as a foundation, I collaborated with the team to develop mood boards that captured the desired visual direction and tone for the website. Working closely with a Senior Visual Designer, we crafted user flow maps to ensure a seamless and intuitive user experience, while I provided guidance to ensure the final designs aligned with project goals.

In addition to website design, I was responsible for creating promotional materials for the store. This encompassed designing and delegating in-house ads for Cracked's website, newsletter emails, and social media assets. Working collaboratively with the team, I ensured consistent branding and messaging across different platforms. I also actively participated in decision-making discussions, contributing to design layouts and t-shirt color choices to ensure they aligned with Cracked's overall brand image and customer preferences.

Later we focused on optimizing the checkout process through user-centered enhancements. Through rigorous A/B testing, we generated multiple design concepts and randomly assigned users to different versions. By closely analyzing user behavior, collecting quantitative data, and gathering qualitative feedback, we measured the effectiveness of each layout variation. This iterative design process enabled us to make data-informed adjustments and refinements, resulting in an optimized checkout experience that maximized conversions and user satisfaction.

Ideation

Moodboards

For the Cracked dispensary, the writers of the site came up with the idea of having the store have the look and feel of an 1800’s antique pharmacy / dispensary. So as a design team we researched and gathered different imagery online, screenshots of existing eCommerce sites we liked, as well as color schemes and put together mood boards like the one I made below. This helped us establish an overlook and art direction for the site before we began laying out the design.

The Cracked Dispensary: Mood board example

Design

High Fidelity Mockups

Once we had finalized the mood boards and received approval from stakeholders, the focus shifted towards launching an MVP version of the store as quickly as possible. At the initial launch, we had a limited selection of 4 t-shirt designs, which influenced the design of the homepage. We showcased these four products prominently and featured an image of our talented writer/actor, Soren, wearing the "Thesaurus" shirt. The team brainstormed an exciting concept for promotional images, envisioning Cracked employees wearing the shirts in heroic scenarios. For example, Soren saving Breandan from a fire or rescuing a cat from a tree. However, as the site expanded, we realized that organizing photoshoots for each product launch would be too challenging and time-consuming.

As the site grew larger, we made several design enhancements to the homepage. Our aim was to accommodate a broader range of t-shirt designs and categorize them effectively. We also took user feedback from the initial launch into account and redesigned the layout and UI of the product detail page. Our primary focus was to improve the intuitiveness of selecting size and color options, streamlining the process with fewer clicks. These updates resulted in a more satisfying user experience for our customers.

1st Round Mockups

1st version of The Cracked Dispensary Homepage

1st version of The Cracked Dispensary Product Detail Page

2nd Round - Updated Mockups

Updated version of The Cracked Dispensary Homepage

Updated version of The Cracked Dispensary Product Detail Page

Production

Product Shot Creation

PROCESS EFFICIENCY

As the store expanded its merchandise and design offerings, we faced the challenge of producing assets quickly. To address this, I organized an in-house photoshoot with team members wearing blank t-shirts in different color variations. By photographing the shirts without designs and later adding the designs digitally, we accelerated the process of showcasing products on the site. This approach provided us with a variety of assets that could be utilized for promotional purposes.

cutout image examples from photoshoot to use for product examples on store and promotional assets

Artwork Layout

ARTWORK APPROVAL

In addition, I took on the responsibility of preparing the artwork for print. To ensure final approval from stakeholders regarding the size of the artwork and color options for each design, I created a template. This template allowed me to showcase how the design would appear on a t-shirt, as shown in the example below. Once the design was approved, I would print it out on paper and physically place it on a blank shirt. This step ensured that the final design was the correct size and didn't have any unexpected issues before proceeding to the printing phase for the shirts.

Store Promotion

Article Page Promotion

CUSTOM CONTENT

A significant promotional strategy for Cracked Dispensary involved harnessing the audience through custom articles on the Cracked.com website. Talented writers at Cracked would craft engaging content in a standard article format, focusing on the artwork featured on a particular t-shirt. These articles would be seamlessly integrated into the site's content, providing valuable information to readers. Within the articles, we strategically embedded links, rather than prominent buttons, that would direct readers to the Cracked Store for purchasing the merchandise. This approach maintained a more organic and less overtly promotional appearance, enhancing the overall user experience. (Example below)

Ad Promotions

We also promoted the store through advertisement placements on the Cracked website, email newsletters as well as social media promotions. I was responsible for the creation and delegations of all promotional ads. Below are just a few examples of some of the promotions we created.

AD PLACEMENTS

Cracked.com website ( Site skins / Homepage & Article page dropdown ads / 300 x 250 ads / End of Article ads, mobile ad units )
Email newsletter
Social Media

Promotional email blast with store discount

Conclusion

Results

The implementation of the Cracked Dispensary eCommerce Store proved to be a resounding success, as it achieved significant growth in its first year of operation. Despite not having dedicated resources, the eCommerce business managed to generate an impressive revenue of $300,000. This achievement is a testament to the effective utilization of Cracked's growing audience to scale the brand and diversify its revenue streams as well as the careful consideration given to every aspect of the user experience.