Blog and Website Design
Responsive UI Design
01
Project Overview
An existing blog with e-commerce products had an outdated look and had become rather clunky with slow load times and broken links. The goal was to give it an overhaul with a new, responsive design, reorganize the content, and clean up the clutter.
The Problem
An existing blog had become outdated. The UI didn’t have a modern appeal, images and pages were experiencing slow load times, and there were broken links. Users were following articles to posts and quickly leaving due to the poor load time. More 404 errors were being seen in the website logs.
The Goal
Improve the length of time and page views of users arriving on the site, hopefully leading to increased sign-ups for free offers and/or sales of products offered on the website.
The Team
I worked directly with the blog owner, who gave me a written outline of page contents and some examples of similar websites/blogs they liked.
My Role
I was the sole designer and developer for the website redevelopment. It existed on a WordPress platform with the Highend theme.
02
Wireframes
With only a loose written outline, I needed to wireframe the new website to determine pictures, sizes, and grasp the information architecture as the menu and navigation needed a serious update.
Low Fidelity Wireframe
03
Brand Guide
The website didn’t have a brand guide to standardize color and font usage. With an established logo, I selected website colors based on it and elements of the existing website.
From cover design work, I knew Cinzel was a popular fantasy font. The plain version was selected as the primary font for important descriptions and most titles. Raleway was selected for blog posts. The sketch font Frederika the Great was used for some stand-out titles and headlines.
With a strong fantasy and writing theme, stock photography was purchased from Shutterstock to provide high resolution images.
Logo
Brand Colors
04
Development
The previous website was built on WordPress using the Highend theme. I created the new website using Divi as the WordPress theme, taking advantage of this powerful theme and its multiple options.
Usually, I re-build websites with a staging website. However, with the website experiencing a lull in traffic due to early holidays (and the previous design), the decision was made to move the website to Under Construction status for the week it took to redesign it, which kept the project straightforward.
Updating Features
Divi offers a sticky menu feature for websites viewed on laptops. I added to this with a transition from a white menu and full color logo to a dark purple sticky menu with a white logo and menu options, which kept the visuals fun and refreshing for users.
With Divi, templates can be built so that all future posts, pages, or WooCommerce items are formatted automatically. I created templates for blog posts and specific WooCommerce categories as the website sold courses and ebooks using off-site platforms to complete and fulfill purchases.
Responsive Design
Divi is a powerful theme that comes with an editable view of a computer screen, tablet, and phone, allowing design changes based on each device. This made construction of a responsive website flow easy.
Sticky Menu
Templates Created
Blog Template & Post
Responsive Design
Website Speed Through
05
Launch & Results
The new website was launched in early December 2020 after being down for a little over a week.
%
Increase in Visitors (first year)
%
Increase in Referrers
Average Views per Vistor
Visiting Countries
06
Lessons Learned
This was my third time using the Divi theme and while I thought I had a good grasp of it, boy, I learned a lot more on this website. This is the first time I utilized template design for posts, pages, and categories, which is a great feature and I’ve used several times since.