Web Design Project 2: Get Local Responsive Web Design

Project Brief

For the Local Business Website Design Project, I want to design a website for a Japanese restaurant called, Batten Ramen. It is a small business, owned by a Japanese man, located in Fort Lee, NJ. It is about 10 minutes away from my house by car. It serves a variety of Japanese cuisine and dishes such as Japanese style curries, teriyaki chicken, squid, friend rice, and it’s very popular ramen noodles.

Inside, the store provides customers with ample tables to sit on, including counter seats like in traditional Japanese Ramen Stores. It is also decorated indoors with Japanese posters, stickers, and decorations that give the interior an authentic Japanese atomosphere and environment. The restaurant also provides customers with a large bookshelf packed with a vast collection of Japanese books, comics, and magazines to read and browse through while eating, or waiting for a take out order. I think the restaurant is special because it provies a fun, interactive, and overall great experience for people who want to eat Japanese food.

With the web page and app design, I am intersted in adding an online menu and order and pick up feature. They currently have an order and pick up service, but only by telephone. The restaurant also has a special set that changes every day of the week, and I thought that highlighting it on the website would also be helpful, because no one ever knows about the specials unless they are a regular customer.

Web Page Design: Project 2 Get Local Research

**Disclaimer: Photography and designs used for this post belong to their rightful owners.**

On this post, I will share some of the research I conducted for my second web design project. For this project I was required to choose a local business a few miles away from my home, and design a responsive website for it.

Our preliminary designs were due yesterday, and we had a critique in class. I am not very happy with what I have right now, so I am thinking about starting from scratch again, by going back to research and sketching out some ideas again. This research is my second time around looking for ideas and inspiration for this project, hopefully this will be a nice way for me to FOCUS. I feel like I have not had a lot of time to sit down and sketch out a lot of concepts and designs for this semesters’ projects, and am feeling very stuck. Hopefully making a research post will help me get back on track.

I live in a very diverse area, so there are many small businesses I can choose from. I decided to choose my sister’s part-time workplace as my local business for the project. The local business is Batten Ramen. It is a Japanese restaurant that is well known for it ramen noodles, but also offers a variety of other Japanese and Korean/Chinese fusion cuisines. The restaurant’s hearty curry dishes are very popular among customers. Recently, a lot of Japanese ramen restaurant chains have been opening near my area, and are possible threats to Batten Ramen’s small business, so in order to help their business I thought it would be nice for me to design them a website.

Batten Ramen (Direct):

I searched Batten Ramen on google and found a few images of the manager, Mr. Nakajima, and a few photos of Batten’s old part-time workers at an NYC ramen festival. I also read a few reviews about Batten by their customers on Yelp and Urbanspoon. I think one thing a lot of customers might not know, is that Batten Ramen makes Kyushu style noodles, while other ramen restaurants make noodles in a style of a different region of Japan, for example, I know Mitsuwa’s Santouka, a famous ramen restaurant, makes Hokkaido stye noodles. I think it might be important for customers to know that Batten Ramen makes specifically Kyushu style noodles. The noodles are thinner, and the broth is lighter in color.

Batten-Ramen-team    IMG_9085

Batten Ramen’s interior decorations:

higo2    o     348s    tumblr_n8cl4hr1nv1td7yowo1_1280

Other Ramen Restaurant website designs (Direct):

I also researched the navigations and looks of other popular ramen restaurants. I was surprised to find that many of the websites were responsive, but the most popular of the restaurants, Santouka, did not have a responsive website. All of the restaurants are chains and had similar primary navigations.

Santouka Ramen Website (Not Responsive)

Screen Shot 2015-04-03 at 12.21.20 AM

Menya Sandaime Website (Responsive)

Screen Shot 2015-04-03 at 12.22.09 AM    Screen Shot 2015-04-03 at 12.22.17 AM

Ramen Setagaya Website (Responsive)

Screen Shot 2015-04-03 at 12.20.41 AM    Screen Shot 2015-04-03 at 12.20.57 AM

Resposive Web Design (Related):

HiRes    5

Articles on Responsive web design (Written):

An article that discusses important the principles of effective web design: http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

A page that provides helpful tips on responsive web design: http://www.seesparkbox.com/foundry/responsive_web_design_tips

Japanese restaurant website (Related):

I searched Japanese restaurant websites but do not think the mood of the designs match well with Batten’s. The designs I saw all seemed very high class and expensive. Batten’s atmosphere is more casual and fun. I hear a lot of stories from my sisters about the customers that go there, and many of them are young, families, couples, or office workers on their lunch break who go alone, or in groups with friends. It’s a very casual and laid-back restaurant.

Taste-of-Japan-Restaurant-Food-Wordpress-Theme     11b1fe_dcd72efbbe45ee808da4470607577d74.png_srz_810_462_85_22_0.50_1.20_0.00_png_srz

Restaurant Website (Related):

I also searched American restaurant websites for inspiration. I specifically searched TGI Fridays, because I feel like Batten Ramen has a similar atmosphere, it’s not as busy and popular, but it’s casual, and fun, and a nice place for a family with children to go.

BEL 50 - Chicago Restaurant    geogeske

Screen Shot 2015-04-03 at 12.56.10 AM    Screen Shot 2015-04-03 at 12.56.22 AMScreen Shot 2015-04-03 at 12.56.40 AM

Japanese Art (Inspirational):

I looked up Japanese woodcut and art for color inspiration. Batten Ramen also had a lot of Japanese posters and woodcut prints on their walls to give the restaurant a nice “Japanese” atmosphere. Batten’s interior has a lot of red, brown, and off white. But my professor mentioned that the colors seemed too, obvious(?) which I understand. Batten’s workers used to wear navy blue uniforms, but recently changed to maroon. Hmm, yes choosing a color scheme will be difficult.

Toshidama Gallery    Torii_Kiyomasu_-_Ichikawa_Danjuro_I_in_role_of_Takenuki_Goro

Kyushu (Inspirational):

Because there are so many ramen restaurants in the area, I think one thing that may be good for the small business, would be to emphasize is that it’s business and food are both managed and cooked by a Japanese man, and that the food is made in the Kyushu, Kumamoto prefecture style.

I watched some short videos and readings on Kyushu. It is a region of Japan that is not well-known to many foreigners. It is an area of Japan that is most like the old Japan, with not many tall buildings and noisy traffic, but a lot of nature and country side. My mother grew up in Kyushu, Oita Prefecture! 🙂

Short video on Kyushu: https://www.youtube.com/watch?v=3yxNpECtEnA

Kimono and Obi Colors (Inspirational):

I have a hard time with colors. My professor mentioned that Red and white is too obvious for Japan, so I looked up some other color schemes that may often be used in the culture for inspiration.
my_blue_houmongi_kimono_and_obi_taiko_style_by_seawaterwitch-d6gked4 1281338849153_us-myalibaba-web6_499


Web Design Re-design Project: Two Individual Page Designs

The first page I designed was the user account homepage. The gray bar at the top would be a customizable banner where users can choose to upload their own banner photos, a feature that adds more personalization and fun to the overall EasyBib experience. Underneath the banner is a secondary navigation bar that will allow users to navigate around their account. The activity feed and view toggle bar is located directly below it, and on the right is a list of popular and favorite tags from the user. Visitors can click on the bolded source titles that is listed in the activity feed. This will take the user to that sources general information page.

The second page I designed is the user account “My Bibliographies” or saved bibliographies page. This page allows users and visitors to see the account user’s past bibliographies. Users have the option of editing, deleting, and download citations for the bibliography, or clicking on the bolded source titles to be directed to the source’s general information page. There is a view citation in orange that allows users to toggle between viewing options. Some users may prefer to the see the actual citations of the sources, or some users may want to see the actual sources. Users have the option of adding tags to their used sources or bibliographies for easy organization and searching. On the right of this page is the list of past bibliographies made by the user.

Print       Print

Next Step: Work with the group to create 7 web page designs that flow as one and have a consistent look and feel!