Kinokuniya

Introduction |

The Kinokuniya website was beset with outdated design, slow load times, and non-intuitive navigation that impeded customer experience. A lack of mobile optimization hindered on-the-go access, and the outdated admin interface complicated inventory management and customer service.

With just 4 weeks for this design sprint, I knew I had to focus. The plan was to define a clear project scope, dive into research and synthesis, and then turn all of that into a structured, user-friendly design that addressed the biggest pain points.

Research |

To kick off the redesign, I needed a solid research plan to uncover the real problems with the Kinokuniya website. My goal was to pinpoint the key issues and understand them deeply. Here’s how I approached it:

  1. Heuristic Analysis
    I started by evaluating the site using Nielsen’s Ten Heuristics. This helped me systematically identify the most critical usability issues, prioritize them, and focus on areas where improvements would make the biggest impact.

  2. Competitor + Comparative Analysis (C+C Analysis)
    Next, I took a close look at competitors like Barnes & Noble, Book Off, and Amazon. I compared features and functionality, noting what worked well and what could inspire improvements for Kinokuniya. I also explored websites outside the industry to find smart ideas we could adapt for a better user experience.

  3. User Interviews
    Finally, I interviewed five individuals who fit the target demographic: professionals in their mid-20s to early 30s, living in metropolitan areas. Some were familiar with Kinokuniya, while others had an interest in Japanese animation, products, and culture. These interviews gave me direct insights into what users were struggling with and what they valued most.

Research Insights |

From user research, I discovered that shoppers on the Kinokuniya website were running into four main pain points:

  1. Too Much Visual Clutter
    The website was visually overwhelming, with an overload of images, text, and colors competing for attention. Users found it hard to focus and felt the design was chaotic rather than inviting.

  2. Hard to Navigate
    Many users mentioned that finding their way around the site was a challenge. The menu structure was confusing, and there weren’t clear paths to help them get to what they were looking for.

  3. Missing Details in Product Descriptions
    The product descriptions were a big letdown. Key details were missing, leaving users feeling frustrated and unsure about making a purchase.

  4. No Support for Personal Preferences
    For repeat customers, the site didn’t do much to make their shopping experience easier. It lacked features to help users quickly find products that matched their interests.

Design |

The main goal of the redesign was to improve the website’s visual layout, and I focused on two key areas to make that happen.

First, I wanted to make better use of the underutilized space on each page. The idea was to present more content without overwhelming the user—balancing functionality with a clean, inviting look.

Second, I worked on creating a streamlined visual system for both the main and sub-categories. This was all about making navigation easier and more intuitive so users could discover new content effortlessly and actually enjoy the process.

Sketches

Wireframes

Home Page

Main Category Page

Sub Category Page

Usability Testing |

For the usability test, I used Maze.co to streamline the process. The test was straightforward: users were asked to purchase the newest copy of the One Piece manga without using the search bar. The results were encouraging:

  • Navigation Intuitiveness: Users rated the navigation a solid 9.4 out of 10.

  • Challenges: There was some confusion about what was functional in the mid-fidelity prototype.

  • Additional Feedback: Suggestions were minimal, focusing on slightly resizing some elements and refining the checkout process.

With most of my hypotheses validated and only minor adjustments needed, I moved to the next stage: transforming the wireframes into a polished, high-fidelity mockup. This updated design offered a clearer, more detailed vision of the final product.

Here’s what came out of it:

Prototype

Previous
Previous

Home Depot DIY

Next
Next

Happy Path