Triple D Gaming
E-Commerce Website Design
Triple D Gaming is my tabletop gaming brand focused on unique 3D-printed chess sets and gaming accessories. This project explores the design of a dedicated e-commerce website for the brand, with plans to eventually develop the website using Shopify.
Role
UX/UI Designer
Tools
Figma, ChatGPT, Adobe CC
Project
Hypermedia/Multimedia Design
Real Brand
Triple D Gaming and the products shown in this case study are real. I created the chess pieces in Blender and currently produce them through 3D printing. The website is also something I plan to build in the future.
Fictional Goals
The project goals, timeline, budget, and some marketing plans in this case study are fictional and created for this
course.
Design Focus
This case study focuses on the planning, user experience design, and visual design
created in Figma.
Future Development
The next step is to code it and then launch the website using Shopify.
The Problem
From Etsy to a Dedicated Storefront
Triple D Gaming currently relies primarily on Etsy for online sales. The goal of this project was to design an independent storefront that gives the brand more control over the customer experience
while making products easier to discover and purchase.
Limited Control
Etsy restricts branding and customization options
for the customer experience.
Discoverability
A dedicated website can improve search visibility
and attract new customers.
Replacement Pieces Customers need a way to purchase individual replacement chess pieces
instead of an entire set.
Note on Project Goals
The goals, timeline, budget, and marketing plan in this case study are fictional and created for this course. However, the brand the products, and the idea for the website are real and based
on my actual business, Triple D Gaming.
Project Goals
Clear Goals for Growth
Increase Organic Search Traffic
70% within six months of launch.
Increase Monthly Sales
400% within twelve months of launch.
Expand Product Line
3 new products by the end of the year, with one new product each quarter.
Wireframes
Planning the Structure
Before developing the visual design, I created low-fidelity wireframes in Figma to plan the basic structure of the website.
Flow Chart
From Discovery to Purchase
This flow shows a typical user journey through the Triple D Gaming website,
from initial discovery to purchase, including alternative paths and exit points.
Wireframes
Planning the Structure
Before developing the visual design, I created low-fidelity wireframes in Figma to plan the basic structure of the website.
Row 1 (from left to right)
Home, About us, News
​
Row 2 (from left to right)
Products, Product1, Contact
The wireframes helped establish:
Page Hierarchy
Organizing information based on what users need to see first.
​
Consistent Navigation
Keeping the main navigation in the same location across each page.
​
Content Placement
Planning where product images, descriptions, buttons, and other content would appear
​
Shopping Experience
Creating a clear path from browsing products to viewing an individual product.
Homepage Design
A Welcoming and Focused
Experience
The homepage is designed around three main goals. The first is to guide users toward interacting with the hero section, whether that's purchasing a featured product, signing up for our newsletter, or exploring a new product announcement. The featured content determines the primary action we want users to take.
​
The second goal is to introduce users to Triple D Gaming and communicate our brand identity through imagery, text, navigation, and content structure. Finally, the homepage should help users find the information they need to make informed purchasing decisions.
Hero Section
The hero is the first major point of interaction on the homepage. Its featured content can change depending on what we want to promote, with a clear call to action guiding users toward that goal.​
​Featured Products
Directly below the hero, we showcase a selection of our chess sets. This gives users an opportunity to explore our products without having to navigate to another page first.
Newsletter & Footer
The newsletter encourages visitors to stay connected and learn about upcoming products. The footer provides additional navigation and contact information, helping users find what they need as they explore the website.
Product Showcase
Bringing the Products Front and Center
The product showcase is designed to give visitors a closer look at what Triple D Gaming has to offer. By highlighting our chess sets through product photography, we can communicate the different styles, materials, and designs available.
Product Photography
Large, clear images allow customers to see the details of each chess set and better understand what makes each design unique.​
.png)
​Shopping Experience
A clear path to each product page allows customers to explore additional details and make informed purchasing decisions.
Product Information
Each product includes its name, price, and a short description to help customers compare their options.
​
.png)
Product Detail Page
Helping Customers Make Informed Decisions
The product detail page is designed to give customers the information they need before making a purchase. The layout prioritizes product imagery, descriptions, and a clear Add to Cart button.
.png)
Product Information
The product name, description, and purchasing options are placed together so customers can quickly understand what they're buying.
Product Photography
Multiple images showcase the chess set from different angles, including close-ups of individual pieces. This helps customers see the details, materials, and overall design.
.png)
Clear Purchasing Path
The Add to Cart button provides a direct next step, while the consistent navigation allows customers to continue exploring other products.
CONCLUSION
Next Steps & Future Plans
The next step is to use the Figma prototype as the foundation for a fully custom-coded website, which will eventually launch as a Shopify storefront.
​
Beyond the website, I plan to expand Triple D Gaming with new products, including Magic: The Gathering tokens, custom deck boxes, and eventually Gods & Heroes, an original board game I've been developing
Shopify
Launch a Shopify storefront
MTG
Tokens, Deck Boxes
.png){kind=small}
Gods & Heros
This is a original board game