Original Blog Homepage

The original design (left: mobile, right: desktop) shown here. You can see a clear need for better hierarchy. For instance, there is no way to completely see what kind of categories of blog posts there are in the blog. Also, the date isn’t shown, making it hard to know how timely a blog post is.

Redesigned Blog Homepage

Here is my redesign of SketchUp’s blog (left: mobile, right: desktop). I didn’t want to reinvent their branding, so I kept their colors and themes, but I did want to make the blog feel like it was more built into the page. So, I did away with the redundant “SketchUp Blog” headers, which in turn, creates two different navigational systems. The top for the SketchUp’s main, global site, and then a simple button system to filter which category of blog posts you would like to see.

I also incorporated more negative space and buffering around the posts which ties the blog header and navigation system together with the posts better. By using a card system design, I was able to take better advantage of the desktop real estate, which also helps better separate and clarify the posts on mobile. I also “chunked” up the typography to increase contrast for legibility and got the dates in to provide better context.

Original Blog Category Page

This slide shows what happens when you select a category or tag of blog post on the original design (left: mobile, right: desktop). As you can see, there is not a clear visual connection between the category you’ve selected and the posts you’re seeing. Also, for some reason, the posts lose their tag identifying what category of post it is which takes away some context.

Redesigned Blog Category Page

Here, in my redesign (left: mobile, right: desktop), you can now clearly see the context of which category of posts you’ve selected. By using a permanent menu system, you can always know what category/type of blog post you have selected and where you are in the context of the blog. The posts also still show their tags, reaffirming your selection.

Original Blog Post Page

Here, you see the original design (left: mobile, right: desktop) of a selected blog post. A few critiques: there’s no “hero image”, the fonts are light and thin, making it hard to read the body copy, there’s no date to the post so you don’t know how recent or relevant it is, and it’s not clear what category of post this falls into. The social/share buttons are small and at the top of the post, before you know if you even want to share the post. See the following slide to see how I addressed these issues.

Redesigned Blog Post Page

This final slide of my redesign showcases what a selected blog post would look like (left: mobile, right: desktop). I brought in the card’s image to become the top “hero image” and then clearly separated the post’s category tag from the post’s title creating a better visual hierarchy. Keeping the post’s author and date metadata at the top provides additional context.

I also increased the buffering around the post to give the copy some breathing room, while also increasing the weight, size and color of the copy, making it more legible on a mobile device. I also moved the social share icons to the bottom of the post, so they are right there at your fingertips when you finish reading the post.