Terminal City Tabletop Convention Website

Tools Used

  • Sketch
  • Photoshop
  • Wordpress
  • Mirrorless Camera

Client

The Terminal City Tabletop Convention

Overview of the Project

I'm a huge board game nerd (Thanks Catan), so when Shannon Lentz the founder of Vancouver’s biggest game board game convention asked if I could do a re-design of his website, I was super excited to say yes. I was tasked with taking the existing content from his old wordpress site and rearranging everything and adding new content into a visually appealing and user-centric experience.

terminal city tabletop

The Wireframe

A few things jumped out at me right away that I knew needed adjusting. The first of which was the main menu, it needed to be simplified. I added two drop down sections and reduced the number of items on the main menu bar. I also felt that having a hero image with a call to action button for ticket sales would be an important addition to help drive sales and be the prominent visual cue on the page. Additionally, I added three additional smaller call to action areas that lead to key areas on the website. Since there was a large amount of sponsors for the event, I added a slider for the sponsor logos and lastly, I added a newsletter sign up form in the footer.

Areas of Focus

terminal city tabletop

The MockUp

One problem that needed to be addressed from the wireframe to the mockup was that the logo has very small type that needs to be legible. In order to accommodate that I centered the logo and increased the size. Another change was that the sheer number of sponsors meant that I wanted to increase the number or sponsor logos visible on the screen at once.

Adjustments for the Mockup

tctc mockup

The Product

A few important changes needed to be made when building the final website. Since I had the basic structure in place, I consulted with Shannon and we decided it would be good to have a countdown timer to the event. Additionally, we decided that a testimonial area would be beneficial and build trust with interested users portraying real opinions of past attendeeds. Since there were a large number of testimonials I have them on a rotating slider.

Another significant change is that I removed the two divs just below the hero area from the mockup and exchanged them for a professionally produced video by Sam Moore and Alexander Kim and created a looping background video for the hero banner which would not play on mobile. Finally I decided to tweak the colour scheme slightly to include the burgundy colour from the logo as an accent colour for the entire site.

tctc mockup