JAPPAN Food Guide App

JAPPAN ist eine App, die es Reisenden ermöglicht, die immense Vielfalt der japanischen Küche zu entdecken – jenseits von Altbekanntem wie Sushi und Ramen. Sie führt zu einzigartigen und teils unscheinbaren Lokalen. Auf bestimmte Gerichte spezialisierte Restaurants treffen auf Izakayas und einfache Yatais, gemütliche Cafés und versteckte Bars. Von Hokkaido im hohen Norden Japans bis Zürich. Von erschwinglich bis kostspielig. Von laut und verraucht bis elegant, von weltberühmt bis zur Quartierbeiz.

Die App will den User:innen die kulinarische Bandbreite der japanischen Küche näher bringen. Denn sie ist einzigartig und faszinierend! Nicht zuletzt deshalb hat die UNESCO die japanische Küche 2013 zum immateriellen Weltkulturerbe erklärt.

Durch die Vorstellung ausgewählter Restaurants in verschiedenen Städten bietet die App Orientierung im unübersichtlichen gastronomischen Dschungel. Darüber hinaus schafft sie Zugang, indem sie Hintergrundwissen zu den Restaurants, ihren Spezialitäten und unbekannten Zutaten vermittelt. Nützliche Features wie das Begriffsglossar, die Favoritensammlung und eine Offline-Map machen die App zu einem funktionalen Werkzeug für unterwegs.

For the JAPPAN Food Guide App, we designed and built a system keeping simplicity and inclusivity at the forefront of our design principles. To keep it relevant and appealing to a wide variety of international users, we combined an open and proactive narrative with a clean identity, inspired by two design giants, Japan and Switzerland. The app features a simple structure for an intuitive user experience, fully adapted for the app to grow.

Art direction played a crucial role in bringing the app to life, with careful composition of mouthwatering photos and texts. We also implemented features such as the offline map and comprehensive index of Japanese dishes.

Simple Gestaltungsprinzipien

Das Entdecken von kulinarischen Highlights ist die Grundidee von JAPPAN. Diese Idee wird aufgegriffen und in ein einfaches, aber wirkungsvolles Designkonzept übersetzt. Indem das Spiel mit Schärfe und Unschärfe zum tragenden Gestaltungselement wird, wird die User Experience selbst zur spannenden Entdeckungsreise. Es ist, als ob sich die Inhalte hinter einem typisch japanischen Shoji-Papier-Paravent verbergen und erst durch das Öffnen des Paravents vollständig sichtbar werden.

Auf der Ebene der Städte- und Restaurantauswahl wird zwischen einer Bild- und einer Typografieebene unterschieden. Indem man beim Scrollen den Finger auf der Kachel hält, entsteht ein Wechselspiel zwischen der scharfen Typografiebene und der (noch) unscharfen Bildebene. Erst durch die Interaktion erschliesst sich den User:innen das vollständige Bild.

Dieses Konzept findet sich auch auf den Detailseiten der Restaurants wieder. Swipet man langsam durch die Bilder der grosszügigen Slideshow, wird jedes Bild unscharf, sobald es durch ein neues (scharfes) Bild ersetzt wird. Diese massgeschneiderte Lösung ist subtil und ihr volles Potenzial wird spätestens dann sichtbar, wenn einzelne, freigestellte Bildelemente – meist Spezialitäten des Restaurants – auftauchen. Erst durch den Kontrast zwischen dem vorherigen (nun unscharfen) Bild im Hintergrund und dem freigestellten (scharfen) Gericht wird dieses wirklich sichtbar.

Diese kleinen Überraschungsmomente zeugen von einer Extraportion Liebe zum Detail und machen für uns den Charme der App aus.

Bei genauerem Hinsehen entdecken die User:innen in den Beschreibungstexten der einzelnen Restaurants auch unscharfe Wörter – dabei handelt es sich um spezifische Spezialitäten oder Zutaten. Konsequenterweise sind auch diese unscharfen Elemente eine Einladung, mehr zu erfahren und weiterführende Inhalte zu entdecken.

Tippt man auf ein unscharfes Wort, legt sich ein weiterer Shoji-Paravent über den Inhalt, so dass dieser unscharf wird. Eine kurze Erklärung des angeklickten Begriffs tritt in den Vordergrund. Wie in der Slideshow werden die erklärten Spezialitäten und Zutaten mit einem freigestellten Bild dargestellt. Aber wie schliesst man diese Seite wieder? Auch wenn das im UX und UI Design weit verbreitete «×» als Schliessbutton sogar japanischen Ursprungs ist, wurde hier bewusst davon abgesehen. In der gesamten App wurde bewusst auf Icons verzichtet – einzige Ausnahme ist das prominent platzierte Herz für die Favoriten. Wir vertrauen darauf, dass die gewieften User:innen dennoch ihren Weg zurück finden werden.

Als hilfreiches Zusatzfeature werden die unscharfen Begriffe nicht nur in den Artikeln zu den Restaurants angezeigt, sondern auch in einem umfangreichen Index gesammelt. Dieser ist über die Startseite erreichbar. So schaffen wir es, User:innen mit unterschiedlichem Wissensstand abzuholen – Profis werden die Erklärungen nicht brauchen, anderen helfen sie, die japanische Küche und Kultur besser kennen und verstehen zu lernen und im besten Fall sogar das eine oder andere Wort auf einer japanischen Speisekarte entziffern zu können.

Die Kombination von zwei Schriftsystemen

Eine Herausforderung im Designprozess war die Kombination des westlichen mit dem japanischen Schriftsystem. Gerade an Orten, an denen kaum Englisch gesprochen wird, ist es für Reisende hilfreich, die Namen der Gerichte auch auf Japanisch zur Verfügung zu haben. Darüber hinaus ist Schrift immer auch ein Träger von Kultur, der wir mit grösstmöglichem Respekt begegnen wollen, indem wir die Restaurants, Gerichte und Zutaten mit den dazugehörigen Schriftbildern zeigen.

Die Titel der NavBar werden nicht an der gewohnten Stelle (oben zentriert bei iOS oder linksbündig bei Android), sondern in Anlehnung an das japanische Schriftsystem vertikal von oben nach unten, links (englisch) und rechts (japanisch) vom Seiteninhalt platziert. So entsteht ein funktionales Orientierungselement, das beide Schriftsysteme gleichwertig behandelt und einen Rahmen für den Inhalt bildet.

Indem beide NavBar-Leisten die gleiche visuelle Lautstärke haben, vermeiden wir eine Wertung der beiden Sprachen. Dieser nahtlose Übergang der Schriftsysteme war auch für die Wahl der Schriften elementar. So verwenden wir für den englischen Text die serifenlose Schrift «Futter Grotesk» des Zürcher Designers David Lüthi, und für die japanischen Schriftzeichen die Google-Schrift «Noto Sans».

Beide Schriften haben einen ähnlichen Duktus und damit einen ähnlichen Schwarzwert. Beide eignen sich besonders gut für das Lesen am Bildschirm und können sowohl auf iOS als auch auf Android verwendet werden, was ein konsistentes Erscheinungsbild der App auf beiden Plattformen ermöglicht. Die «Futter Grotesk» wurde von ihrem Designer speziell für die App angepasst und um einige Schriftzeichen erweitert, um dem Inhalt von JAPPAN gerecht zu werden.

Die beiden schnörkellosen und handwerklich hervorragend gemachten Schriften tragen einen wesentlichen Teil zum klaren und gepflegten Erscheinungsbild der App bei.

Es ist vielleicht aufgefallen, dass die App noch nicht vor Inhalten strotzt. Sie ist so gebaut, dass sie inhaltlich stetig wachsen kann. Laufend werden neue Contributor:innen dazu kommen, die ihre heissesten Tipps preisgeben. Es sind Menschen, die unsere Begeisterung für die japanische Küche teilen und sich beruflich oder einfach aus Leidenschaft damit beschäftigen. Sie alle werden ihre Lieblingslokale weltweit vorstellen und erzählen, warum sich ein Besuch lohnt.

Bei jedem Restaurant ist ersichtlich, von wem der Tipp stammt. Informationen über alle Contributor:innen findet man unter dem Menüpunkt «About» auf der Startseite.

Es lohnt sich also, die App hin und wieder zu öffnen und zu durchstöbern. Vielleicht sind wir dann schon so weit, dass die besten japanischen Restaurants in Zürich verfügbar sind.

JAPPAN ist eine Initiative von Stephanie Cuérel und Sophia Goedecke. Die beiden Designerinnen aus Zürich sind fasziniert von der immensen Vielfalt der japanischen Esskultur. Im Rahmen ihres 2019 gegründeten Supper Clubs «Harubaru Copy Club» erkunden sie diese mit kulinarischen Events und weiteren Projekten rund um das Thema.

Als Projektpartner konnten sie die Zürcher App-Agentur Milk Interactive AG gewinnen. In enger Zusammenarbeit wurde das Konzept und Design für die App entwickelt. Die Umsetzung erfolgte ebenfalls durch die Milk Interactive AG.

​​Finanziert wurde die Entwicklung von JAPPAN durch eine Crowdfunding-Kampagne auf wemakeit.ch im Sommer 2023, bei der die Community über 20’000 CHF gesammelt hat.

Die Links zum kostenlosen Download für iOS oder Android finden Sie unten. Beim zweiten Mal öffnen der App muss zwingend eine E-Mail Adresse angegeben werden. Der Grund dafür ist, dass wir eine Newsletterliste aufbauen. Im Gegenzug bieten wir die App kostenlos an. Es ist jederzeit möglich, den Newsletter wieder abzubestellen. Die Daten werden nicht an Dritte weitergegeben.

Trigger Warnung

Personen, die mit leerem Magen schlecht denken können oder zur Hangryness neigen, empfehlen wir, vor der Bewertung der App ausreichend und gut zu essen. Die Bilder sind sonst schwer zu ertragen. :-)

Credits

Konzept und Design: Milk Interactive AG in enger Zusammenarbeit mit dem Harubaru Copy Club
Softwareentwicklung: Milk Interactive AG
Webseite zur App: jappan.app