Brasserie Mémère
A Redesign Of The
Classic French Dining Experience
My Role: Project Manager
Client: Brasserie Mémère
Duration: 7 Weeks
Team: 3 Designers
UX Research & UI Design
Project Overview
Welcoming an updated outlook to a famed French Brasserie Restaurant
Brasserie Mémère has been bringing in the French cuisine experience to Closter, New Jersey for over 8 years. The brick-and-mortar location has shared its unique corner of France. However, since 2020 the restaurant industry has made a complete change onto how it presents itself. COVID has forced many locations to close - and marketing has relied on the online world.
Brasserie Mémère moves online
How will the design team for Brasserie Mémère translate the vintage French aesthetic onto an online presence? Additionally, Brasserie Mémère’s target audience is above 50+ of age, therefore accessibility must be taken into account.
-
Brasserie Mémère is updating it’s online website to reflect its current brand in-person.
-
Figma,
Adobe InDesign,
Optimal Workshop,
Axure,
Maze
The Challenge
Modernize
Restructure
Translate
Why Update The Website?
Guests visit a restaurant’s website before they decide to dine or order online.
Our Solution
The design team and I created a new layout - displaying the unique vintage French experience online, while taking into account accessibility, current events, and modern restaurant industry trends for online platforms.
Brasserie Mémère…
…Has on average 150+ guests visit them daily. Majority come from word of mouth. This has been a headcount decrease of over 40% pre-COVID.
With a lack of an updated online presence, Brasserie Mémère is unable to expand to newer guests. Additionally, many state they are uninspired to go to the restaurant based on exploring their current website.
A seamless main navigation that prioritizes the important aspects behind the restaurant.
A page for private and on-going events with a call to reserving through filling online forms.
Design systems that match WCAG 2.1 and ADA requirements.
Secondary navigational menu for dine-in menus - creating ease of interactivity.
Guests have found that they are discouraged from visiting a restaurant due to their website.
Data calculated by the MGH Restaurant Survey, 2019
The Design Process
Defining Brasserie Mémère
I began the research with my team by understanding where the client is performing. What makes them stand out? What are they doing that is unique?
Who are they?
Current Testimonials
We had users explore the website and give their unfiltered thoughts.
What Are They Doing That
We’re Not?
Our team wanted a full understanding of the restaurant industry, and direct (and indirect) competitors. The restaurant scene is much more different by location. Therefore, we took into account NYC and NJ competitors. Additionally, we took note of the type of food they served.
The Competitors We’ve Looked At
20 NYC Restaurants
20 NJ & Hudson Valley Restaurants
8 Direct Nearby Competitors
25 French Cuisine Restaurants
-
Many restaurants meet online industry standard, and the most successful ones capitalize on constant updates within their platform.
-
Brasserie Mémère has a unique image that highlights its antiques - even beyond food. They additionally have a large private events space with monthly ongoing events.
Defining The Brasserie Mémère Guest
When visiting the restaurant, the team and I took a moment to observe who exactly were dining there. Here are our findings.
Guests are…
Typically over 50+ years old
Stopping by after shopping
Upper-middle class couples
Spending over 1-3 hours dining
Which we’ve taken into account when speaking to the general restaurant crowd.
While interviewing, there were a few notable points stated by restaurant guests. Some are listed below.
“I typically go to restaurant’s websites to see what food they’re offering. Pictures help a lot if I don’t understand what I’m reading”
“Sometimes you can tell if a restaurant is fancy or really simple. I’d rather learn from what the place looks like.”
Who Did We Speak To?
Because Brasserie Mémère had a goal of expanding their guests, they wanted to learn from the perspective of younger crowds - even though and older guest was their priority.
We spoke to…
22 out of 27 of NJ Residents
14 out of 27 older than 60+
Food Enthusiasts
Those who don’t typically consume French cuisine
I centered many of the questions around how guests find their restaurant outings. What do they search in preparation? What are key factors in deciding to dine somewhere?
Notable Findings
“I don’t like making calls - so if I’m forced to make a call for a large reservation I would make someone else do it.”
“I find majority of my restaurants online - whether its through social media or searching through Google”
Understanding Our Findings
In order to gather the themes of what was being said, we began mapping notable points and grouping them under repetitive ideas.
We highlighted our notes and brainstormed methods of design features that could directly reflect the issues shared by guests.
Changing The Plate
I directed the team to take the repetitive themes and write down possible features we could update and implement onto Brasserie Mémère’s new website. We came up with the following.
An Established Hierarchy
The main navigation will be simplified and organized by what guests interact with the most.
High Quality Visuals
The website will be visual heavy, not just including the food - but the restaurants ambience as well.
Optimized Menu Options
Menu options will be organized utilizing a secondary navigational menu
Private Events Booking
Private Events will have its own portal - and not heavily rely on phone reservations.
Accessibility Design
The website will take into account ADA and WCAG 2.1 accessibility requirements.
Prioritizing A Layout
When brainstorming the layout of the website, I suggested restructuring the main navigation. A new design system we implemented was a drop down menu - which would be utilized for Menu, Events, and Contact.
This prevents crowding, and allows clear spacing for text - directly complying with accessibility design choices.
This design choice most benefitted the Menu portal - as guests were able to see all menu options immediately.
Early Design Concepts
With an established layout agreed upon the team, we began sketching early design concepts. We played with ideas of what options were more important to users based on their feedback during interviews.
Our Priorities
Designing a Landing Page that allowed guests to navigate to multiple parts of the restaurant’s website.
Drafting a page for reserving private events and ongoing events within the restaurant.
Highlighting visuals of the restaurant and the food throughout the website, not just the Gallery.
Taste Testing Designs
We moved to digitalizing our designs and testings to see what needed improvements. With feedback on our mid-fidelity designs came changes towards our high-fidelity mockups. The results and changes are shown below.
Menu Content Page
Mid-Fidelity Mockup Of Menus Page
Guests stated issues with the menu itself feeling too small and unaligned against visuals.
Guests questioned whether the Kids Menu was served on specific times.
Private Events Booking
Mid-Fidelity Mockup Of Private Events Page
Guests stated issues with scrolling to the bottom of the page to reach the inquiry form.
Guests called for more details regarding the event space - with more visuals.
High-Fidelity Mockup Of Private Events Page
We created a button for guests to jump immediately to the form - should they need to.
We added a gallery per each room, allowing guests to view the full event space.
On-Going Events
Mid-Fidelity Mockup Of On-Going Events Page
Guests questioned the reservation system for Upcoming Events.
Guests stated the overall page looking a little empty.
High-Fidelity Mockup Of Menus Page
The layout of the visuals were rearranged - allowing for more room for the menu items to be seen.
The Kids Menu was integrated onto all the Menu options
High-Fidelity Mockup Of On-Going Events Page
We added contact information for Upcoming Events RSVP.
We added ‘Weekly Deals’ onto the page to fill content.
Introducing
Brasserie Mémère
Explore a modern look to French Dining
Toggle between menus with ease
Utilize the secondary navigation menu to toggle between dining times. Guest can explore different food options based on what is available and during specific timezones. Each menu is complimented with stunning visuals of the offered meals.
Explore the new Book Private Events page, with a catalogue of visuals showcasing Brasserie Mémère’s spaces. Additionally, view and RSVP for upcoming events going within the restaurant.
Improved Menu
The new layout displayed an 27% increase in satisfaction between guests while testing
Guests stated the menu items are now easier to read, while being visually pleasing
Book private events efficiently
Have a look at Brasserie Mémère’s stunning space
Explore the new Book Private Events page, with a catalogue of visuals showcasing Brasserie Mémère’s spaces. Additionally, view and RSVP for upcoming events going within the restaurant.
Large Call for
Private Events
Guests state the form within the Private Events helps with interactivity and desire to book large events within the restaurant.
Inspiration To Visit
85% of guests have stated they wish to visit the restaurant.
Guests mention the visual aesthetic within the Brasserie Mémère website is appealing.
Next Steps
Mobile Implementation
We have an established design for the mobile platform, however there needs to be more testing within the app.
On the first round of testing, there was a 25% increase in ease of usability for viewing the menu and private events.
Guests have stated a more organized private events page - with a better call to action for viewing different rooms.
More Accessibility Design
I have taken accessibility design into account when establishing a style guide. This is mostly prevalent with the font and visuals.
I wish to implement more design systems that are WCAg 2.1 and ADA compliant.
Bon Apètite!
Reflecting upon my work…
This was the first time I was exposed to accessibility design. I was responsible with understanding what changes we had to make when taking into account visuals and fonts for an older crowd. I spent a lot of my research looking into WCAG 2.1 and ADA requirements, and communicated this with both the design team and Brasserie Mémère staff. This project was extremely enlightening towards learning how to become a better accessible designer. I have learned about how many elderly users are not considered when designing and developing digital products.
Mostly design decisions on the mobile end. I believe there are improvements to be made within Brasserie Mémère’s mobile platform. I would spend more time researching restaurant mobile designs. Our team spent a few hours taking a look into competitors mobile websites - but what we found is that it is an easily neglected part of a restaurant’s online presence. I firmly believe Brasserie Mémère should take advantage of an overlooked market, as 90% of guests have stated they primarily use their phone to search about restaurants.
What I would change…