Restaurant Website to Re-Design:
Olga's Naturally

What works:

• Restaurant website has nice online ordering system that is custom built for site (the link to online order does not take you to a separate app)
• in this way the menu is very straightforward. Its just the set of pictures for each menu item.
• When you cick the picture it takes you to a page where you can add options and click add to cart. When you click add to cart, website goes to shopping cart page where all your chosen items are listed. The next page asks for billing and address information, with all proper validation controls.
  --site is straightforward and funcitonal. Restaurant number is listed at top right on all pages.
  --refreshing that site does not need a fancy slider as homepage. It is just a large static image of a meal.
  --the design of the homepage is clearly about the food: all we see is mostly nice food images and there is very little text. The homepage makes the restaurant seem great for anyone who is hungry and wants something that is good. Accessible.
  --Consistent colors: green and white background, with white and light green text, light green menu drop downs with dark green text for menu categories. Each section's content is over a background chunk of light green. Yellow as an accent. Logo color goes well with navigation link colors.
  --good use of footer space: Contact info, one review, My Account options, catering and regular menus
  --very nice and functional map

What is weird:

• The About text underneath homepage image could look better. It is centered and spans the whole horizontal length - this might be re-worked.
• The images in the gallery just move you back up to the homepage banner image, when clicked. It would be nice if a window popped up with a larger image. Either that or do not make the images clickable. Or simply put a slideshow in its place.
• none of the header images for the different sections are responsive (homepage, About, Testimonials and Map)
• Awkward that the homepage navigation links take you to separate pages. Maybe the website should be a one page website instead, with internal links.
• Not so much a fan of the text that spans a length much wider than the section image that preceeds it. Can this be re-worked?

New Directions:

• making the website a one-pager will "update" and make it more modern looking.
• possible gallery instead of static image for homepage. Needs responsive section images
• gallery should either work or not be there
• The menu is very straightforward and emphasizes a "Get in get out feel", since its pictures of food with the item's title and price - and you go to a different page for its description, where you can add it to Cart. I would like to see a menu that is written out with no pictures, and a separate menu that can include images that would be the online ordering menu. I feel that a menu with no food images (just graphics AT MOST) would fit in better with my idea for re-branding and re-designing this restaurant.
• possibly including social media links (this site doesn't have them)

Business goals for site?

• more customers? The restaurant definitely wants more vegan customers. When you do a google search for the restaurant, its heading is "Olga's Naturally: Mexican + Vegan". Although, the logo on the site itself does not include the word vegan. The site simply preceeds some menu item names with the word "vegan" and includes "plant-based" in some of its text content.
• increase catering? The site does have a catering page. It does not include text content to preceed the actual items available for catering. The site might benefit from some flashy heading and content that advertises the restaurant's catering chops.
• who is Target Audience? Probably people somewhat on the go, aged 18-36 with an interest in natural, healthy, plant-based and vegan eating. Obviously, also for people who hanker after mexican food. They probably attract Los Angelenos of various ethnicities, since Los Angeles is an ethnic place. Their food is reasonably priced. So the target audience probably includes lower to middle class people, or just anyone who isn't looking for super fancy high priced food. They also attract people on the go -- their online menu is very "get in get out"! There is minimal text content. The focus is on the food. I would like to tweak the target audience for this restaurant, in fact, because I want to re-style and re-brand it to make it a more upscale latin vegan restaurant with a more minimal website design. Also this restaurant is for both meat eaters (with an interest in healthy eating) and vegans and vegetarians. I would like to make it purely vegan and vegetarian. Actually one of the restaurant reviews on the site probably describes its target audience pretty well: "Good Quality food in the hood! You only have a few! The food they put in the hood is toxic poison. Purposely....Choose Wisely!"

To complete project what questions should be answered?

• Will site have a food gallery, or just a image slider. Where will the slider be located? Homepage or further down? How good is the quality of the images that will be used? How much work will it take to find, choose, crop, resize, and optimize the images? How much work is it to include in the code different versions of the image to be used at different browser sizes? What elements can be animated to attract the viewer? WHAT COLOR SCHEME DO I WANT?! Will not designing a logo but keeping it text save me time?
• HOW WILL I FORMAT THE MOBILE SIZED FOOD MENU? Which plugin will I use for that and will I be able to get it to work? How do I get the plugin for the mobile sized food menu to work, and prevent the plugin from taking effect once the screen is larger than mobile sized?
• For larger screen sizes, how do I code a menu like Au Lac's, where the menu links are at the top of the food items, and horizontal? Does it need javascript or jquery code?
• Would I have time to play around and make a tiny online food ordering page?
• Will working on the project be reasonably entertaining?

What tasks must be done?


--I need to have a functional map.
--I want to have a javascript nav bar that morphs into static strip once viewer scrolls down.
--Want to have hamburger menu for mobile size
--Need animation on a few site elements
--Think about whether site benefits from having interesting geometric border patterns anywhere, to emphasize latin food theme.
--Buttons for "Online Ordering" and other tasks must be MADE
--Buttons need hover effects. Links must work. Logo must take you to homepage. Nav links should be internal for one page site.
--pick two different fonts
--pick colors to be used and make sure use is consistent and logical. Design for good contrast.
--format text so that it is readable on different screen sizes -- and not too big and not too small.
--make sure that text wraps and resizes appropriately across different screen sizes. --want whole thing to be magic (responsive.)

What issues must be solved?


--limited working knowledge of javascript/jquery. I took CS54 and CS80 and CS7 but do not have experience actually putting my knowledge to use within a project. Many things could go wrong.
--need contacts within web development community.
--need to pick up speed with which I complete individual projects!

What is our schedule?

My neighbors are disruptive. Sometimes, the time I have to spend dealing with their antics detracts from the amount of time, and quality of focus I can give to my at-home coding work. If I am unable to concentrate at home, I have to move my work materials to a different location. I must make sure this location has everything I need and that I properly account for materials-gathering time and transportation.

COMPETITOR WEBSITES

AULAC -- aulac.com

• visual design:
  I really enjoy the visual design of this site because it is very classic and elegant without being overly fancy.
• content:
  There are very nice and stylized food pictures. The pictures resize and are responsive. They are grouped and colored appropriately. The colors of the photos go well with their surroundings.
• call to action on homepage:
  The main call to action is the full screen slider that displays the beautiful images. After that, the About Us section (with more cool pictures) and History section really entices the viewer to come into the force field of the restaurant.
• navigation:
  very straightforward, just two horizontal lines of nav links overlaid on the slider, at its top. Right underneath a centered logo. Links change from white to orange upon hover. Slider does cool javascript effect -- when viewer scrolls down it morphs into a static black bar of nav links that stay at the top. Nav becomes hamburger icon at mobile size, and clicks out to full screen vertical nav.
• functionality:
  awkward placement of "Reserve a Table" and "Order online", to left of page. Lots of space on right, with nothing. I would at least center.
• elegant but still very standard meat and potatos functionality. Old school site. Gives information necessary for both Los Angeles and Orange County locations (menu, map, contact). Online ordering is good functionality -- but its an app that takes you to a different site. I like the regular non-online ordering menu for L.A. -- it is responsive and laid out well. I like the category links that horizontally span the top of the menu section. I can't find a reason for the different Orange County menu formatting other than for the sake of visual variety. Unlike my chosen restaurant Olga's Naturally, the feel is much less get up and go and more elegant.
• community building: has social media icons on footer. Not overly emphasized because its not at top of site, but present. Facebook site has lots of information about in-restaurant events.

SeaBirds Kitchen -- seabirdskitchen.com

• visual design: Very similar to Au Lac (they are both squarespace). One page website, traditional but elegant. Centered logo atop a set of horizontal navigation links stationed at top of a large homepage image. Different from AuLac though because this image is static and is not part of a slider. They re-colored it to be dark so that the overlaid text "SEABIRDS KITCHEN" stands out. Nav link color on hover matches logo colors and "SEABIRDS KITCHEN" colors. Same green used as accent throughout, in small headings and also in the footer.
  I like how the brunch menu has a different background coloring (from a darkened photo) than the regular menu section. AuLac could have done this but instead it simply has a different formatting for menu #2.
• content:
  I like the content and the formatting of the "About section". I also like how there is no word "About" in the heading -- the section starts with a sentence in large font and then contains a "Plant-based, organic and seasonal" subheading above the text content. The formatting is nice - aligned to the left, while the site makes good use of space by aligning location and hours information to the right. Unlike AuLac, the "Order Online" button is not akwardly placed. It is a simple no frills text button centered in the middle of the page. Following this is a nice image slider.
• call to action on homepage:
  Unlike AuLac, Seabirds decided to have a static image on the homepage area, which invites the viewer in more in the way a movie poster or movie preview announces a movie. The image includes the name of the restaurant. Underneath the image they have a heading that announces that the food is plant-based, organic and seasonal.
• Seabirds includes their image slider later in the content and I can see why. Some of the images in their slider are small and they divide the screen into three parts. I think the images they had were not as carefully thought out as AuLac's, so it makes sense to put them later, after other content, where they are not as well noticed.
• navigation:
  Nav is like Aulac in that the nav bar morphs into a static strip that stays at top of website when you scroll down past the homepage image.
• functionality:
  right-most nav link "Order Online" comes automatically highlighted in green. Although the restaurant site has a classic more slow-going look, you can see that they do have their emphasis on online ordering so they are about getting people in and out. The order online button when clicked causes a Chow Now app screen to slide in from the left, while the entire site page dims.
  The menu section does not contain horizontal links across the top for each menu category like AuLac. The categories are simply headings that appear one after the other, with the menu items themselves in between.
  Location information is repeated lower down in page, with additional parking information added. Map appears to right. The second location's information follows that, with map appearing to left and location to the right (the switch adds good variety.)
  Media icons at bottom of site above footer. Footer does not contain content!
  Unlike AuLac, this restaurant does focus on catering. It has a section with informal enough heading "We Cater!" with nicely formatted text alongside images that are well placed, and a link to "View Party Menu Here".
• community building:
  social media icons at bottom, before footer.

Gracias Madre -- graciasmadreweho.com



• visual design: What I like most about this website is how it is very earthy. The geometric shapes border around the entire webpage is very earthy and assuring. Its colors are also earth toned so it emphasizes the food as coming from the land. The site has a simple logo "GRACIAS MADRE" on top of the nav links, so the designer did not have to do anything fancy to get a nice "logo".
• content:
  The "About Us" section includes Mission and Story, which is okay, but the content does not seem as interesting and relevant as that which I've seen on other restaurant sites. For me there is too much focus on who the chef and beverage director is (their picture and bio). That's something I don't care about.
• call to action on homepage:
  Full screen slider that displays three images. After that the call to action is weak -- the text content is uninteresting and there are no more food pictures to entice.
• navigation:
  very basic horizontal line of nav links, right underneath centered logo. In addition to the standard set of links, nav includes links for Private Events, Reservations, Gift Cards, Delivery, and Blog.
• functionality:
  site focuses on this restaurant as a venue for bookings. Job opportunities link seems to high up in content -- I'd prefer it in the footer. Food menu is responsive and resizes nicely. Food menu mealtimes included at top within a drop down (breakfast brunch lunch dinner). At mobile size the menu's categories (Starters, vegetables, Tortas, Bowls) turn into drop downs -- click the upside down carrot to get the menu items in that category.
• community building:
  has social media icons at top of site, to the left. They have a large following on instagram. They also have a blog, but it is extremely commercial.