Your Friend Logan - Designing a Shopify-integrated merch site for a comedy music documentary

A Shopify-integrated merch store for a comedy music documentary. The goal for this project was to create a website for the Your Friend Logan premiere that was integrated with Printful to sell shirts and posters. I wanted to give a fun and whimsical aesthetic to the website in Webflow that matched the vibe of the film. I had access to a web developer who specialized in Webflow and was available to assist with the project.

Tools:

• Figma
• Figjam
• Webflow
• Shopify
• Printful

Role:

• UX / UI
• Visual Design
• Shopify and Printful Integration

Team:

• Mindy Kilgore
• Jonathan Arent-Draper

Duration:

• 3 weeks
• July - August, 2025

‍Planning

I broke down the scope of the project into phases of the design process, starting with defining goals and making a schedule. This would be followed by research and analysis, doing both competitive and task analysis. Then I would start on information architecture and visual design. After review, we would move into development and QA the week before the premiere.

‍

Research

I conducted a competitive audit and task analysis for the client. I looked at other documentary websites, and I found that there were few other professional websites for singular documentaries (Most were single pages of a larger production company website). I examined the ones I found to see common practices, which included an about page, a press kit, socials, and links to watch the documentary. The task analysis concluded that the desired goals of merch sale conversions and people watching the documentary didn't require complex task breakdowns. We discovered the challenge that the Printful to Webflow plugin had been sunset only a few months prior, so we would need to find a workaround.

Information Architecture

I created an information architecture diagram in Figjam to assign clear organization. It was a priority to achieve clear navigation for the "Shop Merch" CTA (the driving conversion for the site) while also drawing lower priority attention to where to watch, the about page, press kit, collaborators, and contact information. Since it was such a small site, I included all information on each page in the diagram.

Sketches

I created sketches for the home page and about page. I focused on the hero description (that this site was the official merch store) / link to watch and the merch store as the top priority, but also included contact info on the home page for users looking to get in touch. For the about page I prioritized the about description, link to watch, the press kit, and collaborators. Sketches were sent to the client for critique and approval to move forward in the process.

Lofi Wireframes

I then constructed low fidelity wireframes of the home and about pages. I organized the hierarchy in order of priority.

Lofi Prototype

I created a low fidelity prototype of the desktop breakpoint in Figma. This was shared with the developer to get on the same page before diving into development.

‍

View Prototype

Hifi Wireframes

Visual design for the Your Friend Logan merch website. I left the store items in lofi since we were going to use an embed code or plug in for the merchandise. The goal here was to match the whimsical, cartoony aesthetic of the documentary.

Integration

We were still facing the issue that Webflow had sunset the integration plug in for Printful, so we did some research and discovered that we could integrate Printful with Shopify, and then use the Shopify embed code to display the merchandise on the live Webflow site. Once the development process had started, we started the Printful / Shopify integration. I assisted the client in gettin their Printful shirts and posters to automatically populate in Shopify. Then I finished setting up their Shopify store and secure an embed code.

Project Images

Final product images of the home and about page. The Shopify embed automatically populates from Printful, and to prioritize the merch section of the store, the "Shop Merch" CTA in the navigation has become an anchor that scrolls the user right to the store. The full site with interactions can be viewed in the link below:

Check out Yourfriendlogan.com

Interactions

The "Shop Merch" CTA in the navigation has become an anchor that scrolls the user right to the store, to prioritize the store as the main CTA for the site.

In the contact block, Lizard and Fish’s rocket ship fades in and shoots up as the user scrolls. Elements also fade in and swipe up upon page load and many elements have hover states.

Accessibility Considerations

• Large touch targets for buttons (44px x 44px)
• Mobile and tablet optimization for responsive design
• AA WCAG Compliance
• Alt text
• Organized to be viewable by a screen reader

Takeaways & Next Steps

• Any new merch items added to Printful will automatically update on the website, allowing for easier long term maintenance for the client.
• Website was mentioned in a feature article about the Your Friend Logan documentary in North Bay Bohemian, creating substantial traffic.
• Goal for site to be live before the premiere was met. Premiere was sold out at the Phoenix Theatre in Petaluma, CA.