JAPPAN is a food guide app that offers Japan enthusiasts and foodies unique culinary experiences and introduces them to the broad spectrum of Japanese cuisine - a UNESCO World Heritage Site since 2013.

The app introduces users to the culinary spectrum of Japanese cuisine and guides them to unique and sometimes inconspicuous eateries. Restaurants specialising in certain dishes meet izakayas and simple yatais, cosy cafés and hidden bars. From Hokkaido in the far north of Japan to Zurich. From affordable to expensive. From loud and smoky to elegant, from world-famous to neighbourhood pubs.

By presenting selected restaurants in various cities, the app provides orientation in the confusing gastronomic jungle. It also creates access by providing background knowledge about the restaurants, their specialities and unknown ingredients. Useful features such as a glossary of terms, a collection of favourites and an offline map make the app a functional tool for on the go.

The design of the app

The visual design of JAPPAN is unmistakably inspired by the two design nations of Japan and Switzerland. Despite the distance of around 10,000 kilometres, there are exciting parallels in the two countries' understanding of design. We have incorporated these into the design of the app. Reduction to the essentials was an elementary point - this applies to the simple and intuitive structure of the app, but also to the straightforward use of typography. In addition, we paid particular attention to details and precise implementation - be it the sensitive handling of images or the realisation of interactive elements.

The result is an app whose functionality and content is supported by a design that takes users on a journey of discovery and holds many small but beautiful surprises in store.

Simple design principles

Discovering culinary highlights is the basic idea behind JAPPAN. This idea is taken up and translated into a simple but effective design concept. By playing with sharpness and blurriness as the main design element, the user experience itself becomes an exciting journey of discovery. It is as if the content is hidden behind a typical Japanese shoji paper screen and only becomes fully visible when the screen is opened.

City selection on the start page.

At the city and restaurant selection level, a distinction is made between an image level and a typography level. By holding your finger on the tile while scrolling, an interplay is created between the sharp typography layer and the (still) blurred image layer. The full image is only revealed to the user through interaction.

Restaurant selection.

This concept can also be found on the detail pages of the restaurants. If you swipe slowly through the images in the large slideshow, each image becomes blurred as soon as it is replaced by a new (sharp) image. This customised solution is subtle and its full potential becomes visible at the latest when individual, cropped image elements - usually specialities of the restaurant - appear. It is only through the contrast between the previous (now blurred) image in the background and the cropped (sharp) dish that the latter really becomes visible.

These little moments of surprise are evidence of an extra dose of attention to detail and, for us, add to the charm of the app.

Picture galleries on the restaurant detail page.

On closer inspection, users also discover blurred words in the description texts of the individual restaurants - these are specific specialities or ingredients. Consequently, these blurred elements are also an invitation to find out more and discover further content.

If you tap on a blurred word, another shoji screen is placed over the content so that it becomes blurred. A short explanation of the clicked term appears in the foreground. As in the slideshow, the explained specialities and ingredients are shown with a cropped image. But how do you close this page again? Even though the ‘×’ as a close button, which is widely used in UX and UI design, is actually of Japanese origin, it was deliberately omitted here. Icons have been deliberately avoided throughout the app - the only exception is the prominently placed heart for the favourites. We trust that the savvy users will still find their way back.

Further information is hidden behind the blurred words.

As a helpful additional feature, the blurred terms are not only displayed in the articles on the restaurants, but also collected in an extensive index. This can be accessed via the homepage. In this way, we are able to cater for users with different levels of knowledge - professionals will not need the explanations, others will find them helpful in getting to know and understand Japanese cuisine and culture better and, in the best case, will even be able to decipher one or two words on a Japanese menu.

The ‘Index’ menu item on the start page takes you to the collected and alphabetically organised terms.

The combination of two writing systems

One challenge in the design process was the combination of the Western and Japanese writing systems. Especially in places where English is hardly spoken, it is helpful for travellers to have the names of the dishes available in Japanese. Furthermore, writing is always a carrier of culture, which we want to treat with the greatest possible respect by showing the restaurants, dishes and ingredients with the corresponding written images.

In the app, we use the sans serif font ‘Futter Grotesk’ by Zurich designer David Lüthi for the English text and the Google font ‘Noto Sans’ for the Japanese characters.

Two fonts with a comparable style ensure a uniform typeface.

Both fonts have a similar style and therefore a similar black level. Both are particularly suitable for reading on the screen and can be used on both iOS and Android, which enables a consistent appearance of the app on both platforms. The ‘Futter Grotesk’ was customised by its designer specifically for the app and some characters were added to do justice to the content of JAPPAN.

The two straightforward and excellently crafted fonts make a significant contribution to the clear and neat appearance of the app.