Ten-day sprint to launch an E-commerce site for a new clothing brand.
Enferno is a brand-new clothing company made by and for bodybuilders. They came to me with ten days to launch before the 35th Annual Arnold Classic bodybuilding contest- getting to market was a tall order but we made it happen!
Enferno had products designed and ready to be drop-shipped, but no platform on which to sell or assets for the website.
Enferno was looking for an elegant site design, positioning themselves as a luxury brand within a market that usually caters to athleisurewear. They had an aesthetic in mind: limited pallet, large high-res photography, and a looping video in the hero section.
Shopify was the logical choice for an e-commerce site employing a drop-shipping model.
I spent several hours on the phone with the two founders that night, discussing their aesthetic and specific site requirements.
Mapping of the site was pretty straightforward, products would be organized by category and released in collections, but one additional requirement was particularly interesting.
The company sponsors athletes (21 total at the time of launch) and needed a way to track sales generated by these athletes to give them credit (payment). This proved to be a great early opportunity to get the founders onboard with UX design principals.
The founders were adamant about how they wanted to track sales generated by athletes.
They wanted:
I had some questions and doubts; I asked them to view this through the lens of the user's journey.
*this quiz is entirely optional and only intended to illustrate a point.
*required field
This experiment is admittedly imperfect.
This is merely meant to illustrate a point; primacy bias states that users are most likely to chose one of their first few options, and studies have shown that users experience cognitive overload when faced with too many choices. Common wisdom is that a dropdown menu should include no more than 5 - 8 choices.
To their great credit, both founders bought in immediately once I presented this in terms of the user's journey. They were receptive and open to solutions.
Instead of forcing users to make a choice before completing their purchase, I created an optional field on the cart page- empowering the user to get their athlete paid for each sale.
Additionally, we added individualized discount codes on the checkout page that each athlete could share- incentivizing both the user and athletes, giving us two metrics for generated sales on one spreadsheet in the process.
I kept the wireframes high level, moving into Shopify early and designing the collection and product pages within their CMS template structure.
One of the founders is a professional photographer and was shooting the product line in Portland that week. I set to work designing the framework for the site with placeholder images.
After setting up the backend and drop-shipping, I began editing photos as I got them from the shoot, adding relevant alt text and meta tags.
I created banners for the site using the then brand-new generative fills in Photoshop.
I also added copy along the way, taking creative license due to time constraints. The client loved them, especially the one below (muscles not included)!
The founders wanted a few elements that needed to be coded, namely a scrolling marquee at the top of the landing page, and dropdown menus on the product pages that listed materials, return policy, and care instructions.
I know basic CSS but had to learn the class structure of .liquid on the fly to implement these.
The marquee was easy, but the dropdowns took a bit of work. With a little research and bits of found code I got the dropdowns working perfectly, referencing metadata from the products themselves.
1<div id="product-extra-information" class="product-content-below-gallery empty:hidden scroll-margin-offset"><details class="accordion accordion--lg group " is="accordion-disclosure" aria-expanded="false" style="">
2 <summary><span class="accordion__toggle h6"><span class="text-with-icon gap-4"><svg aria-hidden="true" focusable="false" fill="none" stroke-width="1.5" width="16" class="icon icon-picto-delivery-truck" viewBox="0 0 24 24">
3 <path d="M23.25 13.5V6a1.5 1.5 0 0 0-1.5-1.5h-12A1.5 1.5 0 0 0 8.25 6v6m0 0V6h-3a4.5 4.5 0 0 0-4.5 4.5v6a1.5 1.5 0 0 0 1.5 1.5H3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
4 <path d="M.75 12h3a1.5 1.5 0 0 0 1.5-1.5V6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
5 <path clip-rule="evenodd" d="M7.5 19.5a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Zm12 0a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
6 <path d="M12 18h3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
7 </svg>Shipping & Returns</span><span class="animated-plus group-expanded:rotate" aria-hidden="true"></span></span>
8 </summary>
9
10 <div class="accordion__content prose" style="opacity: 0; transform: translateY(0px);"><p><strong>Shipping -</strong> Most orders arrive within 7-10 business days.</p><p></p><p><strong>Returns -</strong> If something is not quite right upon delivery, you have 7 days to send back your items for a full refund. All items must be in an unused, unaltered condition. </p></div>
11</details><details class="accordion accordion--lg group " is="accordion-disclosure" aria-expanded="false" style="">
12 <summary><span class="accordion__toggle h6"><span class="text-with-icon gap-4"><svg aria-hidden="true" focusable="false" fill="none" stroke-width="1.5" width="16" class="icon icon-picto-earth" viewBox="0 0 24 24">
13 <path clip-rule="evenodd" d="M12 23.25c6.213 0 11.25-5.037 11.25-11.25S18.213.75 12 .75.75 5.787.75 12 5.787 23.25 12 23.25Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
14 <path clip-rule="evenodd" d="M7.079 15.75a1.5 1.5 0 0 0 1.455-1.864l-.75-3A1.5 1.5 0 0 0 6.329 9.75H.976a11.246 11.246 0 0 0 4.016 11.042L6 15.75h1.079Zm13.906-10.5h-4.064a1.5 1.5 0 0 0-1.455 1.136l-.75 3a1.5 1.5 0 0 0 1.455 1.864h1.579l.791 4.75a1.5 1.5 0 0 0 1.48 1.253h1.925a11.2 11.2 0 0 0-.961-12V5.25Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
15 </svg>Materials</span><span class="animated-plus group-expanded:rotate" aria-hidden="true"></span></span>
16 </summary>
17
18 <div class="accordion__content prose" style="opacity: 0; transform: translateY(0px);"><p>{{ product.metafields.custom.materials.value | newline_to_br}}</p></div>
19</details><details class="accordion accordion--lg group " is="accordion-disclosure" aria-expanded="false" style="">
20 <summary><span class="accordion__toggle h6"><span class="text-with-icon gap-4"><svg aria-hidden="true" focusable="false" fill="none" stroke-width="1.5" width="16" class="icon icon-picto-love" viewBox="0 0 24 24">
21 <path clip-rule="evenodd" d="m12 21.844-9.588-10a5.672 5.672 0 0 1-1.063-6.551v0a5.673 5.673 0 0 1 9.085-1.474L12 5.384l1.566-1.565a5.673 5.673 0 0 1 9.085 1.474v0a5.673 5.673 0 0 1-1.062 6.548L12 21.844Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
22 </svg>Care Instructions</span><span class="animated-plus group-expanded:rotate" aria-hidden="true"></span></span>
23 </summary>
24
25 <div class="accordion__content prose" style="opacity: 0; transform: translateY(0px);"><p>Machine wash cold with similar colors. Hang dry only.</p></div>
26</details></div>With two days to launch I had most loose ends tied up and was waiting for mocked-up images of the garments. These were to be the main product images, ensuring a clean, cohesive look throughout the site. The client had a friend making these, who said they'd previously made mock-ups for a major brand.
What I got was this...
I didn't like it, and neither did the founders.
I know my way around Photoshop, so I made a full line of mock-ups- with the clock ticking away.
Yeah, it's a lot of skulls. They know their market.
The client was elated! They felt these images represented their products well and, often, pretty images = sales.
