A REAL BRAND · AN E-COMMERCE CONCEPT
Triple D Gaming
Distinctive pieces.
A storefront of their own.
Designing a dedicated shopping experience for my 3D-printed chess sets and tabletop accessories.
- My role
- UX/UI designer & brand owner
- Context
- Hypermedia / Multimedia Design coursework
- Tools
- Figma · Blender · Adobe CC · ChatGPT
- Deliverable
- E-commerce interface concept
01 / THE CHALLENGE
From Etsy to a dedicated storefront.
I make the products. This project asked how a website could give them a clearer place to be discovered, compared and purchased.
Triple D Gaming already had a real product line and an Etsy presence. A dedicated storefront offered more control over the brand experience. The coursework became a way to plan that experience in Figma before committing to development.
01Own the experience
Give the brand more control over presentation and navigation than a marketplace listing.
02Make comparison easier
Bring materials, product images and purchasing information into a consistent structure.
03Support individual pieces
Account for shoppers looking for a replacement chess piece rather than an entirely new set.
THE PHYSICAL PRODUCTS
Small pieces. Big personality.
The nautical forms are real products, modeled in Blender and produced through 3D printing. Product photography makes their materials and individual character tangible.
02 / STRUCTURE FIRST
Map the path before styling the page.
The purchase flow connected discovery, product browsing, detail and checkout, including an alternative route through information about the brand.
Six pages, one consistent structure.
I used low-fidelity Figma wireframes to establish the hierarchy, repeated navigation and placement of products, copy and actions.
Home, About, News, Products, a product detail page and Contact gave the concept a shared foundation before the visual design.
The question throughout was practical: what does someone need to see next to move from browsing to understanding a product?
03 / THE WEBSITE DESIGN
Let the products do the talking.
The blue and green identity carries into a restrained interface, while large photographs show the differences between the sets.
A focused first action
The hero establishes the featured collection and offers a clear next step, rather than asking visitors to interpret the whole catalog at once.
Details that support comparison
Repeatable product layouts bring style, material and price into the same visual rhythm. The imagery remains the main point of difference.
04 / PRODUCT DETAIL
Show the piece.
Explain the choice.
The detail page places the featured photograph beside product information and a purchasing action. Further images show individual forms and the set in context.
This is the original design artifact. Some draft descriptions and product names still need editing before development; the interface is not presented as a launched or validated shop.
05 / WHERE THE PROJECT STANDS
From products to a storefront.
What this project established
A discovery-to-purchase flow, a six-page structure and an identifiable e-commerce visual direction grounded in real products.
What comes next
Refine the draft copy, resolve replacement-piece options, test the shopping journey and use the Figma work as a foundation for a future storefront.
The original coursework included fictional business goals, timelines and marketing plans. Those figures are not sales or traffic results. No participant-testing outcomes are claimed here; the website has not launched as part of this case.