Redesigning a website for a pop-up restaurant
Web Design
Working with a client to redesign the website for their pop-up restaurant with the primary goal of getting users to book reservations, along with showing a menu, photos of their food, and an about section.
Timeline
Winter 2022 - 2023
Company
Chez Nous NYC
UX/UI Designer. Research, wireframing, prototyping, visual design
My role
Tools used
Figma
Chez Nous is a pop-up restaurant in NYC providing a full-course meal with wine and cocktail pairings, marrying Michelin experience and technique with state-of-the-art culinary tech. The dinners are hosted every few weeks, being announced primarily through social media and word of mouth. Only operating a few days a month by a handful of individuals means their reservation booking system is extremely important to the success of this endeavor. My main goal for this project was to make sure the reservations flow was easy to use and accessible for users while making the site as a whole fit the restaurant’s hip New York culinary experience.
Define & Design
Defining the problems of the original design that needed addressing, according to the client and user testing, as well as my solutions to these problems.
Existing Site
1. Landing Page
Starting with the logo, the client needed one that would fit their brand and work long-term. They had been changing the logo font, icon, and format every few weeks prior to this redesign.
The “reservations” navigation item does not stand out among the other buttons even though booking reservations is the client’s primary goal for the site.
2. Reservations
The navigation on the pages outside of the landing page all used this design, where the logo was very large in comparison to the navigation and didn’t follow conventional formats which could disorient the user.
3. Photo Gallery
The biggest issue with this page was the lack of contrast between the directional buttons on the images as well as the contrast between the background color and the images themselves, most of which were taken during a dinner service with low mood lighting on a dark tablecloth.
4. Menu
The menu had a copy of the logo on it but with a different font weight. The overuse of the logo and a lack of consistency did not look great.
Reservations Flow
The system itself was unforgiving for users that may either make a mistake in choosing times or want to change their decisions with a lack of forward/backward buttons and selected button states.
The client also wanted to include the ability to choose which date the user would like to book a reservation for.
Subsequent pages had more usability and accessibility issues.
Redesign
1.
2.
3.
4.
Solutions to issues
1. Landing Page, Logo
For the logo, we decided on a wordmark (leaving the duck logo behind that’s present on the subsequent screens) that would fit on a square business card with a clean, elegant, and modern font pairing.
In order to solve the issue of highlighting the reservations navigation item, and to make better use of the site’s space as a whole, I decided to combine the navigation item’s pages and expand the landing page, removing the need for unnecessary competition within the navigation.
Also fixed usability and accessibility issues throughout the site.
2. Reservations
Created a primary and secondary button for the two reservation actions, accentuating the primary goal of booking a reservation.
Kept the section very minimal so as to not draw attention from the buttons.
3. Photo Gallery
Instead of a carousel to display the photos, I turned them into a gallery wall along with space for the client to promote upcoming events and highlight reviews.
This also created more contrast to accentuate the photos.
4. Menu
Removed the logo from the menu, instead I bumped up the size of the menu title.
Added a border around the menu and included another image of plants to continue with the floral, modern theme.
Reservations Flow
This is the first page that is different from the landing page, so it includes a navigation bar to send the user home as well as a footer to promote the restaurant’s Instagram. I used a similar background and border format as the “Menu” section for a consistent user experience.
Changed the buttons into radio buttons with clearly defined selected, unselected, and unavailable options. The radio buttons allow the user to make a selection without having to commit to their decision right away.
Also included “go back” and “next” primary and secondary buttons for a more forgiving user experience.
Added a date selection drop-down menu.
The website is still under construction and not yet live, but you can still view the prototype below.
More Projects
Previous
Reboot Chronicles
Next
UI Health Toolkit
