Maru is a showroom and online boutique selling high-end Japanese design objects ranging, from delicate porcelain to handmade stationery. Founded and curated by Japanese architect Motoko Yoshida, the Oslo based boutique has a clear aim of offering high quality Japanese goods to Scandinavians with a taste in good design.
We were approached by Maru to design the boutique's identity, ranging from logotype, stationery, packaging and signage to the design and development of the online shop.
When designing the identity we knew from the very start that we wanted to merge Japanese and Scandinavian design values which, to us, in many ways are closely related, yet in other instances may seem worlds apart.
Identity & Stationery
Maru means 'circle' or 'correct' in Japanese. In Japanese schools, teachers indicate that an answer is correct by drawing a circle next to it. We used this in the identity by placing the products in the webshop in circles of different colours (indicating which group of products they belong to) proclaiming that the product is approved by Maru.
With the logotype we wanted to visualize the story of Maru and illustrate the act of setting up a Japanese boutique in the capital of Norway. We found a quite literal way of doing this by integrating the Kanji symbol for Maru in the middle of the wordmark, replacing the A and R.
By doing this, we made the wordmark bilingual and avoided the need of having to have two separate wordmarks, one for the customers (mainly from Scandinavia) and another one for dealing with distributors and manufacturers in Japan. The wordmark was drawn with rounded turns and ends to make the Kanji symbol feel less aggressive and the two different entities are separated by a combination of embossing and debossing throughout the printed matter.
A colour palette based on traditional Japanese colours was selected and two different typefaces, Gravur Condensed for Western characters (replaced by Din Rounded online) and ProN W4 for Japanese characters, is used throughout all branded material. The main colours used are off-white and
grey and Jinzamomi / Thrice-Dyed Crimson.
We searched long and hard to find the right paper stock for the stationery, looking at a number of options including the Japanese Takeo paper. We found what we were looking for in the then just released Keycolour Particles Snow. We managed to get the 100g weight (although not available for the Swedish market), resembling the feel of a traditional rice paper, which we used for the letterhead and correspondence card. For the business card, we used the more sturdy GFSmith Pristine White 540g.
The logotype deploys a combination of embossing and debossing which is used throughout the printed matter.
Website design & development
The Maru website consists of two main sections. The first one being the online store which is Maru's main exposure reaching all of Norway and residents in the neighbouring Nordic countries. The second one is a blog in which Maru can promote Japanese design, upcoming events in the showroom and highlight new products in the webshop.
Focusing on Japanese design products, with a tradition of clean and elegant solutions, we wanted to use a similar approach for the Maru webshop. A major challenge when designing e-commerce sites is presenting the product listing in a visually compelling way. For the Maru site, we solved this using an image listing with a flip-card solution for displaying the product details. This help displaying the products in a
clear and well structured way, while still adding an element of fun when flipping the images. On the front page, the visitor can choose to display a curated mix of products or the products most recently added to the web shop.
Another important aspect of a webshop design is the check-out process. It should be easy to go from any part of the site to your cart. In the Maru shop, the cart details and the link to the check-out page are always displayed. Initially displayed at the bottom of the page, it shifts to a more prominent position right under the header when browsing a single product or when you have added items to your cart.
The webshop is built in the Swedish e-commerce system Textalk, and the Maru blog is built in WordPress. Both share the modular grid for products or posts, but where the
webshop products are always presented in squares, the posts in the blog vary in size.
DIN Rounded (replacing Gravur Condensed in online applications), is loaded using a '@font-face' import via Typekit.
A set of icons were designed - some with the specific purpose of being used as part of the UI in the webshop and others with a more general purpose appearing across both digital and physical environments.
An illustration, deploying the dot based grid used throughout the printed matter, depict the Oslo and Osaka (Motoko's hometown) skylines.
Apart from the aforementioned printed matter and online applications, we have designed a range of promotional material including a poster, invitations and flyers. In more dynamic applications like these, we extended the use of the accent colour in order to separate it from the more static material.
Product photography is displayed exclusively in grey scale, multiplied to the background. In some applications, a raster is used to mimic folding and origami while other pieces are actually folded. Many pieces, including packaging and signage, are still in production and we will update this presentation with new material continuously.