Shogun Swag Store

Overview

After building the software that powers over 18,000 online stores, the Shogun team decided it was time to have a store of their own.

I designed Shogun General with a focus on flexing the customization power of Shogun Frontend. I also worked with the team at We Make Websites through the development process to bring the store to life. Explore the live store here!

Tools

Figma, Illustrator, Photoshop

Role

Art Direction, Web Design

Role

Art Direction, Web Design

Nº1: Initial page load and scroll animations

Nº2: Mobile view

Nº3: Shopping bag active state

Nº4: Horizontal scroll navigation and product card hover state for the expanded menu

Nº5: Photography; minimal, high contrast studio shots. Bright backgrounds to contrast the dark Shogun merch with colors informed by the Shogun Frontend palette

Nº6: A few sections designed to showcase common ecommerce functionalities across the store

Nº7: Some states and guidelines documented for dev handoff 🎉🎉

Nº8: Company and text-only pages; explored some ways of breaking the grid on these pages for visual interest & to show how nuanced custom sections can be using Frontend

Nº9: Collage; Unrefined (& v pink :-)) exploration I did around hover states, menus, and product pages before zeroing in on a few favorites

Nº10: Product page layout; went with the full bleed background to lean into a more unconventional ecommerce layout

‍

View next project

Heading

Shogun Swag Store