Train Cafe
Web Design
About
This project is to design a website for a newly opened train diorama themed cafe called, Shinjuku Kissa Tetsudo.
Tools Used
Keynote, Illustrator, Photoshop, InVision
​
Background
There is a new cafe opening up in Singapore but I realised that there is no website and the cafe only post its updates, product details, opening hours and others on Instagram, which makes finding information a bit difficult.
1. USER EXPERIENCE
ABOUT SHINJUKU KISSA TETSUDO
Shinjuku Kissa Tetsudo (SKT) is a newly opened Japanese Railway Themed Cafe, offering not only Japanese specialty coffee and pastries, but a realistic diorama, inspired by the Yamanote Line in Tokyo, which customers can operate.
​
The goal is to create a well-organised content, user-friendly site,
providing information on the products and services offered,
related updates and online chat support.
TARGET USERS
For such a unique establishment, there are normally two types of customers.
One is the casual visitors who are there out of curiosity to know what the cafe is offering while the other is the train enthusiast or frequent travelers, who are looking for cafe that brings them temporarily out of the country. The second type are our ideal customers as shown in the persona below.
USER PERSONA
Searching for the desired information from Instagram page can be frustrating as user may need to find the respective post. Having a website offers a centralised source of information for customers to visit and learn about what the cafe has to offer.
TASK FLOW
The Scenario :
You are interested to know what products and services the cafe is offering.
The Tasks :
1) Find out more about "Sakura Coffee"
2) Find out what the Cafe is about.
2. PROTOTYPING
LOW FIDELITY
HOME
ABOUT
MENU
HIGH FIDELITY
HOME
Since it's a Japanese Railway Themed Cafe, I use a photo of the iconic bullet train aka Shinkansen.
​
I choose a theme colour of red and white, because they represents the national colour of Japan and Singapore.
​
I add a traditional Japanese pattern on the background to give it a unique Japanese aesthetics.
​
Here I want to emphasis the connection between Japan and Singapore, depicted by the illustration and photos.
​
I do not want to overwhelm the visitors with too much information here and put the rest under "Learn More".
​
I choose photos which best represents Nagoya and Singapore, from its buildings to its people.
As most websites, the bottom page is where user finds the contact details and opening hours.
​
There is a list of social media pages to follow and also a button for live chat to inquire.
​
I use the illustration of Japanese train conductors to symbolise the customer service.
ABOUT
Here, the 4 main aspects of the cafe which makes it unique as compared to other cafes are shown.
​
The specialty roasted coffee, the train diorama, the tatami corner and the Japanese hospitality.
​
I got the inspiration for diamond type of design from the Samurai war banner of Feudal Japan.
Here is the overall pricing of tickets needed to enter the cafe to give an authentic train station experience.
​
There is also an overall pricing of rental fee of train diorama should you wish to operate.
​
User can click on the button below for more info on the types of seats and trains available.
This is the brief story of the cafe owner and how he came about opening the unique cafe in Singapore.
​
His backstory will be useful for customers to interact with him at the cafe to know more about his story.
​
The idea is to give customers an impression that the owner is friendly and approachable.
MENU
There are 3 categories, food, drinks and cakes.
​
Food being toast and bread, as the cafe does not serve main dish food such as ramen or bento rice.
​
Drinks, being cold and hot drinks, ,including coffees and fruit juices. While cakes are more of pastries.
At this page, user can select "food" or "cakes" option without having to go back to the previous page.
For each selection, user will be brought to the respective page explaining the drink.
SHINJUKU KISSA TETSUDO WEB
Your task is to find out more about the cafe.
Or find out more about "Sakura Coffee".
3. ITERATIONS
HOME
-
I add "Eng" next to the Japanese word "Nihongo (Japanese) for users to know they can switch the web language
-
I change the "search" box to a "search" icon for simplicity
-
I shorten the "latest news" to "updates" and add side arrows for users to scroll for more updates
-
I add a fade traditional Japanese pattern for the background without causing too much distractions
ABOUT
I wanted to make it feel like an authentic train ticketing experience that I use colour bars for the pricing which are normally seen at Japanese train stations but decided against it to avoid using too much colours.
MENU
I made the rookie mistake of not putting the top bar on every page, so there was a "go back" option for users to go back to the main menu which is troublesome. I had them rectified.
I used large photos and thought of using a scroll button and using a train illustration to show the train moving from left to right as the user scroll accordingly, but decided for simplicity by putting all the drinks in one page.
4. STYLES
I took inspiration from Japanese cafes and Japanese travel websites. I use a simple colour theme of red and white, as not only are they the national colour of Japan but Singapore as well.
For Japanese market, Japanese people prefers to have as many information as possible on their websites to help them with their decision making.
For Singapore market, Singaporeans prefer aesthetics and simplicity. Taking in mind that this is the target audience, a simple web design is taken.
SELF-REFLECTION
If I were to commit into this project into designing the entire website fully, I would:
​
-
conduct user research and interviews of customers, to know their thoughts on what they look for in a website, in terms of content and visual aspects
-
conduct visual design research, based on what the customers are looking for in the website and what type of image or identity the cafe wants to present to customers
-
search for more variety of illustrations and icons to be used for different pages
-
take high quality photos of the cafe to give customers an idea of the atmosphere
Previously, I redesign an existing website for Japan Creative Center to improve its visual designs and user journey.
Now, I design a website for Shinjuku Kissa Tetsudo as the company currently do not have a website of its own.
Designing an original website from scratch is as challenging as redesigning an existing website.
For redesign, I have to create a better website than the original so I have something to base on and make changes by identifying room for improvements in terms of visual design and system architecture for a pleasant user journey. And at the same time, remain true to the existing website to a certain extend, to retain its content and ensure it remains recognisable.
For designing a new website, there is nothing to improve on as there is no website to based on, which is both good and bad.
The good thing is, I am free to create my own style as long as it aligns with the company’s vision and expectations.
The bad thing is, I have to came out with an original idea of the type of visual design and system architecture from scratch.