Nicole Francesca

Blog

Website Redesign

For my Interactive Information class we are picking individual websites to completely redesign. For mine I found this gem: 

Screen Shot 2017-05-14 at 7.23.51 PM.png

Oliva Cafe is based in Bethlehem, CT and although I haven't been there. It looks like a place to get a lovely warm Italian meal with friends and family (well on the inside). The website though screams, cheap, inconsistent and forgotten. But I wanted to take on the challenge. 

The first found of business was creating the sitemap. After a few tries here is where I am at, especially doing a detailed non-traditional (visual) site map: 

  • Header
    • Hero photo on each page
    • Link to reservations
    • Logo
    • Top navigation 
  1. Home (Template A)
    Main Message: Fresh Italian Food, Experience The European Countryside
    1. Photo of food… Olives? Oliva = Olive in Italian
    2. Short Explanation of Chef Area, with photo of food (link to About)
    3. Short Explanation of food Service (link to About)
    4. CTA: Make A Reservation: Reservation table
      1. right has hours and contact
      2. left (larger) and has a table to input date, time, number of people (will link to the reservations area to give full details and options
    5. CTA: Buy A Gift Card Short blurb about buying an experience  (link to giftcard page)
    6. Have photos of events and holiday services, short blurb linking to services
    7. Blog area with previews of articles
    8. Have basic info at the bottom of the page (maybe map or background picture of the area)  
    9. Functionality notes:
      1. Make reservations field typeable and able to look up dates/times/conflicts (probably need java if was to ever be coded)
      2. Have everything have a blur focus when highlighting
  2. Menu (Template B)
    1. Make Menu Consistent and one page/one section
    2. Menu header (include photo of food, experience taste of a different part of the world)
    3. Menu area (static or have delayed motion when moving down the screen)
      1. Appetizers Area
      2. Pizza Area
      3. Entrees Area
      4. Sides Area
    4. Blurb about Services, blog and CTA Reservations (each linking to their respective pages)
    5. CTA Giftcard area full width area before footer (linking to giftcard area)
    6. Services area (just featuring short description linking to services page)
    7. Functionality notes:
      1. Have pictures appear when scrolling, have blurring focus on the CTAs and links to other pages
  3.  Reservations (Template C)
    1. Reservations header: Have photo of either fresh food or a gathering of happy people enjoy food)
    2. Reservation table
      1. basic info such as hours and contact on the left hand side
      2. have right side table to input date, time, number of people will open up below t table showing results (need java or some kind of plug in if ever coded (open table?)
    3. CTA: Buy A Gift Card
      1. multiple photos, have wording coincide with reservations. (link to giftcard page)
    4. Have photos, descriptions and links to services, menu and about pages.
    5. Basic info such as number, info, address with full width photo or map.
    6. Functionality notes:
      1. Have pictures appear when scrolling, have blurring focus on the CTAs and links to other pages
  4. Services  (Template D)
    1. Services header: have photo of serving food? Or large party
    2. Have description of Events area with link to contact page to arrange
    3. CTA: Make A Reservation Have description of Holiday reservations and link to reservations page
    4. Area relating to menu, blog and press (tie into services page) linking to the respective pages
    5. Functionality notes:
      1. Have pictures appear when scrolling, have blurring focus on the CTAs and links to other pages
      2. User feedback for when purchasing a gift card (popup)
  5. Gift Certificates  (Template E)
    1. Have functional shop area. Add description about giftcard.
      1. Have quick options for amounts ($25, $50, $100).
      2. Have email type area.
      3. Button to submit with feedback notification/popup.
    2. Make A Reservation
    3. Link to Menu (link and photo)
    4.  Functionality notes:
      1. Have pictures appear when scrolling, have blurring focus on the CTAs and links to other pages
      2. User feedback for when purchasing a gift card (popup)
  6. About  (Template F)
    1. Header photo: Cooking or preparing food
    2. Brief blurb about the restaurant
    3. About and sections will be static
      1. About chef section
        1. West African roots
        2. Influence by Italian cuisine
        3. History of restaurant
      2. About food section
        1. Oliva = olive in italian
        2. Preparation and ingredients
        3. Influences
      3. Location area
        1. Bethlehem, CT
        2. How the area is transforming into a food destination
      4. Menu area with explanation of food and link to menu page
      5. Blog area samples and link to blog page
      6. CTA: Make A Reservation
      7.  CTA: Buy A Gift Card
      8. Functionality notes:
        1. Have pictures appear when scrolling, have blurring focus on the CTAs and links to other pages
  7. Press  (Template G)
    1. Header: picture of food or someone enjoying food
    2. Have picture of magazine with sample article and text about the press statement - surrounding text blurry. Pictures will load as the user scrolls down the page (if ever coded). Total of 3 press releases
    3. Have table for reservations (link to reservations)
    4. Have gift card area  (link to  gift card page)
      1. Have pictures appear when scrolling, have blurring focus on the CTAs and links to other pages
  8. Contact  (Template H)
    1. Header with warm environment photo or cooking food? Or waiter?
    2. Have text below with contact info (phone number, address, hours)
    3. CTA: Make A Reservation: Reservation table linking to reservation page
    4. Services section with events and holiday photos linking to services page
    5. CTA: Buy A Gift Card: full width gift card section linking to gift card page
    6. Area featuring menu blog and press (linking to respective pages
    7. Functionality notes:
      1. Have pictures appear when scrolling, have blurring focus on the CTAs and links to other pages
  9. Blog  (Template I)
    1.  Blog list page with different previews of blog post
      1. Header  of fresh food or within a restaurant setting
      2. Posts with photo, time, date and descriptive text
      3. Menu photo with link to menu and descriptive text
      4. Reservation table leading to (linking to) reservation page
    2.  Blog page - header reminds the same
      1. Title date with descriptive text, photos as, more descriptive text
      2. Bottom will have more blog posts to view
  10. Giftcard  (Template J)
    1. Header of diners enjoying food.
    2. Large purchase area of having  amount, email form (need possible java to fill in)
    3. Must have pop up feedback for user
    4. Menu, reservations and blog section linking to each
  • Footer
    • Basic contact info: Address, Phone Number
    • Logo
    • Social media buttons: Facebook
    • Email newsletter sign up.
    • Functionality notes:
      • Have Facebook appear on separate page

As a note CTAs mean Calls To Actions. 

Now that the sitemap is done. Its time to do the wireframes (I have been updating as I do the wireframe because then I see visually how things are flowing and then rearrange the elements as needed).

Now on to the mobile wireframes! 

Continue onto part 2 for more about the redesign.