Faculty — Cereal Website

Two years ago, during a trip to Tokyo, we visited one of our favourite book stores, TSUTAYA Books 蔦屋書店, in Daikanyama. Aside from their vast collection of great books, we were impressed by the beautiful and functional wayfinding system designed by Kenya Hara.

So when we began to work with Cereal Magazine to redesign their website, our experience at TSUTAYA Books came to mind, and we found it to be an interesting comparison between a website and a wayfinding system like 蔦屋書店. We began to ask ourselves questions like: How does the entrance look like? What is the easiest way for a new visitor to explore the ‘bookstore’? And if they know the exact ‘book’ they are looking for, what is the simplest way for them to find this ‘book’? When someone finishes reading a ‘book’, is it possible to recommend other similar ‘books’ to the reader? Will the ‘bookshop’ still function efficiently when there’s 500 ‘books’? 1000 ‘books’?

1–2
Categorizing articles

3
Sitemap

4–5
Some initial design concepts

6
Homepage features flexible landscape and portrait thumbnail system

7–8
Category pages

9–10
Article page

12
Mobile screens

13
Sketches of website structure and content flow
UX inspired by the design of libraries

Website Design
We looked at every article on the Cereal website individually and categorized them as if they were books in a library. In the end, we arrived at six main categories with subcategories like countries or cities. A new search functionality is also available for visitors to find that particular article.

Since Cereal had established such an iconic aesthetic through their past websites, we paid particular attention to the elements that gave their website the Cereal look. We worked with Rich to formulate a modular grid that allowed the pairing of portrait and landscape article thumbnails to fit perfectly within the layout at all times. So whether the column showcased two portrait photos and a landscape photo, or one landscape photo and a portrait photo, the aspect ratio of the image stayed the same while the layout still worked cohesively together within the same container width. This was significant as it gave Cereal numerous ways to structure their homepage and allowed them to keep it active and changing.

To see the website, visit:
www.readcereal.com