Revenue
1% Increase
Sampino's Restaurant Website Redesign
Implementing a reservation system and redesigning the website to enhance user experience and engagement.
My Role
Product Designer
Developer
Videographer
Product Designer
Developer
Videographer
Timeline
Jun 2023 – Sep 2023
Jun 2023 – Sep 2023
Skills
User Research
End-to-End Product
Interaction Design
Wireframing & Prototyping
HTML & JS
End-to-End Product
Interaction Design
Wireframing & Prototyping
HTML & JS
Website LinkJoeMarty's.com
CLIENT & PROJECT CONTEXT
Creating a user-friendly website with a focus on an intuitive reservation system for Sampino's, a locally renowned restaurant.
What Was Sampino's Need?
Sampino's required a website that showcased its offerings and streamlined the booking process, enhancing usability for an older demographic and boosting customer engagement.
My Role
I focused on integrating a user-friendly reservation system. My approach included user research, prototyping, and usability testing to ensure a functional and engaging website.
Key Performance Indicator
Results of the Redesign
The redesign of Sampino’s website not only improved the user experience but also delivered measurable business outcomes, surpassing initial goals (measured over 1 year):
Final Design
Delivering a User-Centered Experience
The final design for Sampino's website successfully addressed the key user pain points while aligning with the restaurant’s brand identity.
Through consistent application of UX principles and thoughtful design decisions, the website now offers an intuitive and visually appealing experience.
Through consistent application of UX principles and thoughtful design decisions, the website now offers an intuitive and visually appealing experience.
Reserve Online
Users can now reserve a table online
Mobile Optimized
Responsive and Optimized for mobile easy use
THE CHALLENGE
Preparing the Website for a Reservation System
Sampino's existing website lacked an easy-to-use reservation system and faced several key issues, including:
Usability Issues
Navigation was confusing, making it difficult for users to find critical information like menu items and contact information.
Accessibility Issues
The site was not optimized for older patrons, with small text and low contrast that hindered readability.
Mobile Optimization Issues
The website was not mobile-friendly, limiting access to 70% of people who viewed the site.
UNDERSTANDING THE CHALLENGE
Uncovering user needs and client goals.
To redesign Sampino's website effectively, I conducted user interviews and analyzed data to uncover key pain points and opportunities for improvement.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Users want...
Users wanted a simpler, more organized layout with larger text, faster load times, and an easier way to make reservations online.
Stakeholders wished...
For a digital experience that reflected Sampino's brand, helped retain existing customers, attract new customers, and a reservation system.
User Needs Reflected in Data
User feedback revealed major issues with navigation and mobile usability, which were reflected in the website's performance data.
The 82% bounce rate highlighted how users struggled to find key information, often resorting to phone calls due to unclear navigation. Mobile users, who made up 70% of traffic, faced additional frustrations with small fonts and slow load times.
The 82% bounce rate highlighted how users struggled to find key information, often resorting to phone calls due to unclear navigation. Mobile users, who made up 70% of traffic, faced additional frustrations with small fonts and slow load times.
THE BREAKDOWN
Issues with the Old Website
The outdated design, poor navigation, and lack of mobile optimization contributed to a frustrating user experience. Below are the key problems that were identified:
Overwhelming and Unfocused Layout:
The homepage contained a mixture of testimonials, images, and operational information all jammed into one screen, with no clear hierarchy.
Low Visual Engagement:
The design elements did not reflect the high-quality dining experience that Sampino’s wanted to convey.
No Engaging Content
More engaging content must be needed so the user wants to return to the website.
Hard-to-Read Menu
The menu page had a black background with small-grey text, making it difficult to read—especially on mobile devices.
.png)
.png)
.png)
Lack of Mobile Optimization
The large images and small text sizes did not adjust well on mobile screens, leading to poor readability and navigation.
With 70% of users accessing the site from mobile, this was a significant issue.
With 70% of users accessing the site from mobile, this was a significant issue.
SOLUTION IDEATION
Aligning User Needs with Redesign Solutions
After identifying the key challenges from user feedback and data analysis, I developed solutions that address each pain point, focusing on improving the overall user experience.
Clearer Layout and Simplified Navigation
By decluttering the homepage and making essential information (hours, location, and contact details) prominent, users will spend less time searching and more time engaging with the site.
Reservation System Integration
I will implement a reservation widget ensuring users can book a table with ease, while also aligning with the stakeholder's system choice.
Mobile Optimization
The redesigned website will be fully responsive, with larger fonts, faster load times, and optimized content for mobile users.
Modernized Visual Design
A cleaner, more visually appealing design will be introduced, featuring high-quality images and branding consistent with Sampino’s identity.
Visualizing the Redesign
Lowest of LoFIs
These wireframes focused on organizing content, ensuring clear navigation, and prioritizing key user actions, such as making a reservation.
Highlighting UX Principles in Mid-FIs
The redesign of Sampino’s website was guided by core UX principles aimed at improving usability, accessibility, and user satisfaction.
Hick’s Law
To reduce cognitive load, the homepage layout prioritizes only the essential navigation options.
Miller’s Law
To avoid overwhelming users, the reservation form only asks for essential information.
Visual Hierarchy
A clear visual hierarchy was established to prioritize the most important elements, like the reservation form, which is has its own page.
Accessibility
The wireframes emphasized large, easy-to-read fonts and high-contrast elements to cater to an older demographic.
Aesthetic-Usability Effect
The minimalist, clean design of the wireframes enhances the user experience by presenting a visually pleasing interface.
Thumb-Friendly Design
Recognizing that users typically interact with mobile devices using their thumbs, critical elements such as the Menu, Reserve, and About Us buttons were strategically placed within easy reach in the middle of the screen.
Readability
Since mobile screens are smaller, readability was a top priority. Text was set in large font sizes, and sufficient white space was introduced between elements to avoid crowding.
Implementation
Design Constraints
Reservation Embed Widget
The restaurant's reservation widget was not customizable, limiting its aesthetic appeal. Though it isn’t the most user-friendly, it fulfills its primary function and will be updated in the future.
CMS
The site was built using Wix’s CMS system, which allowed for easy handover to the client but lacked flexibility. This required adapting certain aspects of the design to fit within Wix’s constraints.
Final Design
Delivering a User-Centered Experience
The final design for Sampino's website successfully addressed the key user pain points while aligning with the restaurant’s brand identity. Through consistent application of UX principles and thoughtful design decisions, the website now offers an intuitive and visually appealing experience.
Reserve Online
Users can now reserve a table online
Mobile Optimized
Responsive and Optimized for mobile easy use
Reflection
Insights Gained Through the Redesign
Prioritizing User Needs Over Aesthetics
Addressing issues like accessibility, mobile optimization, and navigation clarity had a more profound impact on the user experience than purely focusing on aesthetics.
Client Communication
Working closely with the restaurant’s stakeholders taught me how critical clear communication is to project success. By maintaining an open dialogue and sharing progress throughout the design process, I ensured that the final product aligned with their business goals while addressing user needs.