Oct. - Dec. 2018
Team Work + Personal Work
Card Sorting, Tree Testing, Usability Testing, Heuristic Evaluation, Wireframe
Kinokuniya is a Japanese-based retailer known for its collection of books and magazines, along with gifts and stationery items, Japanese Books, and English Books. Established in 1972 in Japan, it now has over 80 stores and 35 sales office locations worldwide. For this project, we narrowed our scope to only the website for US customers.
This project was an Information Architecture course project. Information Architecture is all about meeting the needs of people, content, and context. In order to conduct effective information architecture design, we built our research methods based on the three circles.
We compared the Kinokuniya website with four competitors, mainly focused on three parts: Information architecture, website content, and visual design.
The purpose of a content inventory was to produce a listing of the website’s content to give us a system for managing the content we need in the redesign and bringing awareness of the full extent of the website’s content.
Gained a better understanding of the information architecture and
the hierarchical structure of Kinokuniya’s US website.
Assessed what kind of content and how much we had to work with for the redesign.
Uncovered broken links, links that lead to the same page but have different labels, links that lead to blank search results, and search results that do not match link labels.
Assessed Kinokuniya’s book subject categories which we used later on for our card sort.
Proper categorization is important for any website, but especially for a bookstore website where users will rely on the effective categorization of books to find what they want. Therefore, we conducted two in-person card sorting sessions to help us infer the most natural organization of book subject categories (main category and sub-category).
2 in-person sessions
Open card sorting
We conducted an open card sorting to see which subjects card sorting participants would choose and which would be sub-categorized. Participants were also allowed to discard cards, but they had to provide their reasoning.
Compiled a list of cards (subject categories) that participants found confusing, questionable, vague, or difficult to categorize.
Changed the category label after we compared results from the card sorting sessions with our competitors’ categories.
Eliminated subject sub-categories that displayed zero books.
Merged sub-categories that displayed fewer than five books into larger sub-categories.
In order to ensure the new categories and sub-categories we created to make more sense to the users, I conducted tree testing with eight participants.
Folder clicking method
2 sets of tasks
2 versions of categories
I totally designed eight tasks and separate them into two groups: Task A and Task B. By mixing the order of two sets of tasks and the version of categories, the testing result won’t be influenced by user’s familiarity with the categories.
17% time saved
The total time participants spent on the old categories was 872 seconds, and they spent 723 seconds on new categories.
New categories creation
I finalized the subject labels and categorization based on participants feedback and my observations during the tests.
We conducted usability tests in order to better understand how users interact and accomplish key tasks on Kinokuniya’s website and use these finding to inform and guide our redesign.
Likert scale & SUS
We conducted five usability tests across five participants. Our baseline criterion was that participants had to have previous experience with online shopping. As participants completed a task, we asked them to rate the difficulty of the task on a Likert scale from one to five (one being very easy and five being very difficult) and provide an explanation of why they chose the rating. Upon completing all five scenarios, we asked the participants to complete a System Usability Scale (SUS).
SUS grade: F
The results from our SUS show that Kinokuniya’s website received failing scores from four out of five test participants. This means that the website’s usability is below average.
We discovered 10 issues and generated our design recommendations. Here are some examples:
It was not obvious to users that categories and subcategories would appear if they click on a menu item.
Participants clicked “WHAT’S NEW” in global navigation for newly released books, but this page led them to a microsite page for store events and news.
The majority of participants clicked on “Advanced Search,” even though they can find a book by ISBN by typing in the search bar.
Weekly bestsellers weren’t where users expected them to be on the page. The position of the weekly bestseller book is on the bottom right corner of the page. It's not noticeable unless the user scrolls down.
Two of the participants were not sure of what “BookWeb Price” means.
Participants were unsure of the meaning and/or distinction between the “Availability Status: In stock at the Fulfilment Center” and the in-store “Stock Information” chart.
We conducted a heuristic evaluation by Nielsen’s heuristics to identify broader usability issues with Kinokuniya’s website
We identified 10 problems and evaluated the severity level of each problem. Sev1 indicates problems that have to be solved, and Sev4 indicates minor problems. Here are some examples:
Match between system and the real world.
The labeling isn’t wholly representative of the
displayed results. When users select “Blank
Books & Journals,” stickers are also included in
Severity level: Sev1
Aesthetic and minimalist design.
The page is riddled with redundant information. For example, shipping information appears again and again throughout the homepage. Furthermore, images are used for several content items, which clutters the page and reduces space for book shopping functions and search results.
Severity level: Sev1
Consistency and standards.
The shipping details and store information on the right side of the homepage use the same link. Wherever users click on it, it connects to a new page that shows Kinokuniya store information in the United States.
Severity level: Sev2
We started ideating from the design implications we generated. Each of our team members sketched possible solutions and shared the design to the team.
I conducted usability tests in order to better understand how users interact and accomplish key tasks on the lo-fi prototype and use these finding to inform and guide the following design.
Each usability test consisted of four scenarios that tested the usability of key areas of Kinokuniya’s website. The four scenarios are similar to the previous tests, mainly focused on usability issues with information recognition and retrieval. However, due to the limitation of the lo-fi prototype, the search function wasn’t able to be tested.
SUS grade: A
The lo-fi prototype received good SUS scores from all test participants. Since the previous grade was F, we could conclude that the prototype had better usability than the website.
By observing how the participants’ conducted the tasks and interviewing them after they filled out the SUS, I understood how to improve the lo-fi prototype. The biggest issue was to create more pages and more interactions so the participants won’t feel confused about what’s clickable and what’s unclickable in the prototype.
Changed the “WHAT’S NEW” label to “News & Events.”
Moved “Weekly Bestsellers” to a more obvious position. Also, displayed the books with bigger pictures to catch users’ attention.
Designed an independent area for newly released books, creating tabs for the website’s three-book languages, in order to provide users with more options.
Separate the shipping and store information buttons and pages. Place a link labeled “Shipping” in the website header. Place a link labeled “US Stores” under the “About US” section in the website footer.
Provided instructions for what can be typed in the search bar, such as keyword, title, author, or ISBN.
While users hover their mouse over a category, the subcategories will appear in an adjacent box.
New Arrivals & Bestsellers
Redesigned "New Arrivals" and "Bestsellers" pages with filter and sorting functions.
Book's Detail Page
Reduced the amount of information per book on the search result page to ease reader reading burden and make pertinent information more noticeable.
Changed “Availability Status” to “Online Availability” and “Stock Information” to “In-store Availability” to distinguish and clarify the meaning of the two stock information types.
Removed the label “BookWeb Price” and only included the label for “Kinokuniya Member Price.”
A pop-up message confirming that the item was added to the cart with buttons asking the user whether they would like to continue shopping or checkout.