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

Kimono_backshot_by_sth_der

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!

Web Design Project 1: Re-design Homepage Design

Each group member was required to design two versions of the homepage based on the homepage wireframe we worked on together.

My first homepage design looks very similar to the current EasyBib website homepage. For my second version, I thought I would try using photography as the primary type of imagery.

Website_wireframe       Website_wireframe

Many of the students seemed to like my first design over my second. After the classroom critique, our professor suggested a group member and I combine our designs to create a new one. My design had an over all finish and mood the class seemed to like, but my group mate’s designs had a nice user flow and more hieararchy. Our professor also recommended that we find a specific illustration style to use for our vector images, because at the time, they looked too much like stock images and internet clip art, which is never really a good sign!

I took the responsibility of re-designing the new homepage. The result looked like this:

homepage_refine

My group members liked the vector illustrations very much. It is still in it’s rough stage at this point. With further refinements, the homepage became something like this:

homepage_refine

We decided to orient the homepage vertically to show the footer. I like how the homepage came out overall. One of my group members is very particular about alignment and details, and she respects my opinions, so I enjoyed working with her. Next step… To design our own pages!

Web Design Project 1: Re-design Moodboard

Park-Moodboard

In my moodboard, I wanted to appeal to students, and communicate that learning and education is fun, enjoyable, and could be made easy. I included some color swatches I thought we could use in the re-design, I also included some images of clipart that might direct viewers towards the style of imagery that would be used on the re-designed website. I also included images of student who are enjoying learning, working in groups, or researching.

I think I received positive feedback about the overall mood of my moodboard, but I was told, and I realized that there was a divide between the two types of imagery, the photographs and the clipart images. I did realize it while I was designed the moodboard, but I felt that if I included too many photos, it would seem like EasyBib would be a photo-imagery based website, when actually, it is not. Our new moodboard combined some of the photos from my moodboard, with the color swatches, text choice, and design of another group members’.

Web Design Project 1: Re-Design Wireframes

For the re-design group project, I designed wireframes for two pages under the accounts tab on our newly designed Easybib website.

The first page, The user account homepage, is based off the design and functions of the account homepage on YouTube. users will be able to view their most recent activity, such as their likes, bookmarks, and cited sources in a list. There will be a drop down bar above the activity feed that will allow users to limit their feed to either likes, comments, bookmarks, or citations.

wireframe_1

The second page I designed wireframes for is the user account “My Bibliographies” page. This page will show users all their past works and bibliographies. This feature was already available in the Easybib website, but we changed up the design and flow of it to match Bibme’s “My Bibliography” page. We also added sharing features, similar to Youtube. On this page, users will be able to re-open and edit their old bibliographies, give tags to their bibliographies and sources for easy organization and searching, choose whether to publicly share their bibliographies or keep them private, and copy&paste or download their bibliography into their computers.

Website_wireframe

Web Design Project 1 : Re-Design Project Brief & Sitemap

Project Brief:

The core website we will be re-designing is easybib.com, a popular automatic bibliography and citation generator site. The analogous website for the re-design will be bibme.org, which is another research tool site that is very similar to easybib, but more simplified and straightforward. The disruptor site will be YouTube, a social media website where users comment, share, and like videos and create personal playlists.

The target audience for the new website will be students. Our goal with this re-design is to create a website where users can easily search, save, create, share, and source credible sources and bibliographies for their research assignments and essays. No more long hours of researching obscure sites and sources for research, students can search and find materials used and recommended by other users and easily save, use, and share them on the re-designed easybib site.

Each source and bibliography will have it’s own page with a short description of the source, number of times it has been used, and comments from other easybib users. Other new page features include showing popular research topics specific to that month, i.e civil right movements and leaders during black history month, as well as noted trends in what other Easybib users are researching.

On the re-designed website, users will be able to search through shared-bibliographies created by other users who worked on similar topics as them, this feature is similar to how users can search both videos and playlists on a Youtube search. With this added feature, users will easily be able to discover new credible sources used already by multiple users. Users will feel like they have a head start on researching because a lot of the research will be done already.

We will be combining Bibme’s simple and straightforward bibliography building and keyword tagging features, and Youtube’s community features, such as liking, commenting, account pages, and sharing, in order to create a more organized, interactive, and fun online.

Re-design Sitemap:

Print