eccommerce businesseccommerce businesseccommerce businesseccommerce businesseccommerce businesseccommerce businesseccommerce businesseccommerce business
Overview
Website Design
Visual Art
Site Functionality
Conclusion
Contributors
Stephan Church - Web Design / Artist / Animator / Coding
David Klingler - JS/Php Troubleshooting
Timeframe
May 2021 - Present Day
Programs/Software
InDesign | Illustrator | Local | Photoshop | Visual Studio Code | Woocommerce | Wordpress | XD
TCA Gaming LLC was my first client when I started as a contract worker. It is an ecommerce website focused on selling pokemon cards. I first updated his website on Ochanoko before creating a Wordpress site using a custom created wordpress template. The project was based around the Woocommerce plug-in and utilizes Php and Javascript built around the Wordpress/Woocommerce architecture.
website frontpage website product page website user page
website online cards website purchase website user page
website 404 website categories website products search
website blog website ebay website online store
Website Design
Introduction
The website was created to capture nostalgia using traditional design trends. The container was made more tight and primary colors were chosen due to their use in traditional pokemon brand use. I worked with the client directly to get a better sense of his brand identity. For more information, refer to the design document attached below.
Visual Design
Introduction
Being based on an already established IP, I already had an established design language to work with. TCA Gaming is hyper focused on the nostalgia of pokemon so rather than copying the current design language, I focused on abandoned 90s concepts. This included a focus on the classic Sugimori art style that once defined the series.
 
It was a bit harder to create art based on complex marketing imagery. In this case, I preserved a large part of the details, but limited my palette to painting with two tone art with a white lighting effect to create visual cohesion.
Avatars
I purposely locked the avatar system to avatars that I designed to keep the users immersed in the visual style of the site.
avatarart
avatarart
avatarart
avatarart
avatarart
avatarart
avatarart
avatarart
avatarart
avatarart
avatarart
avatarart
Adverts/Banners
As part of my contract, I have created several new slides for the front of the site. Below are just a sample of slides without text. For the slides, I broke my visual rules to make the visuals stand out. This also allows for faster conversion to keep slides current.
Functionality
functionality wordpress
Host Communication
The site uses appropriate Wordpress and Woocommerce hooks to allow for communication to the theme through the backend of wordpress.
functionality discounts
Group Based Discounts
Using plugins, users receive automatic discounts based on their group. I wrote scripts that streamline discounts and displays the icons for each discounted items.
functionality avatar
Custom Avatar System
A custom avatar system was created using javascript, Php and Jquery. Avatars were implemented throughout Wordpress and Woocommerce architecture for blog and shop use.
functionality menu
Custom Shopping Menu
I made a customizable shopping menu on the header of the site. The menu is adjustable through Wordpress and offers a dynamic shopping experience in a responsive layout.
Conclusion
For my first website, I picked up quite the technical challenge. I wasn't sure what to expect when working on an ecommerce website, but I believe this project was a good test of my technical skills as a coder and my ability to create design solutions based on client needs.