Village Green Restaurant

Responsive website redesign to improve its visuals, usability and attract more customers.

Background

Village Green is a New American fine cuisine restaurant located in the historic part of Ridgewood in Northern New Jersey. They serve a la carte as well as tasting menus, and they pride themselves in cooking with the seasons.​ The owner wanted to update his website to attract more customers. I worked with a developer who implemented my designs in code.

The original site used a WordPress template that was not designed for a restaurant, the old site delivered a poor impression and an even poorer user experience.

The site used custom scrollbars of which the restaurants patrons, who were an older demographic, constantly complained were difficult to use.

​After years of neglect the site had many broken links, and a google map that no longer worked.

Mood Board

I created a mood board for the Village Green restaurant project to help me with my design decisions by providing a visualization of the emotions I want to evoke.

It also helped me gather some ideas and inspiration before I started designing and helped me to avoid any misunderstanding that could have resulted from trying to describe a design concept verbally.

The mood board inspires feelings of healthy, green, organic, earthy and clean food in an elegant and quaint setting.

Style Guide

The style guide includes four essential elements, logo, color palette, typography and imagery.

The images in the slideshow, the images of the restaurant, and all the other images that feature prepared foods were taken by myself or the restaurant owner. All other images were sourced from stock photography sites.

User Interface Design
Home
Local Farms
Menu
Contact

Mobile Version: Below are mobile snippets corresponding to the desktop version above. The first snippet shows the expanded hamburger menu. All pages have hot green button for quick actions to make a reservation or call the restaurant.

Home
Menu
Local Farms
Reservations
Conclusion

I learned that it is best to design mobile first and then scale upward to larger screens. I faced many challenges trying to implement some modern css, effects such as parallax do not work well on mobile devices.

I learned that it is very important to know and understand the limitations of browsers and code, not all design solutions can be implemented. There are some restrictions and working with a developer helped me gain some experience in this regard.

View more of my work