Vinny’s of Carroll Gardens
Responsive Web Design
^Devs on the left and designers on the right.
(That’s me in the back with the Hawaiian shirt!)
Vinny’s is a classic, family-style Italian restaurant that has been serving its Brooklyn (and my teammate Ajani’s) neighborhood of Carroll Gardens since ‘97 (in the image, he’s on the right in the cool hat). It's a local favorite, with warm service and plenty of options, but its current website doesn't reflect that. We wanted to let people know that it's a friendly and familiar place to eat at and order from through how its website looks.
The “before“ homepage
Adhering to agile methods, we started off by discussing Vinny's as a business, the typical Vinny's customer, and what aspects about the website we wanted to tackle. We agreed that showing off the food and interior should be at the forefront of our redesign because, well, the current photos don't really do the website any favors. We also wanted to make the restaurant’s contact and ordering info more prominent to make it easier to find.
Several rounds of rapid sketching revealed the very different (and impressive!) ideas everyone brought to the table. We focused on creating a fun logo for Vinny's and designing the menu in a no-scroll format because the full website was to be on one page.
We first created user stories to center the Vinny's customer throughout the redesign process, then categorized them by which part of the redesign they belonged to, and finally assigned them points by playing scrum poker to understand their feasibility.
Necessary changes we decided on (based on user stories):
Establish a clear visual brand throughout
Phone number and relevant contact info should be prominent for customers calling for delivery/pick-up
Feature images of interior, guests/diners, and menu items to be visually enticing
Compacted menu so users don't have to scroll down to see the items
Contact form so users can email questions to Vinny's if they don't want to call
Include links to social accounts
We wanted a new Vinny’s logo to be fun and memorable, like our redesign, so we went with a wordmark in spaghetti text. It's similar enough to the current logo, but it isn't glowing or green, and — best of all — it reminds us of pasta :-)
Because we decided to make the redesigned website a single-scroll page (also mobile-friendly), I categorized the website's content according to what would be most relevant to the user (which we decided on when we created the user stories):
Food menu
Compacted the extensive menu with clear categories
Two columns to include pictures of food next to descriptions
Contact info & "how to get there" information
Users would want to call the restaurant for delivery or pickup orders in addition to dining in
Vinny's doesn't take reservations, so I didn't have to consider embedding a reservation system booking feature
About the restaurant/history
Since they've been there for over 20 years, users might find Vinny’s story interesting
Contact form
In case anyone wanted to write them a nice message!
As for the footer, I reiterated important info (opening hours, phone & address, services) so users wouldn't have to scroll back up for it like they would in the “before".”
I also linked their photo gallery and blog, since they exist on the current website (but are not frequently updated). And finally, I removed the embedded Facebook feed because it doesn't show pertinent restaurant info (they post mostly holiday greetings).
The “before“ footer
The wireframe above is what the user would see immediately after the page loads (above the fold). Then, as they scroll down, the menu would come up (and over the hero image), and the circle in the top left would scroll off the screen to reveal the navigation menu at the top.
The “before” footer
The final product
We created our wireframes with Sketch and animated the hi-fi version with Invision Studio. The hand-off to our developers was conducted via Zeplin. The user would see a full-screen hero image of the restaurant when the website first loads, then as they scroll down, the plate in the upper-left corner (with the logo, contact info, and menu) would animate and move upwards to become the top nav bar. Scrolling would also reveal a parallax effect as the content below would move up and over the hero image.
Voilà!
This was a fun project to participate in where seeing all the different sketches from designers and developers alike gave me a new appreciation for a collaborative UX process. Everyone brought their own perspectives to the table, and we were able to effectively narrow our ideas down and work together to make a great-looking and much more user-friendly end product.