Lenny Guitar Shop
An online guitar shop, taken from rough wireframes through to finished screens and a real component system.
Context
Buying a guitar online is a high-stakes, high-emotion purchase. People agonize over the model, the color, the feel, and they do it from a photo. I wanted a store that respected that: bold, confident, and easy to browse, with enough product detail to make someone comfortable spending real money on an instrument they can’t hold yet.
The name is a nod to Stevie Ray Vaughan, who is the reason I picked up a lot of what I know. “Lenny” was his guitar, named after his wife Lenora, and SRV runs all through the site as the spirit of the place. So the identity is loud on purpose, black and a strong red, closer to a gig poster than a spreadsheet. It’s a store that feels like it was built by someone who actually cares about the instruments, because it was.
My role
I designed the whole thing, from the first grey-box wireframes to the final screens and the system that holds them together.
Loud brand, calm checkout.The balance the whole store is built on
Grey boxes first
I started ugly on purpose. Before any color or type, I laid out low-fidelity wireframes for the main screens so I could argue about structure without getting distracted by how it looked: where the product image sits, how much detail goes above the fold, how someone gets from browsing to checkout in as few steps as possible.
The store
Once the bones worked, I built the high-fidelity screens: the homepage, the product listing, the product page, and the checkout. The red and black carry the personality while the browse-and-buy flow stays clean and predictable.
The buy flow ends on a thank-you, with Stevie seeing you off.
The whole flow has a full mobile version too, built from the same components so nothing drifts between screens.
Beyond the basics
The catalog pages were the brief. These two are where I pushed further, and the Customize builder is the piece I’m proudest of. Pick a stock pickguard design or upload your own art, and a fixed catalog turns into something personal.
Close behind is Trade In, a full second market for buying and selling used gear, with condition, country, and price on every listing.
The system
Under all of it sits a real component system. The buttons, cards, nav, and footer are reusable components with variants (primary and secondary, default and hover), documented alongside the type scale, color, and effects, so the screens are built from the system rather than drawn one by one.
I also rendered the guitars in a range of colorways, so the product card had to hold up across very different images without the layout falling apart.
Key decisions
-
01
Treated wireframes and the system as real deliverables.
The low-fi stage is where I settled the hard layout questions, and the component system is what turns a pretty concept into something buildable. Structure and reuse are what make a design real, not just good-looking.
-
02
Let the brand be loud, kept the shopping calm.
The red and black carry the personality, while the actual browse-and-buy flow stays clean and predictable so nothing gets in the way of the purchase. Personality should set the mood, never block the sale.
-
03
Built the product card to survive many colorways.
Because the same card had to hold a sunburst, a black, and a bright red guitar, I designed for the awkward cases early instead of tuning everything to one hero shot. A real store has messy inventory.
Result
It shows the full arc: grey boxes, to finished screens, to a real component system, reused across a full desktop and mobile set, so the screens are built from the system rather than drawn one at a time.
What I’d do next: round out the component states (disabled, error, focus), add design tokens, and usability-test the checkout.
Explore the file
The real Lenny Guitar Shop file, live. Pan and zoom the whole design, or flip to the clickable prototype.
Drag to pan · scroll to zoom the whole file