Cardstock Warriors

Cardstock Warriors

User Experience + Branding + Design

Problem

Design a retail site for a new tabletop game, Cardstock Warriors. It should have information about the game, rules, and an e-shop to purchase the miniatures.

InVision Prototype

Research

To begin designing Cardstock Warriors, the first thing I did was interview the creator of the game. He had been an avid tabletop gamer for many years, but was getting frustrated with the cost of the miniatures. He decided to come up with a tabletop game but instead of metal or plastic figures, it is made out of paper that you can download and print on your home printer and assemble the pieces to build your own army at a fraction of the cost. I had already started working with him on the design of the site but after a successful Kickstarter campaign, he was ready to begin on the actual building of the website.

I had created a survey to find out what types of people would be playing the game. Some users were backers of the Kickstarter campaign as well. In addition to the survey, I also interviewed a couple of users for more indepth feedback.

Branding and Identity

After the research phase it was time to design a logo and decide on colors. Since the figures are handdrawn and whimsical, I wanted site to have the same feel with the colors and logo but kept the typography minimal so that it would be easy to read.
I drew the sword in Illustrator and wanted the “Cardstock” to have sort of a cardboard feel, which is why I chose the greyish-brown color. I chose the orange as the accent color because I wanted it to pop against the primary colors used in the site.

I decided to use purple for the main color because it has been used by royalty for thousands of years and I thought about warriors fight for kings and queens. The text I just chose a dark gray so it would not interfere with the accent colors. The blue and orange came directly from the miniatures.

Design

Before I started actually designing the site, I created User Flows to find out what was the best way to move between the home page and each additional page including the e-shop.

With branding and reseach complete and User Flows created, I was ready to start designing. In Basalmiq, I created low-fidelity wireframes. Some requirements for the site were a Home page, an FAQ, Tutorials and Rules on how to play the game and a link to the e-shop, which I also designed.

Once I was happy with what I had planned out, I moved to Photoshop to begin designing my mockups. This is the part I really enjoy. Even after all the research, color choices, branding and even the wireframes, it is hard to tell what the website will actually look like. With the mockups, you can get a sense of where the design is going. Even though I had created the mockups, there were a few changes that I made in the final design that worked a little better.

Usability Testing

Once all of the design mockups were completed, I used InVisionapp.com to create a prototype to make sure the design worked as intended. I submitted the finished prototype to peek.usertesting.com for user testing. This was helpful to see how real people would interact with the site and if I needed to make any adjustments. Overall, the users loved the color scheme and the site had a very nice appearance. I think the main issue was that some of the users did not realize they were paper miniatures that you downloaded but they knew it was a gaming site.

Conclusion and Reflection

The final design was giving to the creator of the game. He built the final site. In the end, my color scheme was not used. I also suggested that we add a “how to” section on the home page, which would feature icons that go through each step to build the warriors, but we have not implemented that section yet.