I joined DK as they began exploring a redesign of their main site, DK.com. They hired Wilson Fletcher, a top London design agency to get the redesign underway and I started approximately 2 weeks into the process, working very closely with them.

Once Wilson Fletcher's great work was complete, I became solely responsible for the UI and UX design, growing the site through understanding user needs and behaviours and A/B testing.

Affiliate click conversion rates increased by 30% after the redesign

That was at the 3 month period after launch. Since then, it has continued to steadily grow as we work towards the goal of inspiring visitors to buy and read DK's books.

Here’s how we did it:

The first thing we did was analyse what was wrong with the current (now old) design and address it in the redesign. One of the biggest issues we came across were visitors we’re confused by the main navigation menu options.

Improving the Navigation

The menu previously consisted of:

  • Books: A mega dropdown containing a list of all categories.
  • Brands: All the brands DK own or have created books for.
  • Explore: Articles, quizzes, interviews and competitions.
  • The clickthrough rate to category pages was very low, meaning users weren’t really using the drop down menu.
    • DK is mainly known for their excellent travel guides and their children’s and reference books. With the lack of dropdown use, users weren’t discovering the wide range of subjects available to them.
  • User testing showed us people weren’t sure exactly what “Explore” was. The name confused them and data backed that up, with barely anyone using it.
  • “Brands” was also poorly used. DK's users just don’t browse this way. For those looking for a specific brand (such as Star Wars or LEGO), they simply use the search feature.

Solution: Expose the categories to enable immediate navigation to key categories and also present a wider range of topics DK cover.

We used data to pick the most popular categories to display. As there is limited space available, the goal is to help as many of our users as possible.

Testers of the new design were pleasantly surprised by the number of categories when they saw more of them immediately.

The new navigation design increased clicks from the homepage to a category page by more than 11 times

Visitors were exploring our wide range of books in a way they weren't before and that's great for DK.

A Better Starting Point

As we know users will browse to categories more when we expose them in the navigation, we're testing displaying all the categories on the homepage, complete with the category icons to see if this helps users get to where they want to go faster.

This is the full range of top-level categories and is one of the first things a visitor sees when landing on the homepage, which will certainly demonstrate the breadth of books available.

Category Specific Navigation

I’ve taken the concept of exposing navigation further by exposing category specific navigation on relevant pages. These options can be reached via a "Browse" button on the category page which brings up a menu but category specific navigation deserve greater importance.

70% of users browsing for Children’s items on Amazon browse by age. As soon as we discovered this, I put the age range selections front and center with an appropriately playful and colourful design (using our brand colours), giving users the opportunity to browse by age without having to hunt around for them. They're just there for them to use immediately.

The same thinking is being applied to the travel category too. DK are known for their strong photography "cutouts", so as you may have noticed, I'm using them prominently across the site in the new design to give it that classic DK "feel".

(Concept only. Images not final.)

Seeing is Believing

There's nothing like holding a DK book in your hand to really appreciate the quality of it. One of the first things I noticed about DK's website is there aren't any photos or videos of the actual books, which is the next best thing. We needed to show off just how amazing our books are. Gloss finishes, die cutting, embossing, spot UV, foil and more need to be proudly displayed so visitors can get an idea of the quality, as well as the sizes of the books.

Some of their books are huge but you wouldn't know it from the website unless you take the time to look at the dimensions. Look at The Flower Book for example!

And a close up to show off the fantastic embossed foil detail in the title:

We were in the process of figuring out the best way to photograph (and video) books to use on the website. In the meantime, we started with a very basic first run with the amazing new travel books:

Carousel to Nowhere

I know from past experience that homepage image carousels perform poorly. Like many other websites DK had a standard carousel on their old site with marketing images barely anyone interacted with. We carried it over to the new site, safe in the knowledge we could prove, with data, that we should replace it with something more useful.

What you see in the first image of the case study is the replacement. A nice big banner showing books and telling users exactly who we are and what we do. Gone is the confusion we found from user testing, where people were confusing us with a LEGO manufacturer because a large LEGO banner almost took up their entire screen.

DK were a fantastic company to work with. Their commitment to great design in their books is inspiring and I enjoy trying to bring that into the digital world.