Black Oak on Fifth
Responsive web redesign for a local, family-owned Italian restaurant
Role
UX/UI Designer
Timeline
70 hours over 4 weeks - March, 2025
Restaurant goers in Park Slope have no shortage of dining options
Black Oak on Fifth is an Italian restaurant in Park Slope, a Brooklyn neighborhood spanning only about 40 city blocks and is home to 265 total restaurants of which 38 are Italian. Suffice it to say, the competition is stiff. And that’s just taking into consideration the competition at an extremely local level. Brooklyn is home to about 8,500 eateries and across the whole of New York City there are a whopping 28,000. So how does someone go about choosing a place to eat?
Diners need to be able to quickly access the information they need in order to make a dining decision
A restaurant’s website is often their first point of contact with a potential customer. Whether they are looking for a menu, operating hours, reservations, specials, or photos, they want to be able to find that information quickly and easily. A website with poor structure and outdated, missing, or unintentionally misleading information can cause confusion and with so many other options nearby it’s understandable that the diner may simply choose to avoid the frustration and move on to the next place.
So, how might we create a web design that helps local diners easily find all the information they need to make an informed dining decision while encouraging them to ultimately choose Black Oak on Fifth?
Before starting to design an updated site, it was important to perform a heuristic evaluation of the current site
Major issues were identified with accessibility, button functionality, and the hierarchy within the menu
Black Oak’s existing website is challenging to navigate due to some hierarchical issues, and also does not meet accessibility standards. It is likely that these challenges and more are dissuading people from making reservations or even visiting the restaurant at all.
Severity Rating
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: fix if time is available
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, given high priority
4 = Usability catastrophe: fix this before product can be released
The most pressing issues helped shape the roadmap for our redesign
Highest
Accessibility issues due to design and contrast
High
Broken buttons and links
High
Lack of content hierarchy in the menu
High
Images do not accurately represent the restaurant
We needed to understand potential patrons’ needs and goals when visiting a local restaurant’s website
Research Objectives:
Understand the main goal people have when accessing a restaurant’s website
Understand when and where people are accessing restaurant websites
Determine what sticking points would cause someone to abandon the site and look for a different restaurant
Conducting interviews to dig into user thoughts and behaviors
Interviews were conducted with 5 people who are resident of a major metropolitan city who enjoy dining out and trying new places.
All 5 participants I interviewed starts their search from maps app
All 5 participants agreed that their main purpose for visiting the restaurant’s site is to look at the menu
3/5 participants noted that they were often also focused on figuring out the ambience and the overall experience they can experience when visiting the restaurant
All 5 participants go directly to the restaurant’s website in order to make a reservation
4/5 participants specifically mentioned that authenticity in photos is of upmost importance
User Interview Results
“I just want to be able to find everything I need in one place - I get frustrated if I have to go all over to see pictures, find the menu, make a reservation, etc.”
“I’m trying to get a full sense of what my experience will be when I go there. It’s not just the menu, I want to know what to expect from the vibe as well.”
“If I go to a website and it’s confusing or looks like it was just slapped together I’ll move on to the next place because that seems like they don’t care at all”
Interviewing the owner provided additional information about business goals and website features important to her
Currently, her main priority is to increase the number of reservations
She would love to emphasize their happy hour to draw more of a crowd
Hard set on sticking with a black and white theme
She needs a section for weekly specials that she can easily update each week
Collecting quantitative data at a larger scale to better understand the interactions people have with restaurant websites
Survey was conducted via Google forms and consisted of 102 participants who self-identified that they live in a mid-sized city or larger. Having such a large pool of responders allowed us to comfortably come to conclusions about the general public.
Survey results painted a clear picture of how users are accessing restaurant sites and what their first steps are when they get there
What type of device are you usually accessing a restaurant's website from?
When you find yourself on a restaurant's website, what is usually your main purpose for visiting the site?
When you land on a restaurant's website, what's the FIRST thing you do?
In regards to the menu listed on the website, what is your preference for how it's laid out?
Based on the data gathered from the interviews and survey, certain design needs became immediately clear
Menu needs to be super easy to navigate to from the home page without any scrolling
A menu broken into different sections along with a link to open a pdf menu might be a great way to appeal to most users
Authentic photos of food and the space are important to include
Design needs to be done mobile-first
In order to build a website that meets their needs, we first needed to determine who the user is
Our primary persona is a social foodie who is always on the lookout for great spots with great deals in her neighborhood
Following our customer’s journey highlights some important sticking points and opportunities
Business and user goals align in the desire to foster an enjoyable and memorable dining experience
Wireframes and overall structure were designed from a mobile-first standpoint demonstrating the highest priority features
Site structure was designed to help users complete their task with as few clicks as possible
Drafted wireframes to demonstrate the screens most users are looking for
Brainstorming options for displaying the menu
Brainstorming different layouts for the weekly specials
Sketches of other high-priority pages and elements
Hierarchy and accessibility were top of mind when designing these primary screens. I focused on the main screens my original research showed most people are looking for - menu, reservations, and hours.
Since the owner mentioned that she wants to really focus on increasing reservations, I added a static reservations bar to the bottom of each screen on mobile to make it as easy as possible for diners to reserve their table.
Additionally, I drafted wireframes to show how the responsive design would adapt to the desktop version
Conducted testing with the mid-fi screens in order to determine if there were any points of confusion or disruptions to the user flow
Sessions were conducted with 5 people who live in major cities. I provided them the links to the screens a few minutes before our calls to let them take a look. I then asked them for feedback on the individual pages as well as their opinions on design variations for the header section.
Based on the feedback received in these sessions, the most important iterations and next steps were as follows
Update the header section - all 5 participants agreed they preferred the ones that have both the logo and restaurant name
Adjust the cards for the specials so the pictures are larger
Add a contact form
Follow up with owner to get all of the photos she has available
High Fidelity Mockups
Usability testing was conducted to evaluate the ease of use for the redesigned website
Moderated testing provided results that were overwhelmingly positive with no blockages in the flow, and necessary iterations are simple and straightforward
5 participants were asked to complete a series of tasks using the prototype for the Black Oak Site. These tests were conducted via screen sharing over zoom so I could see where they were clicking, and we used the mobile prototype for the tests.
Find the happy hour menu
All 5 participants took at least one additional step to complete this task
This did not seem to cause any frustration however, merely an acknowledgement that every restaurant site is set up differently so they knew the information might be found in a few different places
Make a reservation
4/5 participants used the static reservations bar at the bottom of the screen. All 5 participants completed the task with no errors or blockages
See if there are gluten free options
All 5 participants ran into issues with this task making it clear that the gluten free options need to be more obvious
Find the restaurant’s hours
All 5 participants completed the task with no errors or blockages
Find the current specials
2/5 participants mentioned they thought the specials might be listed somewhere on the home page but went right to the menu page after a quick scroll
All 5 participants completed the task
Iterations were made to make it easier for users to find important information
It was important to the owner that we emphasize happy hour and testing showed that users would like to see this information on the home screen. This section would also satisfy the owner’s desire for a carousel where she could highlight any special events.
Added a block to the home page emphasizing happy hour
Before
After
Made the gluten free options more prominent on the menu page
Due to constraints from the owner, we could not include any dietary symbols so I made the gluten free options easier to find within the actual menu sections
Before
After
When searching for happy hour many participants went to the hours page first so it made sense to include the hours there as well. For consistency purposes I also added specific hours for the brunch and dinner menus.
Added menu specific hours to the hours and location page
Before
After
Updated the about page to link back to important pages as well as highlight the commitment to serving people with dietary needs and restrictions
The about page was another place people looked for the gluten free options so I added this section. I also added internal links directly to specific menu pages.
After
Before
Comparing the final redesign to the original highlights some of the most impactful changes
Original home page
Design changes and increased contrast make the site more accessible
Original menu
Redesigned home page
Images chosen to more accurately reflect the type of establishment this is
The menu was given a higher priority to help users accomplish their primary goal as easily as possible
Menu hierarchy and navigation established to make it easier for the user to read
Redesigned menu
My challenges and lessons learned
The main challenges I faced with this project stemmed from the constraints of working with this particular client
My client is the owner of this restaurant and she is incredibly hands-on in all aspects of her business. She works 7 days a week in the restaurant itself and naturally has strong opinions on the overall image presented. I wanted to do some work on the branding but she was firm in not wanting to change anything there. She also did not want to change anything about how her physical menus were designed. Additionally, I had a hard time getting assets such as photographs from her so I was very limited in my choices.
This redesign has a future outside of the scope of this project
Initially, the owner and I had discussed having me design the new site directly in wix but after discussing the reality of the future of this redesign, we decided it made the most sense for me to design our ideal solution in Figma first so we could have a sort of north star to guide us when making the actual changes on her actual site. Outside of the scope of this project I will be working with the client to take my Figma design and recreate it to the best of my ability within the constraints of Wix.
My experience designing for this client will help shape how I approach client communication in the future
One of the biggest takeaways from this project is that when working with a client (particularly an owner of a small business who is very emotionally invested in each piece of their business) it is crucial to check in with them often. I spoke to the owner at just about every step of the way, even if it was just a quick 5-minute chat to touch base, and I truly believe this is why she had barely any feedback at the end of the process. I was able to build her trust throughout the whole process, so I didn’t run into any issues where I had to try to sell her on any particular design decisions. This level of consistent checking in will be standard for me for all client communication in future projects.
More of my recent work
-
Expand Social
End-to-end design for an app to help adults meet new people and develop long-lasting, meaningful friendships
-
Libby App
Adding a feature to help users better track their reading and statistics within the app