Case Study: Dorling Kindersley
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".
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.
Case Study: SecretSales
SecretSales had an outdated website, so as the only designer, I worked closely with the product manager to overhaul the entire design, visually as well as improving the UX. I worked for them as a full-time designer for 18 months and I now work with them as a consultant.
Increasing Registrations
SecretSales is a private shopping club and although membership is free, you are required to register in order to enter the site. This provides a challenge in converting visitors into members. We noticed immediately that the initial form was just too long and our research confirmed our thoughts that it was not converting as well as we knew it could be.
Initially we couldn’t convince the marketing team to remove unnecessary fields such as DOB and Post Code from the registration form so we had to work around that issue as best we could.
The first step we took was to split the form into multiple steps to make it look less intimidating. Research shows that breaking a form into smaller chunks makes it less intimidating and therefore easier to get started. In addition to that, psychology studies show people are more likely to complete a task they've already started.
The registration conversion rate increased by 30% as a result
Style Guide
During the time I was a full-time employee for SecretSales, I noticed there was a need to help the front-end developers due to the amount of work they had to do. I worked closely with them to create a style guide, to improve the consistency of the brand across the entire website.
(Click/tap on the image above to see the full style guide)
It was also useful to the company as a whole, as they could make changes by using the style guide, without having to hire another designer for smaller pieces of work. It gives them more flexibility, reduces costs and takes less time, all while keeping the design consistency across the entire website. See the full style guide (977KB JPG).
Filter Improvements
81/100 on the System Usability Scale (SUS)
System Usability Scale is an industry standard way to measure the usability of a design based on a questionnaire given to users. It consists of 10 statements with five response levels of ranging from "Strongly agree" to "Strongly disagree".
A score out of a maximum of 100 is calculated from the results. The average SUS score is 68. SecretSales is well above average with an A grade score of 81 which puts it in the the top 10% of scores. I'm proud to have contributed to that achievement using my design knowledge.
"Tom doesn’t cut corners"
"Tom was the catalyst in changing the way we approached web-design, specifically moving to responsive-design a full 6 months before the movement emerged in the wider industry. He tackles challenges by future-proofing UX.
"I appreciate the standard he has set internally with delivering pages that work effectively.
"Tom is reliable, straight-forward and keen to understand the nuances of the business in order to develop relevant work. He doesn’t cut corners. I would and have recommended Tom because I know he delivers to a high standard."
Nish Kukadia CEO, SECRETSALES.com
User Feedback
We made sure to constantly collect user feedback, so we could see what we were doing well and what could be improved based on actual experiences. Here are just a few of the many positive comments we received:
“Excellent site with ordering system made extremely simple. Will continue to purchase from this site.”
“The shopping experience with secretsales went well. A very good site. Well done.”
“Perfect shopping experience, website is very easy to use.”
“I made my purchased and checkout within 5 minutes, it was very quick and efficient very good service i will be most likely use your services again thank you very much”
"Great experience. Website is easy to use and checkout is efficient. First time ordering and will definitely be doing so again.”
"Easy to order, good pictures, easy to navigate website and payment very easy. I would definitely return, thanks”
"Very easy too use, well laid out clear presentation payment pages were also clear and easy to use”
"It was a really good experience. Alot better than other similar sites”
"Your shopping experience is very simple, quick and easy. Especially processing the actual card payment at the end which makes such a difference especially when you are trying to slip a sneaky purchase in while you are supposed to be working!"
"Im going to be in my wifes good books forever....so amazed at how seemless the mobile site was…”
"I find this a very very easy website to use and i have had quite a few purchases from Secret sales, its one of my favourite sites"
Case Study: Learn from Great Design
Teaching other designers has been a passion of mine for a number of years on my blog. Over 13,500 designers are subscribed to my email newsletter and in 2014, I wrote a book called Learn from Design: Volume 1, which has gone on to generate thousands of dollars worth of sales.
The main benefits of the book are:
- Understand the final results of many great design details coming together
- Make more informed design decisions
- Improve your eye for great design
- Communicate design decisions with more confidence
The ebook is available here.
"Valuable information in every case study"
"Learn from Great Design has been the catalyst for improving from my eye for design. Tom was detailed and provided valuable information in every case study. I loved that he took on the challenge to study big companies like AirBnb. This book was a God-send.
This book has been the main resource that has helped me improve the design of my own website. There is nothing like it on the market!
I highly recommend this book for UX/UI Designers and Front End devs. It is visual, practical, engaging, and full of tips to help anyone detect great design or create it themselves. This is a book I will revisit time and time again! It is THAT good!"
Camille L. UI/UX Designer
My Design Writing
I've been running my design blog since 2009, when I launched it under the name Inspect Element. It now lives here on tomkenny.design. Initially, I started it to improve my writing but it has become a key part of my web design learning. I teach everything I learn, helping me to reinforce my knowledge and build upon it.
My design newsletter has over 14,500 email subscribers
Since then, it has achieved a good deal of success. I've written for and been featured in some of the biggest web design and development websites, such as Smashing Magazine, WebDesigner Depot, Creative Bloq and Treehouse.
It has also been the platform that has allowed me to successfully sell products. Prior to the success of Learn from Great Design, I used to sell WordPress Themes, generating over five figures of revenue.
The free versions of my WordPress themes were downloaded 48,657 times
Case Study: Sky Sports
I was the only designer on a team responsible for designing a service called Grabyo Studio. It was used by Sky Sports to perform extra promotion on transfer deadline day, one of the busiest days in the football calendar. The app allowed Sky Sports to very easily "grab" sections of live TV and share them across multiple Twitter and Facebook accounts.
The Sky Sports News team were able to easily select portions of the Sky Sports News coverage and share it with their followers on Twitter and Facebook through the use of an online web app. I designed it to be easy to use and it certainly helped Sky Sports as they attracted over 500,000 views.
Sky Sports attracted over 500,000 views in just one day with Grabyo
Grabyo has gone on to be used by other brands, such as Wimbledon, UEFA Champions League, BT Sport, La Liga, the England national football team, and more.
High Praise from Wimbledon
"The ease with which Grabyo Studio allowed us to create social videos as part of our content offering and distribute them to our global digital audience was very impressive."
Alexandra Willis Head of Communications, Content & Digital, The All England Lawn Tennis Club (Championships) Limited
Case Study: TUI Travel
Flexible Flights
Flexible Flights desperately required a site in order for their booking agents to efficiently book flights for their customers. They wanted a world-class designed website optimised for usability so that the agents could get the most out of it.
I designed the logo you see above, placing a plane icon in place of the 'x' to try and capture the same sort of feeling FedEx created with their 'invisible' arrow in their logo. I felt it would be memorable once people noticed it as it was unique and interesting but unfortunately they went with a generic globe icon, "designed" by another designer, which doesn't make it stand out from the crowd. They played it too safe in my opinion.
Austravel
Austravel specialises in holidays and flights in the Australia and New Zealand. I had the opportunity to redesign their entire website from scratch. My goal was to create something inspiring and adventurous, to mimick the style of holidays we were offering.
Below, you can see the progress tracker design for Austravel. I spent so much time researching and designing progress trackers across multiple TUI Travel brands, I even wrote an article about them for Smashing Magazine: Progress Trackers in Web Design: Examples and Best Practices.
The destination pages were presented in a very visual way to aid usability. Here you can see the example of Australia and how the different territories are divided on the map. I also included secondary information below to add extra information about each territory.
Meon Villas
I also redesigned Meon Villas as one of my first tasks when I joined TUI Travel, using a combination of strong blues to represent the sea and sky and terracotta inspired by roof tiles some of the villas on offer.
