Website Redesign: Dragonsinn (2018)

dragonsinn_redesign

About the Project: A dragon resource website with art and information on dragon culture and history.

Quick Stats:

  • Created in 1999, this was my first experience with SEO and web writing!
  • Highly ranked for search terms like “dragon travel photos,” “dragon poetry,” and “dragon anatomy.” (As of June 2020.)
  • Following a monthly ezine format as of 2021.

Website: Dragonsinn.net

Role: Content Writing, Web Design, SEO

Summary:

Dragonsinn.net was a dragon website I created way back in 1999.

In 2003, the site was rebuilt on Dreamweaver. In 2018, another redesign was embarked upon to finally get the website mobile-friendly via WordPress.

This website was my first foray into web and UX design, along with analytics and SEO.

User Behavior and Stats:

In 2018, the data on Google Analytics showed that most of Dragonsinn’s visitors were in the 18-34 age range.

Since it was almost an equal ratio of female to male visitors, I wanted the look of the website to feel welcoming to both genders.

Google Analytics: User Demographics Overview (Age and Gender)

SEO and Page Speed: 

Page speed is a ranking factor in Google’s mobile-first index, hence it was important to me to optimize the page speed.

Old Problem: The old version of the website had an excellent page speed of < 1 second. However, it looked dated and it was frustrating for me to need to make updates through an FTP server.

New Problem: The new version of the website was initially taking about 5 seconds to load, with 50 plus requests.

Actions Taken: Reduction in WordPress plug-ins to reduce bloat. Gravatar was removed. Some of the coding was customized to reduce the number of external requests. All images were optimized for web.

Result: Cut down page load time to below 2 seconds, and reduced the number of requests to 28. Page speed score increased from low 70’s to 95%.

Performance Score via GTMetrix. PageSpeed was originally rated ‘D’. Now, to look into the YSlow if I have some time…

Site Map and Color/Style Guide:

Problem: The old website had 20+ links in the navigational side bar, as well as the footer. This was cumbersome especially on mobile and tablet devices.

Result: Streamlined organization of the information architecture using child and parent categories.

Site Map for new website page flow. Might use tags instead of categories for sub-pages on the far right.
Dragonsinn.net: Color Palette.

Website Redesign:

Problem: The old website (which hadn’t been updated in years!) was still bringing in visitors, but it was not a friendly experience on mobile devices.

Result: I selected a simple and basic WordPress template to start with, because reliability and speed were the top factors with this redesign.

A plain background was chosen so as to allow the vibrancy of dragon images to take center stage.

Old website versus new website on mobile phone screen.

Updated mobile-friendly website, 2018. With examples of blog header images to create a more visually refreshing experience.

Ongoing Web Analytics

At its peak in the early 2000’s, Dragonsinn.net was bringing in thousands of visitors on a monthly basis.

Traffic dropped in the early 2010’s when Google made an update to how images were displayed in Google Search.

These screenshots from 2018 allow me to see which pages are the most popular, and give me guidance on what to focus on for future content updates.

Google Analytics: Dragonsinn Geography of Visitors (Feb to Sept 2018)
Google Analytics: Dragonsinn Geography of Visitors (Feb to Sept 2018). I am glad that the site continues to have international visitors. I have been brainstorming ways to maintain the site’s appeal on a global level.

Conclusion / Lessons Learned

While it’s an additional step to create blog header images for every post or article, it makes a big difference with visual appeal and how the post looks when shared on social media.

Moving forward, I will be concentrating on moving all of the old pages to the new website so that Google Analytics is fully concentrated on the new site pages.

Other plans include a magazine and/or email newsletter type of approach with more long-form content.