kumonbooks.com Redesign

Overview

This was a fun, challenging project, working with a beloved brand. The website needed to be updated visually and functionally without changing the way the checkout process had already been set up. Through some software upgrades and updating the look and feel of the site, we’ve taken this website into the present day and set it up for success and growth in the future.

The Context and Challenge

Kumon’s website had been created quite a while ago and had not really been updated for some time. Because of this, the search function did not work well and the site loaded slowly.
Aesthetically, the site looked dated (right) and didn’t reflect the spirit of the Kumon brand, which is well-known and beloved by both parents and educators.
The site didn’t easily allow for the addition of video assets and other materials to aid in the sales process.
The site was using outdated software that is no longer supported by its developers, making troubleshooting very challenging when issues arose. The age of the website was the root cause of these issues.

Project Goals and Objectives

-Design a website that is visually more aligned with current standards, and the Kumon brand.
-Reflect the love that customers have for this brand.
-Improve the ability to share materials and videos related to the project.
-Continue checkout via Amazon
-Make website mobile-friendly
-Improve loading speed of website
-Improve search functionality
kumonbooks.com shop page before updates

The Process and Insight

Kumon expressed the concerns above, and also provided examples of websites that showed their likes and dislikes.
Kumon’s parent company provided a style guide including fonts and colors that they created for their website. I was not permitted to use this guide exactly, but referenced it closely for the design of their website so there would be a common thread across the two sites.
Kumon provided their own images for use on the site, and I sourced some free images as well.
Kumon was also eager to gather information via a customer survey. We wanted this to be prominent on the page, but also not distract from the rest of the page, so we placed it as a small header above the menu that clicks into the survey.
The menu structure is pretty straightforward. It is bolder and simpler than the menus that were on the previous site.
In conversation with other parents, whenever I mention the name Kumon, I hear “Oh! I LOVE Kumon!”. I wanted to play on this reaction. I initially designed a header image that would include customer testimonials as the main graphic. The concept was the quotes would be varying sizes and animate across the screen, as “voices” of parents familiar with the brand. The intention was to build trust with a new visitor, and camaraderie with returning customers. The concept was rejected, so I instead created a collage of those quotes and used them as a background graphic for the header and main headline to sit on top of.
I created a featured titles area so that new products could be promoted there, followed by a “Shop by Subject” section and a “Shop by Grade” section, to help shoppers navigate through the large catalog of workbooks on the site.
I brought the “About Us” section to the home page too, to highlight the story and heritage of this brand. The page ends with a quote from a satisfied customer, and the opportunity to sign up for the company’s email newsletter or visit their social media pages.
The footer includes a series of links directly to category pages. It also includes all of the standard business information, like address and links to legal information.
After the home page was reviewed and approved by Kumon, I created a product page template that related to the style of the home page. The structure of the product page is different from the structure of the product page on the previous site. Product description and details are up higher on the page, making for easier browsing of products. The categories of each product are also highlighted on the page, to help the customer understand the content of the book they’re looking at.

The Solution

Because this is an education-related business, with a high number of products available, I wanted to be sure navigation was clear and simple. For this reason, type hierarchy (the relationship between the different information on the site) and color were important factors throughout.
Additionally, there are many subcategories that a customer could be shopping for, so I made sure to organize the products in a few ways, and tag them with the appropriate information to improve search results on the site.
The book covers are all varying colors, so it was important to minimize the number of additional colors used, especially on the product page. For the most part, you’ll only see the Kumon turquoise and dark purple on these pages. And, to help boost the appearance of the image, we’re using a lighter shade of turquoise as the background color.
The headers on each page are consistent, to help with navigation as a customer browses the site.
Using an affiliate plugin, we are able to pull in content from Amazon, including ratings and reviews, and then allow the checkout process to happen via Amazon. When the client is ready, the site will be able to process transactions via Woocommerce.
Images have all been optimized for the web to ensure the site is lighter and loads faster than before, but not optimized so much that the images lose quality.
kumonbooks.com home page

More case studies