The Rook & Pawn
CASE STUDY
Speculative re-design of The Rook & Pawn website built with WordPress
SKILLS: HTML, CSS, WordPress, Canva
DATE: Spring 2024
OVERVIEW
I was tasked to choose a pre-existing site and reorganize the content, add new features, update the visual design, and make informed choices that improve the user experience. I decided to update the website of a local cafe in Athens called The Rook & Pawn.
MASTERING
THE PROCESS
The Challenge
I had a hard time striking a balance between incorporating elements from the old Rook and Pawn website and creating my own elements that improved the quality of the new website. I didn’t want to deviate too far from the initial layout of the website because I wanted to maintain the look and feel of the original site, but I also wanted to change a lot of things on the original site that may be irrelevant for users navigating the site (e.g. the thank yous on the about page). Because I intend to share this project with the Rook and Pawn owners in the near future as a potential replacement for the original site, I felt pressured to try to incorporate all of the content present on the old site. This proved to be rather tedious, especially for pages like the Games page which listed hundreds of games. Even though it took me a while, I was eventually able to adapt most of the content from the original site onto my new site.
The Solution
I’m proud that I was able to make a website for The Rook and Pawn that is more user-friendly than the old site. A lot of the pages on the original Rook and Pawn website used a font that was small and hard to read. Furthermore, the original site didn’t have many visual elements, such as pictures and videos, or interactive elements, such as buttons and sliders. In my speculative re-design, I changed the font for paragraphs and made it bigger so it was more legible. I used the plugin Spectra to add info boxes and sliders to break up large chunks of content and incorporate more images. This made my website more visually appealing with more digestible amounts of information. I integrated the chess theme throughout the website, including chess icons, GIFS, and images wherever I could. One of my favorite website elements is the GIF cover of a chess game on the home page with the animated Rook and Pawn logo, which I made on Canva. I made sure the website was cohesive as a whole and that it gave a narrative of The Rook and Pawn business and its values.
Animated logo for The Rook & Pawn
THE RESULTS
I learned the ins and outs of WordPress and full-site editing. This included adding subpages that can be linked to a parent page and be included in dropdown navigation lists. I was able to master WordPress block editing to efficiently create large amounts of content. I learned how to maximize the Spectra plugin for adding and customizing blocks such as info boxes, sliders, and images. I also learned how to embed Yelp removes by copying the embed code on Yelp for an individual review and pasting the code in an HTML block on WordPress. Furthermore, I learned how to create forms using WPForms and add them to WordPress pages. Most importantly, I learned to take a pre-existing website, determine what story is being conveyed, and translate that into a new and improved version of that site. This includes determining the most efficient method for reaching the audience the website is catering its content to (e.g. college students, families, etc.).
I learned how to manipulate a WordPress template to reach my desired outcome. I wanted the process of building The Rook and Pawn website to be generative in that I was manipulating the template to reach my desired outcome. I think that even though a more complicated template can make things easier, it can sometimes box you in and limit creativity. For this reason, I chose a very simple template which I knew I could mold into the website I wanted from the ground up. Even though this was more work, the result was more gratifying in that the finished website reflected more of myself.