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.
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.
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.
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.
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.
I then constructed low fidelity wireframes of the home and about pages. I organized the hierarchy in order of priority.
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.
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.
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.
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:
