Critical Reflection

Final Project

For my final project, I chose to do a speculative redesign of Suzanne Collins’s official website using WordPress. I chose to do this project because I knew I wanted to redesign an existing site, and I felt WordPress had the most features for me to redesign and make it look how I wanted to. For my previous WordPress project, I feel as if I didn’t use it to its full capability, and I wanted to continue to enhance my skills. My goal for this speculative redesign is to create a more visually appealing user experience. For a cool author, Suzanne Collins has a really bad website. The content has no real layout or organization, the typography and colors feel outdated, and it looks as if things were just put there without any real purpose.

This is Suzanne’s homepage, where it feels very cluttered. There’s a column on the left with a welcome blurb, the middle column has content related to her most recent work but it’s just a long list of all its awards and reviews with no structure, and the right column has reviews for all of her works.

I used the theme Vermeer by Anders Norén, which was a challenge that I will dive into later. For the homepage redesign, I wanted to focus on a clean and cohesive layout. The title has an animation that continuously moves across the screen. I included a short synopsis on who Suzanne Collins is, in case someone didn’t know when they found the website, and three quick page links to her works, biography, and news. There is a pattern of “#1 New York Bestseller” and “#1 USA Today,” along with many other honors that are displayed throughout the website. Because I still wanted to add key points of her content from her site, I included those two honors on the homepage at the bottom. I also included a site logo I made on Canva because I feel every author should have one of those.

This is her works page, where she has all of her publications listed and linked to their own separate page. It is simple and basic, and dare I say boring? She doesn’t have her most recent work listed. Granted, it is on the homepage, but all the content is just laid out there – again, with no real structure or purpose.

I displayed an announcement of her newest release since it came out not too long ago, and I have it linked to the post about the book. I had an idea for the works page to look as if the books were sitting on a bookshelf. I wasn’t sure how to tackle this, but I tried finding plugins that would let me place images on top of one another or something similar to that concept. WordPress has great features, but sometimes it isn’t always reliable with your big goals. I couldn’t figure it out, so I went to Canva and made each book look as if it were sitting on its own shelf. I did this for each of her books and organized them all in their own category: The Hunger Games, The Underland Chronicles, and Children’s. I’m really happy with how this turned out, even if it isn’t exactly what I had in mind.

I also worked with adding animations to all of my blocks. I used the plugin, Gutenberg Block Animations, and I added fade in effects as well as typing animations to my headers. I never realized how important animations can be to make your website feel more alive instead of stale text. I was nervous my black background and white text would look a little boring, but with the animations and bookshelves I added, I think it looks great.

This is her page layout for each of her books. There isn’t a link to purchase, or any details about the book besides the various reviews and lengthy awards list.

The book pages are where I wanted to add more fun elements that I felt Suzanne is kind of missing. Each book page is a bit different than another because the different books had to have different information. I embedded YouTube videos for the books that had film adaptations, so the movie trailer was linked to view. I added Spotify playlists of the movie soundtracks, and I used a plugin where I could add a star rating, which reflects actual ratings I found on GoodReads. I did posts for all of her books, and I tried to make each of them a little different but still have a consistent look. I included a buy button that takes you to the product listing on Amazon in a separate tab. I also included at most 4 book reviews because there were many posted on her website. It still felt important to include, but I laid it out in a visually appealing way.

The biography page on Suzanne’s website is very long with large paragraphs and includes unnecessary information. The layout is a picture of her and then text all the way down the page. I designed the biography page to include sections about her personal life and her career, highlighting key information. I added an image gallery of her using a plugin I found, where you can click on each image and it allows you to zoom in or slide between each one. I highlighted a few of her awards at the bottom of the page. My goal for this page was to focus on the layout and content organization. At first, I had all the content on her website, but then I realized how long it was. I didn’t want to read it, so I knew others wouldn’t want to either.

The news page is my own addition. Suzanne’s last page on her site is ‘interview,’ which is exactly how it sounds—a page about an old interview she had with Scholastic Press about her first book series, The Underland Chronicles. It was quite outdated, so I decided to make a current news and bonus content page. I’ve listed various articles about Suzanne Collins and/or her work, with the link to visit each one. I also decided to keep the interview, but as a separate post I linked on the page. I felt it should still be included because Suzanne doesn’t have many interviews, especially around her first book series because the Hunger Games is mainly what she’s known for. I decided to link The Underland Chronicles series to the interview post, so users could read more about it and understand the interview.

Challenges

The theme was my greatest obstacle throughout this entire process. While it is full site editing and had the elements I was looking for, it was not the easiest to work with in terms of its templates and styles. My favorite feature is the moving site title across the top of the page; however, the color was set on the theme’s CSS – something I could not fix. The color was inverted to the style you picked, and it would appear almost x-ray like across the image of Suzanne. If you ever chose the inverted setting your iPhone, that’s what it looked like. I tried using my own additional CSS and the inspect tool to see if I could change it on my end, but nothing worked. I still didn’t figure it out, but instead, I found a color that matched my website and fixed the x-ray issue.

I realized how important templates and patterns are throughout full site editing. I wanted to give each of my pages a specific look in regards to the navigation bar and headers. However, every time I’d try to edit the page template header, it would end up changing the home page header as well. And of course, I wouldn’t notice until much later. It grew tedious having to go back and try to restore the original header on my home page, especially because it’s so specific to the theme. This is where I discovered the beauty of specific page templates. I created a page template for each page with its own unique header, bolding the page link of the current page.

WordPress has a lot of great features, but it’s not easy to place your content exactly where you want to, especially when your theme has default margins and padding. The images were the biggest pain to work with in terms of cropping and spacing. Every time I placed my blocks, it would default to being as wide as the screen will go. So it became something I had to be consciously aware of the more content I added throughout the site. I began getting in the habit of playing with columns and groups to adjust margin and padding accordingly, more than I had in my previous project. I most likely could’ve adjusted the default settings in my theme, but I didn’t want it applied to every block.

Final Thoughts

I am very happy with how my website turned out, especially using WordPress. I almost find WordPress a bit more challenging than Bootstrap, relative to some components, but I feel like I was able to really enhance my skills by doing this redesign. I’m proud of how I prioritized the functionality/user experience as much as the visuals and aesthetic. My goal was to dive deeper into customizing themes and making the most out of plugins, and I feel like I achieved these goals. I feel as if I’m much more familiar with how to use WordPress, and I can create more efficiently. I believe I’ve gained an applicable skill set through not only this project but throughout this course overall. I’ve loved learning Web Development and I’m confident that I’ll apply these acquired skills in the future.