Contributors
Stephan Church - Web Design / Artist / Animator / Coding
David Klingler - JS/Php Troubleshooting
Timeframe
May 2021 - June 2022
Programs/Software
InDesign | Illustrator | Local | Photoshop | Visual Studio Code | Woocommerce | Wordpress | XD
TCA Gaming LLC was my first client when I started this business. 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. Most of the art was created by me using Photoshop and Illustrator.
Website Design
Introduction
The website was created to capture nostalgia using traditional design trends. The container was made more tight
to add intrigue 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.
Compatibility
The website is fully responsive, working on all operating systems and screen sizes. The shopping experience on mobile is modified to
expedite the shopping process compared to the more exploratory design used for desktop screens. Below images showcase how the site runs on mobile devices.
Visual Design
Introduction
Based on an already established IP, I already had an established design language to work with.
TCA is hyper focused on the nostalgia of the IP 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 when creating 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.
I created the avatars with the Sugimori art style in mind.
Adverts/Banners
As part of my maintenance contract, I offer one new slide for the front of the site.
Below are just a sample of a few of the slides without text. For some of the products, I break my visual rules to
make the visuals stand out. This also allows for faster conversion to keep slides current.
Functionality
Host Communication
The site uses appropriate Wordpress and Woocommerce hooks to allow for communication to the theme
through the backend of wordpress. I conduct regular maintenance to ensure site maintains continuity.
Group Based Discounts
Using plugins, users receive automatic discounts based on their group. I wrote scripts that streamline discounts
and displays the icons for discounted items.
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.
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.
I currently still maintain and provide additional work for this client.