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