Graphic Designer & Web Developer
09.jpg

Card Kingdom | Website Redesign

This project is a website redesign I did for Card Kingdom while at AAU.

 

Card Kingdom has been selling Magic: The Gathering cards and supplies since 1999. They're known for their lightning-fast domestic and international shipping, exceptional customer service, and passionate support of the Magic community and those who create content for it. They also own and operate two game store/cafes in the Seattle area called Mox Boarding House, which offer in-store pick-up for local Card Kingdom customers.

This project was a redesign for their current website.

The Process

Why This Site?

I felt like this entire website needed a redesign, to me it was quite messy. From it's homepage to the product pages, it's a lot of information that isn't exactly designed the best. The first page that was redesigned is the homepage. There were way better ways to display this type of information that isn't so crazy. The second page I planned to redesign was the Battle Decks page. There is no reason for the decks to have such long descriptions like that on that main page, just to be repeated on the product page. They could easily trim the fat to a one sentence description and clean up the page into just a single grid style layout (I am aware that they allow the user to change how it looks, but this is the default). The third page I planned on redesigning is the actual deck page. This page was a pretty okay page on it's own, but it is missing some pretty crucial information, such as what cards are included in the deck. These are pretty common decks, so that information was easy to find elsewhere.

Card Kingdom Website Flow Chart

Wireframes Round One

The exact page I decided to make a wireframe for was the product index page for the Battle Decks.

Before

After

Changes Made:

  1. The major change I made was that I took out the detailed descriptions from the items themselves. I am moving these detailed descriptions to the actual product page.

  2. I decided that since I took out the descriptions I now had the room to make the images a lot bigger and showcase the product a bit more.

  3. The next change came with the header section of the page. I decided to update a little bit and create a head that would be appealing to the audience. I will use the intro text and an overlayed image to create this section.

  4. I made the decision to rework the navigation bar as well. I feel like I cleaned it up alot. If I were coding this I would end up combining some of the navigation categories, so to show this I took some of the ones off that I would have combined with others. I took the logo and am going to just use their symbol, not the entire site name with it. The last thing I changed within the navigation section is that I changed the search to just a search symbol, and when clicked on it was expand into a typable area where the user can then search.

  5. The final set of changes I made was within the footer. I decided to move the items around. So I kept the three graphics across the top of the section, but then I went into the footer links, then the slogan and social icons. I feel like there is still way to much information in the footer, but I am not totally sure how to go about slimming it down without losing most, if not all of the links.

Moodboards

I ended up creating two different moodboards for how I wanted the final product to look. I have a blue theme and a green theme. I ultimately went with the green theme, but the blue theme was a loved theme as well.

For this moodboard I decided to play off of the blue that Card Kingdom already has going, but I wanted to add to it by adding the yellow. By using the blue and yellow and the geometric shapes I hope to add a modern twist to the site, while still keeping it fun. Both the fonts I picked for this moodboard come from Google Fonts and are easily accessible.

For Moodboard B I decided to play off of the natural feel that the Magic cards themselves give off (as seen in the top left of the board). To do this I want to keep the colors simple and use a lot of white. The examples I included within the moodboard are examples of this, except with plants as opposed to cards. The fonts I picked for this moodboard are all on Typekit and are included with a Creative Cloud subscription.

Wireframes Round Two

Wireframes Round Three

Final Wireframes

The pages I redesigned were once again the home pagebattle decks, and the deck page. I ended up really liking this design and am glad I got pushed away from the blue and yellow I originally wanted to design with. I think that my redesign is not only more organized, but speaks for the game of Magic better.