SketchBook Blog

UI/UX Design   •   Wordpress Development

 
 

Autodesk SketchBook

Autodesk SketchBook is a powerful digital sketching application used by over 200k artists across the world. One of the main marketing platforms for SketchBook is the SketchBook Blog where several posts are published per week with topics including tutorials, videos, artist showcases, and weekly free brush downloads.

It had been several years since the blog was updated, and the SketchBook team wanted to explore a redesign that produced greater user engagement with not only new posts, but older posts as well. I worked to redesign the blog from the ground up, and then created a custom Wordpress theme based on my designs. Since the redesign, total traffic to the blog has doubled and the number of page visits per session went from 1-2 to 4-5 per user.

To view the blog, visit www.sketchbook.com/blog

 
blog1.png

The more [posts], the merrier.

One major reason for this redesign was to make our content more approachable and accessible. But this didn't just mean making the most recent posts stand out more, this meant giving old content just as much opportunity to be consumed as the newest content.

The old blog layout was a single column, full post layout in which our users had to scroll through the entirety of one article to get to the next. While the intent behind this design was good (allowing readers to continue onto another article once finished with their current one), it didn't really work well and ended up being a pain just to get through a couple posts. This issue was only made worse by the lengthier blog posts like step-by-step tutorials.

To remedy this, we opted for a carousel combined with a grid-style layout which allowed us to display way more posts in a much smaller amount of screen real-estate. The carousel at the top highlighted the 3 most recent posts, but without sacrificing the visibility of any older posts.

 
blog2.png

Read on, reader. Read on.

As I mentioned before, the old blog design was on the right track in trying to encourage further reading once a user reached the end of a post. With this redesign, we wanted to turn this good idea gone bad into something effective.

The first thing we did was incorporate a sidebar into every post. With a little PHP, I configured the sidebar to find and show posts with similar tags to the one the user was currently viewing. That way, each post would contain links to more posts that the user might find interesting. I will admit that, at first, I was very hesitant to include a sidebar in the posts. In my mind, a sidebar just screamed "AMATEUR WORDPRESS BLOG", which wasn't exactly what we were going for... However, I was eventually able to set my opinions aside for the sake of giving our readers a better experience. 

I still prefer the look of a blog post sans-sidebar, but it's hard to argue against the increase in page views per session that we've seen as a result of the design choices.

blog3.png

The final thing to do was to give our readers a painless transition into their next reading experience once they reached the end of an article. We did this by essentially mirroring the homepage grid at the bottom of each post. This gave readers instant access to past 15 or so articles without having to go back to the homepage or click any links.

 

Design for results, not for glory.

A look at the blog traffic since the redesign - Redesign launched late October

A look at the blog traffic since the redesign - Redesign launched late October

Would each post look better without a sidebar? Maybe, but that's not what's important about this project. What's important is that we nearly tripled our page views after the redesign, and saw continuous growth beyond that point. By restructuring the layout of our homepage, and adding more ways for users to access additional content from within a post, we are now able to deliver more content to our users than ever before. This was an important lesson for me to understand how much of a difference an improvement in function can make, along with an improvement in aesthetics. Even if the function doesn't look as nice as you would have hoped.