WEB
Straight Set Orthodontics
UI/UX Design, Project Manager
GRIM Workshop
Fully Custom Shopify eCommerce Store
My Role
UI/UX Designer
Project Manager
VIEW LIVE SITE
01. Overview
Grim Workshop came to us looking to refresh their existing Shopify store but were unsure where to begin. With hundreds of survival tools and deeply detailed product metadata, the site had grown complex and difficult to manage. The challenge immediately stood out as one of organization, clarity, and brand expression. This project quickly became one of my favorites. I enjoy breaking a product down to its foundation and rebuilding it with intention. The goal was not just to modernize the interface, but to elevate how Grim Workshop's rugged, preparedness focused brand was communicated through design.
02. Problem
The client was dissatisfied with existing Shopify themes, finding both free and premium options too restrictive, visually misaligned with the brand, or cost prohibitive. They were unsure whether a fully custom solution was even possible within Shopify. Beyond the visual limitations, the real challenge was scale. Hundreds of tools, each with extensive instructions, specifications, and usage details, resulted in dense walls of text that overwhelmed users. Many products also required visual or video demonstrations to be properly understood. Organizing this information into cohesive collections and presenting it clearly on the front end felt daunting and unsustainable in its current state.
03. Design Process
With approval from the development team, I was given creative freedom to push beyond typical Shopify UI constraints while remaining mindful of scope. The design process focused heavily on information architecture and content hierarchy. Large blocks of instructional copy and metadata were reorganized using accordion menus, structured layouts, and progressive disclosure patterns to keep pages scannable and approachable. To further support discoverability across a massive product catalog, I introduced intuitive dropdown filtering patterns that allowed customers to quickly sort and narrow tools by category, use case, and form factor. Video instructions were thoughtfully integrated where appropriate to enhance comprehension without clutter. Throughout the process, I worked closely with developers to ensure feasibility and performance, balancing creativity with practical implementation. Multiple design reviews with the Grim Workshop team helped refine the experience and align it closely with their vision.
04. Solution & Results
The final solution was built using a headless Shopify approach, leveraging a Hydrogen based React frontend to fully realize the custom designs and move beyond Shopify's traditional limitations. This approach allowed the Grim Workshop storefront to feel purpose built for their products rather than constrained by templates. Brand elements from the original site, including the signature black and green accents, were reintroduced with restraint and intention, creating a cleaner and more modern aesthetic. The result was a flexible, scalable eCommerce experience that better showcased Grim Workshop's extensive product line while staying true to their rugged, preparedness driven identity.