Pokemon TCG Online Redesign: Case Study
About
Pokemon Trading Card Game Online (PTCGO) released in 2011 as a free-to-play extension of its original paper-based counterpart. Compared to other major TCGs like Magic the Gathering and Yu-Gi-Oh!, PTCGO is a much simpler, straightforward, and accessible game primarily geared towards younger players. Although other digital TCGs feel more fleshed out by incorporating various types of cosmetic options, PTCGO facilitates a true-to-form, albeit basic, method of experiencing the game.
Purpose
The aim of this redesign is to modernize PTCGO based on standards set by its competitors (e.g. Hearthstone, Magic Arena, and Legends of Runeterra). Specifically, I’d like to update the main UI and streamline the main information architecture to provide a better overall UX.
The scope of this project will be limited to the “Home” section of PTCGO, and as a solo project, this implies a few limitations:
- Comprehensive Research: Without ready access to official data or a randomly selected pool of existing players, the design decisions made here won’t necessarily convert to the actual product. All design decisions for this redesign concept would be based around personal observations and discussions from online forums like Reddit.
- Visual Assets: Some assets from the original client were unobtainable, therefore I opted to use a combination of new assets and assets from other titles in the franchise.
Despite these limitations, the core goal of this project is to exemplify key areas where the official client can improve upon and to demonstrate how it could be visualized.
Current Information Architecture
Before I set out to structure my redesign proposal, I wanted to identify key areas where a redesign would be benefitial rather than harmful. As far as organization is concerned, I believe that each child element matches the main parent category, but there are a few sections of information that I believe would be better as a universal overlay or as a fixture within the “Home” section.
A section that can be used as a universal overlay would be accessible regardless of the page or section a user is currently viewing. While “Settings” and “Social” are currently the main overlayable components, converting the “Profile” section into a universal overlay would give users the ability to view key pieces of information like challenges without having to leave the play mode selection screen. This type of approach can be seen with Legends of Runeterra.
In contrast, displaying some sections as a “Home” fixture would provide key pieces of information without the need for user interactions. Challenges, in this instance, would be presented to the user at the “Home” screen, therefore allowing them to see tasks that they’d like to tackle without having to navigate or open a separate section. This approach was implemented with Magic Arena.
While considering how best to streamline the current information architecture, I opted to use elements of both approaches. This can be achieved with a bottom navigation bar that houses certain related elements, which would also open up more whitespace in the top navigation. The IA for the proposed concept would be visualized as follows:
This main revision here is the changes made to the “Social” overlay and the “Profile” section. The new structure takes cues from common social media practices (e.g. having notification alerts show up underneath a profile picture), as well as standards set by competing games (e.g. having Challenges visible without needing to navigate to a new page).
Wireframes
Three wireframes were constructed to map out the placement of each element. The top navigation bar was structured fairly similarly as the original with the main changes being a left-aligned logo, downsizing button options for 4 to 3, and trading the Settings icon for a more commonly used menu icon.
The bottom bar is the most drastic change as it contains a dedicated button for social interactions, a horizontal list of available challenges, the daily gift box, and the user’s profile picture. Pressing either the Settings or Profile picture icons would bring up their respective overlays, with the former being based on the existing organizational structure while the latter takes cues from popular social media platforms.
Prototyping
Having finished the wireframes, I set out to render the prototype. The main colors were lifted directly from a screenshot of the official version, but rather than the layered shading of the original, I opted for a more smoother gradient finish. There were some elements where I had to use placeholders as the assets were not readily available (the tickets icon, daily gift box, profile picture, and icons for each of the main navigation buttons), but structurally, the redesigned “Home” page was more informative and incorporating a bottom bar helped to include more elements within the span of a single page.
Final Thoughts
Overall, this redesign demonstrates how some elements of the existing PTCGO UI could be improved, which would in turn enhance some of the overall UX. While I acknowledge that my aesthetic skills could use a bit more work, I’m confident in how I’ve optimized the core information architecture so that key pieces of information (e.g. challenge tasks) are presented to the player much more readily or through fewer loading transitions (e.g. profile options).
PTCGO has the potential to expand the core PTCG experience to an accessible, free-to-play format, but in its current state, it doesn’t do much beyond the basics. With games like Hearthstone, Magic Arena, and Legends of Runeterra defining good practices within the digital card game space, PTCGO is falling behind with a dated UI and a barebones UX. The game itself has a large amount of potential due to its ties with an extremely popular franchise, but there are still some clear areas of improvement that my proposed redesign would address, and with proper feedback and testing, PTCGO could evolve into something greater.
