top of page

Overview

Target Users

The Cafe Owner wants to share his love of trains with fellow train enthusiasts and coffee lovers. So the target audience would be those who are interested in a unique cafe which brings them out of the country.

Task Flow

A simple process of user wanting to find out about "Sakura Coffee" and what the Cafe is about.

Task Flow
Cafe Persona
Prototyping

Prototyping

Low Fidelity

Based on the task flow, there will be 3 pages.

 

The home page gives visitors an idea of what the page is about including basic info like opening hours.

The about page tells visitors shares the story of what the cafe is about and what it has to offer.

The menu page shows visitors the type of foods and drinks available to entice them into trying.

Train Cafe Concept v0.001.jpeg
Train Cafe Concept v0.005.jpeg
Train Cafe Concept v0.002.jpeg
Train Cafe Concept v0.004.jpeg
Train Cafe Concept v0.003.jpeg
Train Cafe Concept v0.006.jpeg
Train Cafe Concept v0.007.jpeg
Train Cafe Concept v0.008.jpeg
Train Cafe Concept v0.009.jpeg
Home
About
Menu

High Fidelity

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 the contact details, opening hours, social media links and chat.​​

I use the illustration of Japanese train conductors to symbolise the customer service

Train Cafe v3-02.jpg

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.​​

Train Cafe v3-03.jpg

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.

Train Cafe v3-04.jpg
Train Cafe v3-05.jpg
Train Cafe v3-06.jpg
Iterations

Iterations

Home Page

  • I add "Eng" next to the "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

Train Cafe v1-01.jpg
Train Cafe v3-12.jpg

Menu Page

  • 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 used large photos and thought of using a scroll button for users to swipe left and right, but decided for simplicity by putting all the drinks in one page

Train Cafe v2-06.jpg
Train Cafe v3-05.jpg
Train Cafe Concept.001.jpeg
Train Cafe v3-05.jpg
Self Reflection

Self Reflection

If I were to commit into designing the entire website, I would:​

 

  • talk to the cafe owner to know about his ideal website, the things he wants to show and the design he is looking for, the brand identity he wants to present to customers

  • 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 design

  • 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 

Train Cafe v3-09.jpg
bottom of page